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

* {
  outline: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

button {
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
}

a {
  display: inline-block;
  text-decoration: none;
}

input,
textarea,
label {
  display: block;
  outline: none;
  border: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
li {
  margin: 0;
  padding: 0;
}

body.custom-background {
  background-image: url("../images/banner/body-bg.jpg");
  background-position: left top;
  background-size: auto;
  background-repeat: repeat;
  background-attachment: fixed;
}

body.coming_soon {
  background-image: url("../images/banner/coming_soon_bg.png");
  background-repeat: no-repeat;
}

:root {
  --brand: #9cc026;
  --brand2: #5faf21;
  --font1: "Merienda", cursive;
  --font2: "Montserrat", sans-serif;
}

/* Font common classes start */
.font1 {
  font-family: var(--font1);
}

.font2 {
  font-family: var(--font2);
}

/* Font common classes end */

/* Sweet alert css start */
.swal-overlay {
  overflow-y: auto;
}

.swal-button:focus {
  outline: none;
  box-shadow: none;
}

.swal-button {
  background-color: var(--brand2);
  font-size: 16px;
  color: white;
  text-transform: uppercase;
  font-weight: unset;
  border-radius: 4px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.swal-button:hover {
  background-color: #333;
}

.swal-button:active {
  background-color: #333;
}

.swal-title {
  color: #333333;
  font-size: 18px;
  line-height: 1.5;
  padding: 0 15px;
}

.swal-text {
  color: #555555;
  font-size: 16px;
  line-height: 1.666667;
  text-align: center;
}

.swal-footer {
  margin-top: 0;
}

/* Sweet alert css end */

/* scrollbar style start */
html::-webkit-scrollbar {
  width: 1.30vw;
}

html::-webkit-scrollbar-thumb {
  background-color: var(--brand);
}

html::-webkit-scrollbar-thumb:hover {
  background-color: var(--brand);
}

html::-webkit-scrollbar-track {
  background-color: #000;
}

html::-webkit-scrollbar-track:hover {
  background-color: #000;
}

/* blink based browser */

/* geckeo based browser */
html {
  /* scrollbar-width: bold; */
  scrollbar-color: var(--brand) #000;
}

/* scrollbar style end */

/* breadcrumb css start */
.breadcrumb-item.active {
  color: var(--brand2) !important;
}

/* breadcrumb css end */

/* //////////////////////////////////////////////////////////////
                [Section Header after text part css start]
////////////////////////////////////////////////////////////// */
.header_title p {
  color: var(--brand);
  font-size: 20px;
  font-family: var(--font1);
  font-weight: 800;
  text-transform: capitalize;
  position: relative;
  display: inline-block;
}

.header_title p::before {
  position: absolute;
  content: '';
  width: 55px;
  height: 55px;
  background-image: url(../images/icons/flower.png);
  top: -42px;
  left: 95%;
  background-repeat: no-repeat;
  transform: rotate(10deg);
}

.about_header_title {
  font-size: 50px;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 20px;
  font-family: var(--font2);
  color: #000;
  text-transform: capitalize;
}

/* //////////////////////////////////////////////////////////////
                [Section Header after text part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                [Restyle Select2 css start]
////////////////////////////////////////////////////////////// */
.rs1-select2 .select2-container {
  display: block;
  max-width: 100% !important;
  width: auto !important;
}

.rs1-select2 .select2-container .select2-selection--single {
  height: 45px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  border: none;
  outline: none;
  background-color: #fff;
  border-radius: 0px;
  position: relative;
  border: 1px solid var(--brand);
}

/*------------------------------------------------------------------
[ in select ]*/
.rs1-select2 .select2-container .select2-selection--single .select2-selection__rendered {
  font-size: 13px;
  color: #555;
  line-height: 1.2;
  padding-left: 20px;
  background-color: transparent;
}

.rs1-select2 .select2-container--default .select2-selection--single .select2-selection__arrow {
  width: 38px;
  height: 20px;
  top: calc(50% - 10px);
  right: 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--brand);
}

.rs1-select2 .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.rs1-select2 .select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "\f0dc";
  font-family: FontAwesome;
  font-size: 13px;
  color: #808080;
}

.rs1-select2 .select2-container--default .select2-selection--single .select2-selection__arrow:hover:after {
  color: var(--brand);
}


/*------------------------------------------------------------------
[ Dropdown option ]*/
.rs1-select2 .select2-container--open .select2-dropdown {
  z-index: 1251;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 0px;
  overflow: hidden;
  background-color: white;
  left: 0px;

  box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
}

.rs1-select2 .select2-dropdown--above {
  top: -2px;
}

.rs1-select2 .select2-dropdown--below {
  top: 2px;
}

.rs1-select2 .select2-container .select2-results__option[aria-selected] {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
}

.rs1-select2 .select2-container .select2-results__option[aria-selected="true"] {
  background: var(--brand);
  color: white;
}

.rs1-select2 .select2-container .select2-results__option--highlighted[aria-selected] {
  background: var(--brand);
  color: white;
}

.rs1-select2 .select2-results__options {
  font-size: 13px;
  color: #555;
  line-height: 1.2;
}

.rs1-select2 .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  outline: none;
  font-size: 13px;
  color: #555;
  line-height: 1.2;
}

/*------------------------------------------------------------------
[ rs2 ]*/
.rs2-select2 .select2-container .select2-selection--single {
  height: 40px;
}

.rs2-select2 .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 15px;
}

.rs2-select2 .select2-container--default .select2-selection--single .select2-selection__arrow {
  width: 35px;
  right: 0px;
  border-left: none;
}

.rs2-select2 .select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "\f0d7";
}


/* //////////////////////////////////////////////////////////////
                [Restyle Select2 css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                [circles box animation part css start]
////////////////////////////////////////////////////////////// */
.circles-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles-box li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;

}

.circles-box li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}


.circles-box li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles-box li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles-box li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles-box li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles-box li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles-box li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles-box li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles-box li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles-box li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}



@keyframes animate {

  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }

}

/* //////////////////////////////////////////////////////////////
                [circles box animation part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                [Preloader part css start]
////////////////////////////////////////////////////////////// */
.ctn-preloader {
  align-items: center;
  cursor: none;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99999999;
}

.ctn-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}

.ctn-preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 3px solid var(--brand);
  border-top-color: #ffffff;
  height: 144px;
  margin: 0 auto 56px auto;
  width: 144px;
}

.ctn-preloader .animation-preloader .txt-loading {
  font: bold 80px var(--font2);
  text-align: center;
  user-select: none;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
  animation: letters-loading 4s infinite;
  color: var(--brand2);
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: rotateY(-90deg);
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading {
  color: rgba(255, 255, 255, 0.3);
  position: relative;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
  animation-delay: 0.2s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
  animation-delay: 0.4s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
  animation-delay: 0.6s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
  animation-delay: 0.8s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
  animation-delay: 1s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
  animation-delay: 1.2s;
}

.ctn-preloader .loader-section {
  background-color: #fff;
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.ctn-preloader .loader-section.section-left {
  left: 0;
}

.ctn-preloader .loader-section.section-right {
  right: 0;
}


.loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}


.loaded .loader-section.section-left {
  transform: translateX(-101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}

.loaded .loader-section.section-right {
  transform: translateX(101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}

@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes letters-loading {

  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* //////////////////////////////////////////////////////////////
                [Preloader part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                [Breadcrumb part css start]
////////////////////////////////////////////////////////////// */
#breadcrumb {
  padding: 208px 0;
}

/*-- Banner --*/
.banner-area {
  position: relative;
  min-height: 0px;
  color: #fff;
  background-position: 50% 50%;
  background-size: cover;
}

.banner-title {
  color: #fff;
  text-transform: capitalize;
  font-size: 58px;
  font-weight: 900;
  margin-bottom: 15px;
  font-family: var(--font2);
}

.banner-text {
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  max-width: 1170px;
  margin: 0 auto;
  width: 100%;
  z-index: 1;
  transform: translateY(-50%);
}

.banner-heading {
  text-align: center;
  padding-bottom: 68px;
}

.breadcrumb {
  padding: 0;
  background: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
}

.breadcrumb li a,
.breadcrumb .breadcrumb-item,
.breadcrumb li a:focus,
.breadcrumb li a:hover {
  color: #fff !important;
}

.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  color: #fff;
}

.breadcrumb {
  display: inline-block;
  overflow: hidden;
  border-radius: 5px;
  /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
  counter-reset: flag;
}

.breadcrumb a {
  text-decoration: none;
  outline: none;
  display: block;
  float: left;
  font-size: 12px;
  line-height: 36px;
  color: white;
  /*need more margin on the left of links to accomodate the numbers*/
  padding: 0 10px 0 60px;
  background: linear-gradient(59deg, var(--brand)0%, var(--brand2)95%);
  position: relative;
  font-weight: 800;
}

/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
  padding-left: 46px;
  border-radius: 5px 0 0 5px;
  /*to match with the parent's radius*/
}

.breadcrumb a:first-child:before {
  left: 14px;
}

.breadcrumb a:last-child {
  border-radius: 0 5px 5px 0;
  /*this was to prevent glitches on hover*/
  padding-right: 20px;
}

/*hover/active styles*/
.breadcrumb a.active {
  background: linear-gradient(59deg, var(--brand)0%, var(--brand2)95%);
}

.breadcrumb a:hover {
  background: linear-gradient(59deg, var(--brand2) 0%, var(--brand) 95%) !important;
}

.breadcrumb a.active:after {
  background: linear-gradient(59deg, var(--brand)0%, var(--brand2)95%);
}

.breadcrumb a:hover:after {
  background: linear-gradient(59deg, var(--brand2) 0%, var(--brand) 95%) !important;
}

.breadcrumb i {
  color: #fff;
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a::after {
  content: '';
  position: absolute;
  top: 0;
  right: -18px;
  width: 36px;
  height: 36px;
  transform: scale(0.707) rotate(45deg);
  z-index: 1;
  background: linear-gradient(59deg, var(--brand)0%, var(--brand2)95%);
  box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
  border-radius: 0 5px 0 50px;
}

/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
  content: none;
}

/*we will use the :before element to show numbers*/
.breadcrumb a:before {
  content: counter(flag);
  counter-increment: flag;
  /*some styles now*/
  border-radius: 100%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin: 8px 0;
  position: absolute;
  top: 0;
  left: 30px;
  background: var(--brand2);
  font-weight: bold;
}

/* //////////////////////////////////////////////////////////////
                [Breadcrumb part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                [Back to top button part css start]
////////////////////////////////////////////////////////////// */
.back-to-top {
  color: #ffffff;
  position: fixed;
  z-index: 4;
  top: 0;
  right: 15px;
  width: 45px;
  height: 45px;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  line-height: 45px;
  border-radius: 5px;
  background-color: rgb(167, 183, 58);
  -webkit-transition: .9s;
  transition: .9s;
  cursor: pointer;
}

.back-to-top.active {
  top: 98%;
  -webkit-transform: translateY(-98%);
  transform: translateY(-98%);
  opacity: 1;
  visibility: visible;
}

.back-to-top i {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin: 0 auto;
}

.back-to-top i:last-child {
  top: 60%;
  opacity: 0;
  visibility: hidden;
}

.back-to-top::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  border-radius: 5px;
  background-color: #000;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.back-to-top:hover,
.back-to-top:focus {
  color: #ffffff;
}

.back-to-top:hover::before,
.back-to-top:focus::before {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover i:first-child,
.back-to-top:focus i:first-child {
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.back-to-top:hover i:last-child,
.back-to-top:focus i:last-child {
  top: 50%;
  opacity: 1;
  visibility: visible;
}

/* //////////////////////////////////////////////////////////////
                      [Back to top button part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Top bar part css start]
////////////////////////////////////////////////////////////// */
#top-bar {
  display: flex;
  justify-content: space-between;
  background: #000;
  border-bottom: 2px solid var(--brand);
  border-top: 2px solid var(--brand);
  border-left: 2px solid var(--brand);
}

#top-bar i {
  color: var(--brand);
}

.shop-details {
  margin-left: 14px;
  align-items: center;
  display: flex;
  font-family: var(--font2);
}

.shop-details span {
  color: #fff;
}

.shop-details h3 {
  color: #fff;
  font-size: 12px;
  line-height: 30px;
  text-transform: capitalize;
  margin-right: 25px;
}

.shop-details .call a {
  color: #fff;
  padding-left: 25px;
  font-size: 12px;
  border-left: 1px solid #fff;
}

.shop-details .call a:last-child {
  margin-right: 25px;
  border: 0;
  padding-left: 0;
}

.shop-details .mail a {
  color: #fff;
  padding-left: 25px;
  font-size: 12px;
  border-left: 1px solid #fff;
}

.shop-details .mail a:last-child {
  margin-right: 0;
  border: 0;
  padding-left: 0;
}

.search {
  position: relative;
  padding: 5px 35px;
  background: var(--brand);
  max-width: 450px;
}

.search::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 100%;
  top: 0;
  left: -15px;
  transform: skewX(-30deg);
  background: var(--brand);
}

.search form button i{
  color: #fff !important;
}
.search form button:hover{
  background: var(--brand2);
}
.search form .form-control {
	color: #fff;
	background-color: #000;
}
.search  input::placeholder {
	color: #fff !important;
}

/* //////////////////////////////////////////////////////////////
                      [Top bar part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Header part css start]
////////////////////////////////////////////////////////////// */
.logo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  height: 65%;
  margin-right: 55px;
}

#header .container-menu-desktop {
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.limiter-menu-desktop {
  height: 100%;
  display: flex;
  align-items: center;
  background-color: transparent;
  padding-left: 45px;
}

#header .wrap-menu-desktop {
  background: #000;
  backdrop-filter: blur(1px) saturate(120%);
  top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-menu>li.active-menu>a {
  color: var(--brand) !important;
}

.container-menu-desktop {
  height: auto;
  width: 100%;
  position: relative;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}


#header .container-menu-desktop {
  height: auto;
}

.menu-desktop {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  height: 100%;
}

.sub-menu {
  list-style-type: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 178px;
  max-width: 225px;
  background-color: #fff;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  padding: 5px 0;
  box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
}

.sub-menu li {
  position: relative;
  background-color: transparent;

  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

.main-menu>li>.sub-menu {
  top: 100%;
  left: 0;
}

.sub-menu a {
  font-size: 14px;
  line-height: 1.5;
  color: #000000;
  display: block;
  padding: 8px 20px;
  width: 100%;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  font-weight: 500;
}

.main-menu>li:hover>a {
  text-decoration: none;
  color: var(--brand2);
}

.main-menu>li:hover>.sub-menu {
  visibility: visible;
  opacity: 1;
}

.sub-menu li:hover>.sub-menu {
  visibility: visible;
  opacity: 1;
}

.sub-menu li:hover {
  background-color: transparent;
}

.sub-menu>li:hover>a {
  color: var(--brand2);
  text-decoration: none;
}

.main-menu {
  list-style-type: none;
  margin: 0;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}

.main-menu>li {
  display: block;
  position: relative;
  padding: 20px 10px 20px 0px;
  margin: 0px 4px 0px 14px;
}

.main-menu>li>a {
  font-size: 14px;
  color: #ffffff;
  padding: 5px 0px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  font-weight: 600;
  font-family: var(--font2);
}

#header .main-menu>li>a {
  color: #ffffff;
}

.wrap-menu-desktop {
  position: relative;
  z-index: 991;
  background-color: transparent;
  width: 100%;
  height: 84px;
  top: 40px;
  left: 0px;
  -webkit-transition: height 0.3s, background-color 0.3s;
  -o-transition: height 0.3s, background-color 0.3s;
  -moz-transition: height 0.3s, background-color 0.3s;
  transition: height 0.3s, background-color 0.3s;
  -ms-transition: height 0.3s, background-color 0.3s;
}

.wrap-icon-header {
  justify-content: flex-end;
  -ms-align-items: center;
  align-items: center;
}

/* .wrap-icon-header .wrap-icon-header-item:first-child {
  padding-left: 0 !important;
} */

.wrap-icon-header-item {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  padding-left: 19px;
  padding-right: 25px;
}

.icon-header-item {
  padding: 0 11px;
}

.icon-header-item i {
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.icon-header-noti::after {
  content: attr(data-notify);
  font-size: 12px;
  color: #fff;
  line-height: 20px;
  text-align: center;
  display: block;
  position: absolute;
  top: -10px;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: #ff6000;
  border-radius: 50%;
}

.wrap-header-mobile .wrap-icon-header {
  flex-grow: unset;
}

.wrap-icon-header {
  flex-grow: 1;
}

.icon-header-item {
  position: relative;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #fff;
}

.user .btn {
  background: transparent;
  border: none;
  padding: 0;
}

.user .btn:active {
  background: transparent;
  border: none;
}

.user .btn i {
  font-size: 26px;
}

.user .dropdown ul li a i {
  color: #000 !important;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.user .dropdown ul li {
  margin: 5px 0;
}

.user .dropdown .dropdown-toggle::after {
  vertical-align: 6px;
}

.fix-menu-desktop .user .dropdown .dropdown-toggle::after {
  border-top: .3em solid #000;
}

.user .dropdown ul li a {
  color: #000;
  font-weight: 500;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.user .dropdown-item.active,
.user .dropdown-item:active {
  color: var(--brand) !important;
  background: transparent;
}

.user .dropdown ul li:hover a,
.user .dropdown ul li:hover i {
  color: var(--brand) !important;
}

.icon-header-item i {
  color: #fff;
}

.icon-header-item:hover i {
  color: #5faf21;
}

.label1 {
  position: relative;
}

.label1::after {
  content: attr(data-label1);
  font-size: 10px;
  line-height: 15px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  display: block;
  position: absolute;
  top: 7px;
  right: -9px;
  height: 15px;
  min-width: 32px;
  border-radius: 7px;
  padding: 0 4px;
  background-color: #ff6000;
  font-style: var(--font2) !important;
  font-weight: 600;
}

.label1.rs1::after {
  top: calc(50% - 8px);
  right: auto;
  left: 90%;
}

/* Fixed menu desktop start */

/* Fixed menu desktop end*/
.fix-menu-desktop .wrap-menu-desktop {
  height: 70px;
  background-color: #000;
}


#header .fix-menu-desktop .wrap-menu-desktop {
  background-color: #fff;
  position: fixed;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.4);
}

#header .fix-menu-desktop .wrap-menu-desktop .main-menu>li>a {
  color: #000;
}

#header .fix-menu-desktop .wrap-menu-desktop .main-menu>li.active-menu>a {
  color: var(--brand);
}

#header .fix-menu-desktop .wrap-menu-desktop .icon-header-item i {
  color: #000000;
}

#header .fix-menu-desktop .wrap-menu-desktop .icon-header-item:hover i {
  color: var(--brand);
}

#header .fix-menu-desktop .wrap-menu-desktop .main-menu>li:hover>a {
  text-decoration: none;
  color: var(--brand2);
}

/* Header Mobile part start */
.wrap-header-mobile {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  height: 70px;
  background-color: #000000;
  padding: 15px;
  display: none;

  box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.2);
}

.wrap-header-mobile .wrap-icon-header {
  justify-content: flex-end;
  -ms-align-items: center;
  align-items: center;
}

.logo-mobile {
  display: block;
  position: relative;
  height: 100%;
  padding-right: 25px;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  flex-grow: 1;
}

.logo-mobile img {
  max-width: calc(100% - 20px);
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.wrap-header-mobile .wrap-icon-header {
  margin-right: 15px;
}

.wrap-icon-header .wrap-icon-content {
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  padding-right: 5px;
}

.wrap-icon-content .icon-header-item {
  color: #fff;
  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: 0 11px;
}

.wrap-icon-content .icon-header-item:hover {
  color: var(--brand2);
}

.hamburger {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 0;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
}

.hamburger:hover {
  opacity: 1;
}

.menu-mobile {
  width: 100%;
  background-color: white;
  display: none;
}

.main-menu-m {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #000;
}

.main-menu-m>li>a {
  font-size: 14px;
  color: white;
  /* line-height: 2.8; */
  padding: 8px 20px 8px 20px;
  font-weight: 600;
}

.main-menu-m>li {
  color: white;
  position: relative;
  margin-bottom: 5px;
}

.arrow-main-menu-m {
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 2px;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  justify-content: end;
}

.arrow-main-menu-m i {
  transform-origin: center;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.turn-arrow-main-menu-m i {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sub-menu-m {
  background-color: #fff;
  display: none;
  margin: 0px 30px 0px 30px;
}

.sub-menu-m li {
  padding: 0 0 0 20px;
}

.sub-menu-m a {
  font-size: 14px;
  color: #666;
  line-height: 2.5;
  padding: 5px 0 5px 0;
  font-weight: 600;
}

.sub-menu-m a:hover {
  text-decoration: none;
  color: #555555;
}

/* Header Mobile part end */


/* //////////////////////////////////////////////////////////////
                      [Header part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Sidebar part css start]
////////////////////////////////////////////////////////////// */
.wrap-sidebar {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.0);
  visibility: hidden;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.sidebar {
  position: fixed;
  z-index: 1100;
  width: 390px;
  max-width: calc(100% - 30px);
  height: 100vh;
  top: 0;
  right: -400px;
  background-color: #ffffff;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.34;
  transition: all 0.4s;
  box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -webkit-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -o-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -ms-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -ms-align-items: flex-start;
  align-items: flex-start;
  padding-bottom: 25px;
  padding-top: 22px;
  overflow: auto;
}

.show-sidebar {
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.6);
}

.show-sidebar .sidebar {
  right: 0;
}

.sidebar .sidebar-xmark {
  justify-content: flex-end;
  display: flex;
  padding-bottom: 30px;
  padding-right: 27px;
}

.sidebar .sidebar-xmark .pointer {
  cursor: pointer;
  color: #fff;
  line-height: 10px;
  font-size: 26px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  background: #ff6000;

  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  padding: 5px 9px;
}

.sidebar .sidebar-xmark .pointer:hover {
  color: #ff6000;
  background: #ddd;
}

.sidebar-title {
  position: relative;
  font-size: 20px;
  font-weight: 600;
  font-family: var(--font1);
  color: var(--brand);
}

.sidebar-title::after {
  position: absolute;
  content: "";
  top: 25px;
  left: 100px;
  width: 6px;
  height: 6px;
  background: var(--brand2);
  border-radius: 50%;
}

.sidebar-title::before {
  position: absolute;
  content: "";
  top: 32px;
  left: 0;
  width: 41%;
  height: 2px;
  background: var(--brand);
}

.sidebar-content {
  flex-grow: 1;
  overflow: auto;
  align-content: space-between;
  padding: 0 65px;
}

.sidebar-link li {
  padding-bottom: 13px;
}

.sidebar-link li a {
  font-size: 15px;
  color: #000000;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  font-weight: 600;
}

.sidebar-link li a:hover {
  color: var(--brand);
}

.wrap-item-gallery {
  width: calc((100% - 20px) / 3);
  margin-bottom: 9px;
}

.sidebar-gallery {
  padding: 30px 0;
}

.item-gallery {
  display: block;
  width: 100%;
  padding-top: 100%;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}

.gallery-lb {
  padding-top: 36px;
}

.item-gallery::after {
  font: var(--fa-font-solid);
  content: "\f424";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.34;
  transition: all 0.4s;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

.item-gallery:hover:after {
  opacity: 1;
}

.sidebar-text span {
  color: #000000;
  font-size: 18px;
  line-height: 1.333333;
  padding-top: 27px;
}

.sidebar-text p {
  font-size: 14px;
  line-height: 1.7143;
  padding-top: 27px;
  color: #000000;
}

/* //////////////////////////////////////////////////////////////
                      [Sidebar part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Cart Sidebar part css start]
////////////////////////////////////////////////////////////// */
.cart {
  -ms-align-items: flex-start;
  align-items: flex-start;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  padding: 0 25px 0 65px;
  overflow: auto;
}

.wrap-header-cart {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.0);
  visibility: hidden;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.cart-xmark {
  justify-content: flex-end;
  display: contents;
  padding-bottom: 30px;
  padding-right: 27px;
}

.cart-xmark .pointer {
  cursor: pointer;
  color: #fff;
  line-height: 10px;
  font-size: 26px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  background: #ff6000;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  padding: 5px 9px;
}

.cart-xmark .pointer:hover {
  color: #ff6000;
  background: #ddd;
}

.cart {
  position: fixed;
  z-index: 1100;
  width: 390px;
  max-width: calc(100% - 30px);
  height: 100vh;
  top: 0;
  right: -400px;
  background-color: #ffffff;
  -ms-align-items: flex-start;
  align-items: flex-start;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.34;
  transition: all 0.4s;
  padding: 0 25px 0 65px;
  box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -webkit-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -o-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -ms-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  overflow: auto;
  justify-content: space-between;
}

.cart::after {
  content: "";
  display: block;
  width: 100%;
  height: 9%;
  min-height: 30px;
}


.show-header-cart {
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.6);
}

.show-header-cart .cart {
  right: 0;
}

.header-cart-item {
  -ms-align-items: flex-start;
  align-items: flex-start;
  margin-bottom: 12px;
}

.header-cart-item-img {
  width: 60px;
  position: relative;
  margin-right: 20px;
  cursor: pointer;
}

.header-cart-item-img img {
  width: 100%;
}

.header-cart-item-img::after {
  font: var(--fa-font-solid);
  content: "\f290";
  font-size: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  opacity: 0;
}

.header-cart-item-img:hover:after {
  opacity: 1;
}

.header-cart-item-txt {
  width: calc(100% - 80px);
  padding-top: 8px;
}

.header-cart-item-name {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 18px;
  color: #000000;
  font-weight: 700;
}

.header-cart-item-info {
  display: block;
  font-size: 14px;
  color: #ff6000;
  line-height: 1.5;
  font-weight: 600;
}

.header-cart-total {
  font-size: 20px;
  color: #000000;
  line-height: 1.3;
  padding: 40px 0;
  font-weight: 700;
}

.header-cart-total span {
  color: #ff6000;
}



.header-cart-buttons a {
  padding: 0 15px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  margin: 0 8px 10px 0;
  background: var(--brand);
  color: #fff;
  min-width: 132px;
  height: 40px;
  font-size: 15px;
  line-height: 1.466667;
  text-transform: uppercase;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;

}

.header-cart-buttons a:hover {
  background: var(--brand2);
}

/* Header cart title part start */
.header-cart-title {
  width: 100%;
  max-width: 100%;
  height: 16.5%;
  min-height: 85px;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  padding-bottom: 8px;
}

.header-cart-title span {
  font-size: 20px;
  line-height: 1.333333;
  text-transform: capitalize;
  color: #000000;
  font-weight: 700;
}

.header-cart-content {
  flex-grow: 1;
  overflow: auto;
  align-content: space-between;
}

.header-cart-wrap-item {
  flex-grow: 1;
  margin: 0 70px 0 0;
}

/* //////////////////////////////////////////////////////////////
                      [Cart Sidebar part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [wishlist Sidebar part css start]
////////////////////////////////////////////////////////////// */
/* Header cart part start */
.wrap-header-wishlist {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.0);
  visibility: hidden;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.wishlist {
  position: fixed;
  z-index: 1100;
  width: 390px;
  max-width: calc(100% - 30px);
  height: 100vh;
  top: 0;
  right: -400px;
  background-color: #ffffff;
  -ms-align-items: flex-start;
  align-items: flex-start;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.34;
  transition: all 0.4s;
  padding: 0 25px 0 65px;
  box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -webkit-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -o-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  -ms-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.18);
  overflow: auto;
  justify-content: space-between;
}

.wishlist::after {
  content: "";
  display: block;
  width: 100%;
  height: 9%;
  min-height: 30px;
}

.show-header-wishlist {
  visibility: visible;
  background-color: rgba(255, 255, 255, 0.6);
}

.show-header-wishlist .wishlist {
  right: 0;
}

.header-wishlist-item {
  -ms-align-items: flex-start;
  align-items: flex-start;
  margin-bottom: 12px;
}

.header-wishlist-item-img {
  width: 60px;
  position: relative;
  margin-right: 20px;
  cursor: pointer;
}

.header-wishlist-item-img img {
  width: 100%;
}

.header-wishlist-item-img::after {
  font: var(--fa-font-solid);
  content: "\f290";
  font-size: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  opacity: 0;
}

.header-wishlist-item-img:hover:after {
  opacity: 1;
}

.header-wishlist-item-txt {
  width: calc(100% - 80px);
  padding-top: 8px;
}

.header-wishlist-item-name {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 18px;
  color: #000000;
  font-weight: 700;
}

.header-wishlist-item-info {
  display: block;
  font-size: 14px;
  color: #ff6000;
  line-height: 1.5;
  font-weight: 600;
}

.header-wishlist-total {
  font-size: 18px;
  color: #222;
  line-height: 1.3;
}


/* Header cart part end */

/* Header cart title part start */
.header-wishlist-title {
  width: 100%;
  max-width: 100%;
  height: 16.5%;
  min-height: 85px;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  padding-bottom: 8px;
}

.header-wishlist-title span {
  font-size: 20px;
  line-height: 1.333333;
  text-transform: capitalize;
  color: #000000;
  font-weight: 700;
}

.header-wishlist-content {
  flex-grow: 1;
  overflow: auto;
  align-content: space-between;
}

/* wishlist part start */
.show-header-wishlist {
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.6);
}

.show-header-wishlist .header-wishlist {
  right: 0;

}

.wishlist-xmark {
  justify-content: flex-end;
  display: contents;
  padding-bottom: 30px;
  padding-right: 27px;
}

.wishlist-xmark .pointer {
  cursor: pointer;
  color: #fff;
  line-height: 10px;
  font-size: 26px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  background: #ff6000;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  padding: 5px 9px;
}

.wishlist-xmark .pointer:hover {
  color: #ff6000;
  background: #ddd;
}

/* wishlist part end */

/* //////////////////////////////////////////////////////////////
                      [wishlist Sidebar part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Slider part css start]
////////////////////////////////////////////////////////////// */

.product-slider .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

#wrapper {
  width: 100%;
  height: 100vh;
  min-height: 750px;
  background: url(../images/banner/banner-back-bg.jpg) center no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  display: flex;
}

#wrapper .content {
  height: 600px;
  margin: auto;
  width: 100%;
  max-width: 1050px;
  display: flex;
  align-items: center;
  position: relative;
}

.bg-shape {
  height: 100%;
  box-shadow: 0px 30px 139px 0px rgba(10, 22, 31, 0.26);
  border-radius: 30px;
  padding: 45px 40px;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}

.bg-shape img {
  object-fit: contain;
  width: 100%;
  display: block;
  object-position: left center;
  opacity: 1;
  transform: rotate(-90deg) translateY(-50%);
  max-width: inherit;
  left: 23%;
  position: absolute;
}

#wrapper .next,
#wrapper .prev {
  z-index: 22;
  display: block;
  border: none;
  width: 61px;
  height: 61px;
  border-radius: 50%;
  font-size: 25px;
  position: absolute;
  top: 50%;
  outline: none;
  cursor: pointer;
  background: #ffffff63;
}

#wrapper .next:focus,
#wrapper .prev:focus {
  outline: none;
}

#wrapper .prev {
  left: -30%;
  transform: translate(-100%, -50%);
}

#wrapper .next {
  right: 0;
  transform: translate(50%, -50%);
}

.product-slider {
  width: 75%;
  height: 85%;
  border-radius: 30px;
  box-shadow: 0 28px 79px 0 rgba(10, 22, 31, 0.35);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.product-slider__wrp {
  height: 100%;
}

.product-slider__item {
  position: relative;
  height: 100%;
  width: 100%;
}

.product-slider__item.swiper-slide-active .product-slider__content>* {
  opacity: 1;
  transform: none;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(1) {
  transition-delay: 0s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(2) {
  transition-delay: 0.2s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(3) {
  transition-delay: 0.4s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(4) {
  transition-delay: 0.6s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(5) {
  transition-delay: 0.8s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(6) {
  transition-delay: 1s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(7) {
  transition-delay: 1.2s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(8) {
  transition-delay: 1.4s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(9) {
  transition-delay: 1.6s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(10) {
  transition-delay: 1.8s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(11) {
  transition-delay: 2s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(12) {
  transition-delay: 2.2s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(13) {
  transition-delay: 2.4s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(14) {
  transition-delay: 2.6s;
}

.product-slider__item.swiper-slide-active .product-slider__content>*:nth-child(15) {
  transition-delay: 2.8s;
}

.product-slider__item.swiper-slide-active circle {
  animation: progress 1s ease-out forwards;
  animation-delay: 0.5s;
  opacity: 0.75;
}

.product-slider__card {
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
  border-radius: 30px;
}

.product-slider__cover {
  border-radius: 30px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


.product-slider__content {
  color: #000000;
  padding-top: 1px;
  position: relative;
  z-index: 2;
  width: 100%;
  padding-left: 250px;
  padding-right: 80px;
}

.product-slider__title {
  margin: 0;
  margin-bottom: 10px;
  font-weight: 900;
  font-size: 41px;
  line-height: 1.2em;
  letter-spacing: 2px;
  opacity: 0;
  transform: translateY(55px);
  transition: all 0.5s;
  font-family: var(--font1);
}

.product-slider__price {
  display: block;
  font-size: 42px;
  opacity: 0;
  transform: translateY(55px);
  transition: all 0.5s;
  font-family: var(--font2);
  font-weight: 600;
  color: #ff6000;
}


.product-slider__price sup {
  top: -20px;
  font-size: 65%;
}

.product-slider__cart {
  box-shadow: 0 7px 99px 0 rgba(128, 204, 51, 0.6);
  background-image: linear-gradient(-45deg, #9cc026 0%, #5faf21 100%);
  border: none;
  color: #fff;
  padding: 10px 30px;
  border-radius: 50px;
  min-height: 50px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  margin-right: 40px;
  cursor: pointer;
}

.product-slider__fav {
  color: #888e94;
  background: none;
  border: none;
  position: relative;
  padding-left: 25px;
  outline: none;
  cursor: pointer;
}

.product-slider__fav:focus {
  outline: none;
}

.product-slider__fav .heart {
  display: block;
  position: absolute;
  left: 0;
  transform: translate(-50%, -50%) scale(0.7);
  top: 50%;
  pointer-events: none;
  width: 100px;
  height: 100px;
  background: url(../images/icons/heart.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
  transition: background-position 1s steps(28);
  transition-duration: 0s;
}

.product-slider__fav .heart.is-active {
  transition-duration: 1s;
  background-position: -2800px 0;
}

.product-slider__bottom {
  margin-top: 20px;
  opacity: 0;
  transform: translateY(55px);
  transition: all 0.5s;
}

.product-ctr {
  display: flex;
  align-items: center;
  min-height: 150px;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(55px);
  transition: all 0.5s;
}

.product-ctr .hr-vertical {
  width: 1px;
  background: #9fa3a7;
  align-self: stretch;
  margin: 0 35px;
  flex-shrink: 0;
  opacity: 0.5;
}

.product-labels__checkbox {
  display: none;
}

.product-labels__title {
  font-family: var(--font1);
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 16px;
  margin-bottom: 10px;
}

.product-labels__group {
  margin-bottom: 15px;
}

.product-labels__group:last-child {
  margin-bottom: 0;
}

.product-labels__item {
  margin: 5px;
}

.product-labels__txt i {
  color: var(--brand);
  margin-right: 1px;
}

.product-labels__txt {
  display: block;
  border: 2px solid transparent;
  font-size: 12px;
  padding: 0px 19px;
  padding-left: 0;
  border-radius: 50px;
  transition: all 0.3s;
  letter-spacing: 1px;
  font-weight: 600;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.product-inf {
  text-align: center;
}


.product-inf__percent {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
  margin-bottom: 12px;
  font-family: var(--font1);
  position: relative;
}

.product-inf__percent circle {
  transform: rotate(180deg) scaleY(-1);
  transform-origin: 50%;
}

.product-inf__percent-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.product-inf__title {
  font-family: var(--font1);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 18px;
}

.product-img {
  position: absolute;
  z-index: 2;
  width: 500px;
  left: 25%;
  transform: translateX(-45%);
  max-height: 500px;
  height: 100%;
  pointer-events: none;
}

.product-img__item {
  display: flex;
  align-items: center;
  position: absolute;
  pointer-events: none;
  user-select: none;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(-130px);
  opacity: 0;
  transition: all 0.3s;
}

.product-img__item.active {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0.3s;
}

.product-img__item img {
  object-fit: contain;
  object-position: center right;
}

/* //////////////////////////////////////////////////////////////
                      [Slider part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Banner part css start]
////////////////////////////////////////////////////////////// */
#banner-poster {
  padding: 133px 0 219px 0;
}

#banner-poster2 {
  padding: 100px 0;
}

.banner-item {
  margin: 0 auto;
  padding-bottom: 30px;
}

.banner-blog {
  display: block;
  position: relative;
}

.banner-blog.product-hot {
  position: relative;
}

.banner-blog.product-hot::after {
  font: var(--fa-font-solid);
  content: "\f0a3";
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 70px;
  color: #ff6000;
  width: 70px;
  height: 70px;
  z-index: 1;
  font-weight: 900;
}


.banner-blog.product-hot::before {
  position: absolute;
  content: "Hot";
  top: 5px;
  right: 5px;
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transform: rotate(10deg);
  width: 70px;
  height: 70px;
  align-items: center;
  display: flex;
  justify-content: center;
  font-family: var(--font1);
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  z-index: 2;
}

.banner-info {
  color: #fff;
  font-family: var(--font2);
  font-weight: 500;
  font-style: 14px;
  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-bottom: 8px;
}

.banner-name {
  color: #fff;
  font-weight: 700;
  font-family: var(--font2);
  font-size: 28px;
  line-height: 1.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;
  padding-bottom: 8px;
}

.banner-txt {
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.11);
  width: 100%;
  height: 100%;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: flex-start;
  padding: 34px 38px;
  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: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

.banner-txt-child1 {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-align-items: flex-start;
  align-items: flex-start;
}

.banner-txt-child2 {
  border-bottom: 2px solid #fff;
  overflow: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  padding-bottom: 4px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.banner-link {
  -webkit-transform: translateY(250%);
  -moz-transform: translateY(250%);
  -ms-transform: translateY(250%);
  -o-transform: translateY(250%);
  transform: translateY(250%);
  font-weight: 700;
  color: #fff;
  transition: all linear .6s;
  -webkit-transition: all linear .6s;
  -moz-transition: all linear .6s;
  -ms-transition: all linear .6s;
  -o-transition: all linear .6s;
  font-size: 15px;
  line-height: 1.466667;
  text-transform: uppercase;
}

.banner-link:hover {
  color: var(--brand2);
}

.banner-txt:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.banner-txt:hover .banner-txt-child2 {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

.banner-txt:hover .banner-link {
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  -o-transform: translateY(0%);
  transform: translateY(0%);
}

/* //////////////////////////////////////////////////////////////
                      [Banner part css end]
////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////
                      [Product part css start]
////////////////////////////////////////////////////////////// */
#products {
  padding: 100px 0;
}

.product-menu {
  padding-bottom: 52px;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
}

.filter-tope-group {
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  margin: 10px 0;
}

.nav-pills .nav-link {
  color: #000;
  border-radius: 23px;
  background: #ddd;
  margin: 0 8px;
  border: 1px solid var(--brand);
}

.nav-pills .nav-link:hover {
  color: #ffffff;
  background: var(--brand);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: var(--brand);
  border-radius: 23px;
}


.filter {
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  margin: 10px 0;
}

.filter-item {
  color: #fff;
  background: var(--brand);
  font-size: 15px;
  line-height: 1.2;
  min-width: 94px;
  height: 40px;
  border-radius: 23px;
  cursor: pointer;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  margin: 4px 8px 4px 0;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  display: flex;
}

.filter-item:hover {
  border-color: #fff;
  background-color: var(--brand2);
  color: #fff;
}

.filter-item .icon-filter,
.filter-item .icon-search {
  margin-right: 6px;
  font-size: 15px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  color: #fff;
}

.filter-item .icon-close-search,
.filter-item .icon-close-filter {
  display: none;
  margin-right: 6px;
  font-size: 15px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  color: #fff;
}

.filter-item:hover i {
  color: #fff;
}

.icon-close::before {
  font: var(--fa-font-solid);
  content: "\f00d";
}

.show-search .icon-search,
.show-filter .icon-filter {
  display: none;
}

.show-search .icon-close-search,
.show-filter .icon-close-filter {
  display: unset;
}

.show-search,
.show-filter {
  background-color: var(--brand);
  border-color: var(--brand);
  position: relative;
}

.show-search::after,
.show-filter::after {
  content: "";
  position: absolute;
  display: block;
  width: 14px;
  height: 14px;
  background-color: var(--brand);
  border-left: 1px solid var(--brand);
  border-bottom: 1px solid var(--brand);
  transform-origin: center center;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: calc(50% - 7px);
  bottom: -7px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.show-search:hover::after,
.show-filter:hover::after {
  background-color: var(--brand2);
}

.panel-filter,
.panel-search {
  padding: 10px 0;
  display: none;
}

.panel-search .panel-search-body {
  border: 1px solid var(--brand);
  border-radius: 2px;
  padding: 0 15px;
  background: #fff;
}

.panel-search .panel-search-body button {
  width: 38px;
  height: 60px;
  background: #fff;
  font-size: 16px;
  color: var(--brand);
  justify-content: center;
  -ms-align-items: center;
  align-items: 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;
}

.panel-search .panel-search-body button:hover {
  color: var(--brand2);
}

.panel-search .panel-search-body input {
  background: #fff;
  font-size: 16px;
  line-height: 1.625;
  color: #000;
  width: calc(100% - 38px);
  height: 60px;
  padding-right: 15px;
}

.panel-search .panel-search-body input::-webkit-input-placeholder,
.panel-search .panel-search-body input:-moz-placeholder,
.panel-search .panel-search-body input::-moz-placeholder,
.panel-search .panel-search-body input:-ms-input-placeholder {
  color: #333;
}


.panel-filter .wrap-filter {
  background-color: rgba(156, 192, 38, 0.2);
  padding: 27px 40px 0 40px;
}


.filter-col1 {
  width: 27%;
  padding-right: 15px;
  padding-bottom: 15px;
  color: var(--brand);
}

.filter-col2 {
  width: 27%;
  padding-right: 15px;
  padding-bottom: 15px;
  color: var(--brand);
}

.filter-col3 {
  width: 26%;
  padding-right: 15px;
  padding-bottom: 15px;
  color: var(--brand);
}

.filter-col3 ul li span {
  font-size: 15px;
  margin-right: 6px;
  line-height: 1.2;
}

.filter-col3 ul li span.black {
  color: #000;
}

.filter-col3 ul li span.blue {
  color: #4272d7;
}

.filter-col3 ul li span.grey {
  color: #b3b3b3;
}

.filter-col3 ul li span.green {
  color: #00ad5f;
}

.filter-col3 ul li span.red {
  color: #fa4251;
}

.filter-col3 ul li span.white {
  color: #ffffff;
}

.filter-col4 {
  width: 20%;
  padding-bottom: 15px;
  color: var(--brand);
}

.filter-col4 .filter-col4-item {
  padding-top: 4px;
  margin-right: -5px;
}

.filter-col4 .filter-col4-item a {
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  display: flex;
  font-size: 13px;
  line-height: 1.923;
  background: #fff;
  color: #888;
  min-height: 30px;
  border: 1px solid var(--brand);
  border-radius: 15px;
  padding: 0 15px;
  margin: 0 5px 5px 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;
}

.filter-col4 .filter-col4-item a:hover {
  background: var(--brand);
  color: #fff;
}

.filter-title {
  color: var(--brand);
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: 15px;
  font-weight: 700;
}

.filter-col1 ul li,
.filter-col2 ul li,
.filter-col3 ul li {
  padding-bottom: 6px;
}

.filter-col1 ul li a,
.filter-col2 ul li a,
.filter-col3 ul li a {
  font-size: 15px;
  line-height: 1.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;
}

.filter-link {
  color: #000000;
  border-bottom: 1px solid transparent;
}

.filter-link:hover {
  color: var(--brand2);
  border-bottom: 1px solid var(--brand2);
}

.filter-link-active {
  color: var(--brand2);
  border-bottom: 1px solid var(--brand2);
}

.item {
  position: relative;
  font-size: 15px;
  display: inline-block;
  width: calc(100% / 4);
  padding: 10px;
  text-align: left;
}

.item-block {
  padding: 15px;
  background: #fff;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  border: 1px solid #ddd;
}

/* .item-block:hover {
  box-shadow: 0px 0px 4px 2px var(--brand2);
} */

.item-block-pic {
  position: relative;
  display: block;
  overflow: hidden;
}

.item-block-pic img {
  width: 100%;
  -webkit-transition: transform 0.9s ease;
  -o-transition: transform 0.9s ease;
  -moz-transition: transform 0.9s ease;
  transition: transform 0.9s ease;
}

.item-block-pic:hover img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}


.item-block-txt {
  -ms-align-items: flex-start;
  align-items: flex-start;
  padding-top: 14px;
}

.item-block-btn {
  position: absolute;
  bottom: -50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  font-size: 15px;
  line-height: 1.466667;
  color: #fff;
  border: 2px dotted var(--brand);
  min-width: 139px;
  height: 40px;
  border-radius: 20px;
  background: var(--brand);
  padding: 0 15px;
  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: flex;
  font-weight: 500;
  font-size: 16px;
  font-family: var(--font2);
}

.item-block-btn:hover {
  border-color: #5faf21;
  background-color: #5faf21;
  color: #fff;
}

.item-block-btn:hover i {
  color: #fff;
}

.item-block:hover .item-block-btn {
  bottom: 20px;
}

.discount {
  position: relative;
}

.discount::after {
  position: absolute;
  content: attr(data-discount);
  top: 5px;
  right: 5px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transform: rotate(10deg);
  width: 50px;
  height: 50px;
  align-items: center;
  display: flex;
  justify-content: center;
  font-family: var(--font1);
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  z-index: 2;
}

.fa-certificate {
  position: relative;
}

.fa-certificate::before {
  position: absolute;
  content: "";
  top: 5px;
  right: 5px;
  font-size: 50px;
  color: #ff6000;
  width: 50px;
  height: 50px;
  z-index: 1;
  font-weight: 900;

}

.New {
  position: relative;
}

.New:after {
  position: absolute;
  content: "New";
  top: 5px;
  left: 5px;
  font-size: 15px;
  font-weight: 800;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transform: rotate(10deg);
  width: 50px;
  height: 50px;
  align-items: center;
  display: flex;
  justify-content: center;
  font-family: var(--font1);
  border: 2px solid #fff;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}

.item-block .item-block-pic .img-2 {
  display: none;
}

.item-block .item-block-pic .img-1 {
  display: block;
}

.item-block:hover .item-block-pic .img-1 {
  display: none;
}

.item-block:hover .item-block-pic .img-2 {
  display: block;
}

.item-block-txt-child1 {
  width: calc(100% - 30px);
  -ms-align-items: flex-start;
  align-items: flex-start;
}

.item-block-txt-child1 span {
  color: #f85606;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.466667;
  letter-spacing: 1px;
  display: block;
}

.item-block-txt-child1 .discount-price del {
  color: #9e9e9e;
  font-size: 14px;
}

.item-block-txt-child1 .discount-price p {
  color: #9e9e9e;
  font-size: 14px;
}

.item-block-txt-child1 a {
  font-size: 14px;
  line-height: 1.466667;
  color: #000;
  font-weight: 600;
  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-bottom: 6px;
}

.item-block-txt-child1:hover a {
  color: var(--brand2);
}

.item-block-txt .item-block-txt:hover {
  color: var(--brand2);
}

.product_fav {
  background: transparent;
  border: none;
  position: relative;
  outline: none;
  cursor: pointer;
  padding: 15px;
}

.product_fav:focus {
  outline: none;
}

.product_fav .heart {
  display: block;
  position: absolute;
  left: 15px;
  transform: translate(-50%, -50%) scale(0.7);
  top: 50%;
  pointer-events: none;
  width: 100px;
  height: 100px;
  background: url(../images/icons/heart.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
  transition: background-position 1s steps(28);
  transition-duration: 0s;
}

.product_fav .heart.is-active {
  transition-duration: 1s;
  background-position: -2800px 0;
}

.product-banner {
  padding-bottom: 34px;
}

.load_more {
  width: 100%;
  padding-top: 45px;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}

.load_more a {
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  color: #fff;
  display: flex;
  background: var(--brand);
  border-radius: 23px;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  -ms-border-radius: 23px;
  -o-border-radius: 23px;
  padding: 0 15px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  min-width: 179px;
  height: 46px;
}

.load_more a:hover {
  background: var(--brand2);
}

.star {
  color: #faca51;
  font-size: 17px;
  margin: 12px 0 0 0;
}

.star span {
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0px;
}

/* //////////////////////////////////////////////////////////////
                      [Product part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Services part css start]
////////////////////////////////////////////////////////////// */
#services {
  padding: 50px 0;
  background: #fff;
}

#services .content-block {
  background: var(--brand);
  border-radius: 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;
  color: #fff;
  position: relative;
  margin-bottom: 25px;
}


#services .content-block:hover {
  border-color: #5faf21;
  background-color: #5faf21;
  color: #fff;
}

#services .content-block i {
  font-size: 60px;
}

#services .content-block h2 {
  font-size: 20px;
  line-height: 1.3846;
  padding-bottom: 4px;
  padding-top: 15px;
  font-weight: 800;
}

#services .content-block:hover i {
  color: #fff;
}

/* //////////////////////////////////////////////////////////////
                      [Services part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [shopping Cart part css start]
////////////////////////////////////////////////////////////// */
#shopping_cart {
  padding: 50px 0;
}

.shopping_cart_left {
  background-color: #e3e5d9;
  border: 2px solid var(--brand);
}

.shopping_cart_right {
  background-color: #e3e5d9;
  border: 2px solid var(--brand);
  height: 100%;
}

.shopping_cart_right select option:hover {
  background: #000 !important;
}

.shopping_cart_right_subtotal {
  background-color: #e3e5d9;
  padding: 23px 40px;
}

.shopping_cart_right_subtotal .Shipping span {
  font-size: 15px;
  color: var(--brand2);
}

.shopping_cart_right_subtotal .Shipping {
  display: flex;
  padding-top: 13px;
}

.shopping_cart_right_subtotal .Shipping p {
  font-size: 14px;
  padding: 0 0 0 27px;
}

.shopping_cart_right_title h4 {
  background: var(--brand);
  color: #fff;
  padding: 15px 0 15px 50px;
  font-size: 15px;
  text-transform: uppercase;
  line-height: 1.6;
  font-weight: 700;

}

.table-shopping-cart .table_head th {
  font-size: 15px;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1.6;
  padding-top: 15px;
  padding-bottom: 15px;
}

.table-shopping-cart .column-1 {
  width: 133px;
  padding-left: 50px;
}

.table-shopping-cart .column-2 {
  width: 220px;
  font-size: 14px;
}

.table-shopping-cart .column-3 {
  width: 120px;
  font-size: 16px;
}

.table-shopping-cart .column-4 {
  width: 145px;
  text-align: right;
}

.table-shopping-cart .column-5 {
  width: 172px;
  padding-right: 50px;
  text-align: right;
  font-size: 16px;
}

.table-shopping-cart tr {
  border-top: 1px solid var(--brand);
  border-bottom: 1px solid var(--brand);
}

.table_head {
  background: var(--brand);
}

.table-shopping-cart .table_row {
  height: 141px;
}

.table-shopping-cart td {
  color: #000000;
  line-height: 1.6;
}

.wrap-num-product {
  width: 140px;
  height: 45px;
  border: 1px solid var(--brand);
  border-radius: 3px;
  overflow: hidden;
  flex-wrap: wrap;
  display: flex;
}

.btn-num-product-up,
.btn-num-product-down {
  width: 45px;
  height: 100%;
  cursor: pointer;
}

.num-product {
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: #000;
}

.coupon_add {
  background: var(--brand);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  padding: 15px 40px;
}

.coupon {
  display: flex;
  flex-wrap: wrap;
  margin-right: 5px 20px 5px 0;
  align-items: center;
}

.coupon input {
  border-radius: 22px;
  width: 220px;
  height: 45px;
  padding-right: 20px;
  padding-left: 20px;
  color: #000;
}

.coupon_button button {
  background: #fff;
  border-radius: 22px;
  min-width: 163px;
  height: 45px;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  color: var(--brand);
  font-size: 15px;
  line-height: 1.466667;
  text-transform: uppercase;
  min-width: 163px;
  height: 45px;
  margin: 0 5px;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  display: flex;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.coupon_button button:hover {
  background: var(--brand2);
  color: #fff;
}

.update_cart button {
  background: #fff;
  border-radius: 22px;
  min-width: 163px;
  height: 45px;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  color: var(--brand);
  font-size: 15px;
  line-height: 1.466667;
  text-transform: uppercase;
  min-width: 163px;
  height: 45px;
  margin: 0 5px;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  display: flex;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.update_cart button:hover {
  background: var(--brand2);
  color: #fff;
}

.subtotal {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px dashed var(--brand);
}

.subtotal span {
  font-size: 15px;
  padding-bottom: 13px;
  width: 34.5%;
  text-align: initial;
}

.subtotal span:first-child {
  color: var(--brand2);
}

.shipping_calculate {
  padding-top: 15px;
}

.shipping_calculate .select2-selection {
  margin-bottom: 12px;
}

.shipping_calculate input {
  font-size: 13px;
  width: 100%;
  height: 40px;
  padding: 0 15px;
  margin-bottom: 12px;
  border: 1px solid var(--brand);
}

.shipping_calculate button {
  background: var(--brand);
  border-radius: 22px;
  color: #fff;
  font-size: 15px;
  line-height: 1.466667;
  text-transform: uppercase;
  min-width: 163px;
  height: 37px;
  margin: 0 5px;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  display: flex;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.shipping_calculate button:hover {
  background: var(--brand2);
}

.checkout {
  background: var(--brand);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  padding: 15px 40px;
}

.checkout span {
  color: #fff;
}

.checkout button {
  background: #fff;
  border-radius: 22px;
  color: var(--brand);
  font-size: 15px;
  line-height: 1.466667;
  text-transform: uppercase;
  min-width: 163px;
  height: 37px;
  margin: 0 5px;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  display: flex;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.checkout button:hover {
  background: var(--brand2);
  color: #fff;
}

/* //////////////////////////////////////////////////////////////
                      [shopping Cart part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Product Detail part css start]
////////////////////////////////////////////////////////////// */
#product-detail {
  padding-top: 60px;
  padding-bottom: 20px;
}

#product-detail .nav-pills .nav-link {
  color: #000;
  border-radius: 0;
  background: transparent;
  margin: 0 8px;
  border: 0;
}

#product-detail .nav-pills .nav-link.active {
  color: var(--brand2);
  border-radius: 0;
  background: transparent;
  margin: 0 8px;
  border-bottom: 2px solid var(--brand2);
}

#product-detail .tab-pane {
  padding: 0 50px;
}

#product-detail .cart-main-body {
  background: transparent;
}

.product-detail-nav {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

#product-detail .tab-content {
  border: 1px solid #bfbfbf;
  background: #fff;
}

.description h3,
.ingredients h3,
.safety-instructions h3,
.benefits-and-side-effects h3,
.Shipping h3,
.reviews_ratings h3,
.review-form h3,
.returns-policy h3 {
  color: var(--brand2);
  margin-bottom: 20px;
  font-family: var(--font1);
}

.description,
.safety-instructions,
.benefits-and-side-effects,
.ingredients,
.Shipping,
.returns-policy,
.reviews_ratings,
.review-form {
  padding-top: 50px;
}

.safety-instructions,
.returns-policy,
.Shipping {
  padding-bottom: 50px;
}

.review {
  border: 1px solid transparent;
  border-radius: 5px;
  color: #777;
  display: flex;
  font-size: 18px;
  align-items: center;
  padding: 10px;
  margin: 5px 0;
}

.review i {
  color: #e2bb52;
}


.progress {
  background-color: rgba(100, 100, 100, 0.3);
  border-radius: 5px;
  position: relative;
  margin: 0 10px;
  height: 10px;
  width: 440px;
}

.progress-done {
  background: linear-gradient(to left, var(--brand), var(--brand2));
  box-shadow: 0 3px 3px -5px var(--brand), 0 2px 5px var(--brand2);
  border-radius: 5px;
  height: 10px;
  width: 0;
  transition: width 1s ease 0.3s;
}

.reviews_ratings {
  text-align: center;
}

.reviews_ratings h2 i {
  color: #e2bb52;
}

.reviews_ratings h2 {
  font-size: 50px;
  font-weight: 800;
  font-family: var(--font2);
  color: #000;
}

.reviews_ratings h3 i {
  color: #e2bb52;
}

.review-star {
  align-items: center;
  margin-bottom: 10px;
}

.review-star h6 {
  font-weight: 600;
}

.review-form .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(156, 192, 38, 0.5);
}

.review-form .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(156, 192, 38, 0.5);
}

.review-form .form-control {
  background: #fff;
  color: #000;
}

.review-form .form-floating>.form-control:not(:-moz-placeholder-shown)~label::after {
  background: var(--brand);
}

.review-form .form-floating>.form-control-plaintext~label::after,
.review-form .form-floating>.form-control:focus~label::after,
.review-form .form-floating>.form-control:not(:placeholder-shown)~label::after,
.review-form .form-floating>.form-select~label::after {
  background: var(--brand);
}

.review-form .form-control {
  border: 1px solid #000;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

.review-form .form-check-input {
  border-color: var(--brand2) !important;
}

.review-form .form-check-input:checked {
  background-color: var(--brand);
}

.review-form button {
  color: #fff;
  background: var(--brand);
  padding: 0 15px;
  min-width: 161px;
  height: 46px;
  margin-top: 17px;
  margin-bottom: 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;
}

.review-form button:hover {
  background: var(--brand2);
}

.review-comments .tab-content {
  border: none !important;
}

.review-comments {
  margin-top: 20px;
}

.comment-star {
  margin-left: 5px;
}

.comment-star i {
  color: #e2bb52;
}


/* //////////////////////////////////////////////////////////////
                      [Product Detail part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Blog part css start]
////////////////////////////////////////////////////////////// */
#blog {
  padding: 100px 0 50px 0;
}

.blog-item-info {
  padding-bottom: 40px;
}

.blog-item {
  background: #f2f2f2;
  box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.2);
}

.blog-img {
  display: block;
  overflow: hidden;
}

.blog-img img {
  width: 100%;
  -webkit-transition: transform 0.9s ease;
  -o-transition: transform 0.9s ease;
  -moz-transition: transform 0.9s ease;
  transition: transform 0.9s ease;
}

.blog-img:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

.blog-text {
  font-size: 13px;
  line-height: 1.923;
  padding-top: 15px;
  padding-bottom: 14px;
}

.blog-text span {
  color: #000;
}

.blog-text h4 {
  padding-bottom: 12px;
}

.blog-text p {
  color: #000;
  font-size: 14px;
  line-height: 1.7143;
}

.blog-text h4 a {
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.333333;
  color: #000;
}

.blog-text h4 a:hover {
  color: var(--brand);
}

/* //////////////////////////////////////////////////////////////
                      [Blog part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Blog main page part css start]
////////////////////////////////////////////////////////////// */
#blog-page {
  padding: 50px 0;
}

.blog-row {
  margin-top: 30px;
}

.item-blog {
  position: relative;
}

.blog-date {
  position: absolute;
  right: 6px;
  top: 6px;
  background: var(--brand2);
  padding: 8px 24px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.blog-date i {
  font-size: 22px;
}

.blog-content {
  padding: 15px 0;
}

.blog-content h4 {
  padding-bottom: 15px;
  padding-top: 15px;
}

.blog-content h4 a {
  color: #000;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  font-weight: 700;
}

.blog-content p {
  font-size: 15px;
}

.blog-content h4 a:hover {
  color: var(--brand2);
}

.published-col {
  display: flex;
  align-items: center;
}

.published-col i {
  font-size: 14px;
  margin-right: 2px;
  color: var(--brand);
}

.published-col h5 {
  font-size: 13px;
}

.published span {
  margin: 0 5px;
  font-weight: 600;
  font-size: 13px;
}

.published-col.tag {
  font-size: 13px;
}

.published-col.tag a {
  color: #000;
}

.continue-reading {
  font-size: 15px;
  color: var(--brand2);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  margin-top: 3px;
}

.continue-reading:hover {
  color: #000;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.pagination ul li button {
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

.accordion-button:not(.collapsed) {
  color: #fff;
  background-color: var(--brand);
}

.blog-title {
  border-left: 5px solid var(--brand);
  margin-bottom: 16px;
  background: #e3e5d9;
  color: var(--brand2);
  padding: 6px 14px;
  font-family: var(--font2);
}

.blog-title h3 {
  font-size: 21px;
}

.blog-title i {
  margin-right: 5px;
}

.accordion-item {
  border: none;
  font-family: var(--font2);
  margin-bottom: 4px;
}

.accordion-body {
  color: #000;
  background: #e3e5d9;
}

.accordion-body ul li a {
  padding: 10px 7px;
}

.accordion-body ul li:hover {
  background: var(--brand);
}

.accordion-body ul li a {
  font-size: 14px;
  color: #000;
}

.accordion-body ul li:hover a {
  color: #fff;
}

.accordion-button:not(.collapsed) {
  box-shadow: 0px 3px 4px 0px #450e8b;
}

.accordion {
  --bs-accordion-bg: none;
}

.accordion-button {
  color: #fff;
  background-color: var(--brand2);
}

.accordion-button::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: none;
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\2b";
}

.accordion-button:not(.collapsed)::after {
  background-image: none;
}

.accordion-button:not(.collapsed)::after {
  transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  content: "\f068";
}

.accordion-button:focus {
  z-index: 3;
  border-color: none;
  outline: 0;
  box-shadow: none;
}

.recent_article {
  margin-top: 55px;
}

.recent_article_col {
  display: grid;
  grid-template-columns: auto 2fr;
  align-items: center;
  gap: 15px;
  margin: 0 0 20px;
  padding: 0;
}

.recent_article_img {
  width: 100px;
  height: 100px;
}

.recent_article_text a h5 {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.recent_article_text a h5:hover {
  color: var(--brand);
}

.recent_article_text p {
  font-size: 12px;
}

.blog_tag ul {
  display: flex;
  flex-wrap: wrap;
}

.blog_tag ul li {
  margin-right: 5px;
  margin-bottom: 5px;
}

.blog_tag ul li a {
  padding: 5px 10px;
  background: #e3e5d9;
  color: #000000;
  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_tag ul li a:hover {
  background: var(--brand2);
  color: #fff;
}

.blog_single .blog_single_list {
  padding: 12px;
}

/* //////////////////////////////////////////////////////////////
                      [Blog main page part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Subscribe modal part css start]
////////////////////////////////////////////////////////////// */
#subscribe-modal.modal {
  top: 90px;
}

.modal-newsletter form {
  background: rgba(255, 255, 255, 0.6);
}

.modal-newsletter {
  color: #999;
  font-size: 15px;
  min-width: 1000px;
}

.modal-newsletter .modal-header {
  padding: 29px 0;
}

.modal-content .modal-body h1 {
  color: var(--brand);
  font-family: var(--font1);
}

.modal-content .modal-body p {
  font-size: 12px;
  text-transform: capitalize;
}

.modal-content .modal-body p span {
  color: #ff6000;
  font-weight: 600;
}

.modal-content {
  background: #dfe2e6;
}

.modal-newsletter .modal-content {
  padding: 112px 34px 112px 515px;
  border-radius: 0;
  border: none;
  height: 500px;
  border-radius: 20px 0 20px 20px;
}

.modal-newsletter .modal-header {
  border-bottom: none;
  position: relative;
  text-align: center;
  border-radius: 5px 5px 0 0;
}

.modal-newsletter .modal-header .btn-close {
  position: absolute;
  right: -48px;
  top: -126px;
  --bs-btn-close-bg: none !important;
  font-size: 26px;
  background: #ff6000;
  text-align: center;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  opacity: 1;
}

.modal-newsletter .modal-header .btn-close:focus {
  box-shadow: none;
}

.modal-newsletter h4 {
  color: #000;
  text-align: center;
  font-size: 30px;
  margin: 0 0 25px;
  font-weight: bold;
  text-transform: capitalize;
}

.modal-newsletter .close {
  background: #c0c3c8;

  position: absolute;
  top: 0;
  right: 0;
  color: black;
  text-shadow: none;
  opacity: 0.5;
  width: 30px;
  height: 30px;
  border-radius: 20px;
  font-size: 19px;
  text-align: center;
  padding: 0;
}

.modal-newsletter .close span {
  position: relative;
  top: -1px;
}

.modal-newsletter .close:hover {
  opacity: 0.8;
}

.modal-newsletter .form-control,
.modal-newsletter .btn {
  min-height: 46px;
  border-radius: 3px;
}

.modal-newsletter .form-control {
  box-shadow: none;
  border-color: #dbdbdb;
  min-width: 150px;
}

.modal-newsletter .btn {
  color: #fff;
  border-radius: 4px;
  background: rgb(73, 80, 87);
  text-decoration: none;
  transition: all 0.4s;
  line-height: normal;
  padding: 6px 20px;
  min-width: 150px;
  border: none;
}

.modal-newsletter .btn:hover,
.modal-newsletter .btn:focus {
  background: #6f7882;
  outline: none;
}

.modal-newsletter .input-group {
  margin: 30px 0 15px;
}


/* //////////////////////////////////////////////////////////////
                      [Subscribe modal part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Subscribe part css start]
////////////////////////////////////////////////////////////// */
.newsletter {
  padding: 50px 10px 60px 10px !important;
  margin-bottom: 50px;
  color: #fff;
  background: var(--brand2);
  position: relative;
}

.newsletter h1 {
  font-weight: 600;
  font-size: 40px;
}

.newsletter p {
  font-size: 22px;
}

.newsletter form {
  margin-top: 20px;
  z-index: 2;
  position: relative;
}

.newsletter form input {
  width: 100%;
  padding: 18px;
  border: none;
}

.newsletter form input[type="email"] {
  border-radius: 10px 0px 0px 10px;
}

.newsletter form input[type="email"]:focus {
  border: none;
  outline: none;
}

.newsletter form button {
  border-radius: 0px 10px 10px 0px;
  background-color: var(--brand);
  color: #fff;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  height: 100%;
  width: 100%;
}

.newsletter form button:hover {
  background-color: #ff6000;
  color: #fff;
}

/* //////////////////////////////////////////////////////////////
                      [Subscribe part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Gallery part css start]
////////////////////////////////////////////////////////////// */
#gallery {
  padding: 50px 0;
}

/*Carousel Gallery*/
.carousel-gallery {
  overflow: hidden;
}

.carousel-gallery .swiper-slide a {
  display: block;
  width: 100%;
  height: 500px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
}

.carousel-gallery .swiper-slide a:hover .image .overlay {
  opacity: 1;
}

.carousel-gallery .swiper-slide a .image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}

.carousel-gallery .swiper-slide a .image .overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(180, 125, 82, 0.5);
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.carousel-gallery .swiper-slide a .image .overlay em {
  color: #fff;
  font-size: 26px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
}

.carousel-gallery .swiper-pagination {
  position: relative;
  bottom: auto;
  text-align: center;
  margin-top: 25px;
}

.carousel-gallery .swiper-pagination .swiper-pagination-bullet {
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.carousel-gallery .swiper-pagination .swiper-pagination-bullet:hover {
  opacity: 0.7;
}

.carousel-gallery .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--brand);
  transform: scale(1.1, 1.1);
}

.swiper-container {
  position: relative;
}

.swiper-container .slider__prev {
  left: 0;
  top: 46%;
}

.swiper-container .slider__next {
  right: 0;
  top: 46%;
}

.swiper-container .slider__prev,
.swiper-container .slider__next {
  position: absolute;
  z-index: 2;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.5);
  width: 35px;
  font-size: 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;
}

.swiper-container .slider__prev:hover,
.swiper-container .slider__next:hover {
  background: #fff;
}

.swiper-slide {
  position: relative;
}

.gallery-overlay {
  position: absolute;
  bottom: 50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  justify-content: center;
  align-items: center;
  width: 230px;
  height: 40px;
  background: #fff;
  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: flex;
}

.gallery-overlay h4 {
  font-weight: 800;
  font-family: var(--font1);
  font-size: 15px;
  color: #000;
}


/* //////////////////////////////////////////////////////////////
                      [Gallery part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [About part css start]
////////////////////////////////////////////////////////////// */
#about {
  padding: 100px 0;
}


.about-right-content p {
  font-size: 16px;
  margin-top: 20px;
}

.about-right-content p i {
  color: var(--brand);
  margin: 0 3px;
}

.about-right-content .signature {
  text-align: end;
}

.about-right-content .signature img {
  max-width: 225px;
}

/* //////////////////////////////////////////////////////////////
                      [About part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Team part css start]
////////////////////////////////////////////////////////////// */
#team {
  padding: 100px 0;
}

/*  Team Starts */
.team-members {
  transform: rotate(-45deg);
}

.team-members li>div {
  float: left;
  width: 20%;
}

.team-members li:nth-child(2)>div:first-child {
  margin-left: 20%;
}

.team-members li:last-child>div:first-child {
  margin-left: 40%;
}

.member-details>div {
  background-color: #ddd;
  margin: 5px;
}

.member-details img {
  transform: rotate(45deg) translate(0, 15px) scale(1.2);
  display: block;
  width: 100%;
  height: 100%;
}

/* hover content - style */
.member-details>div {
  position: relative;
  overflow: hidden;
}

.member-info {
  position: absolute;
  top: 50%;
  transform: rotate(45deg) translate(-12px, 15px);
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
}

.member-info h3,
.member-info p {
  margin: 0;
  color: #fff;
  position: relative;
  opacity: 0;
  visibility: hidden;
}

.member-info h3 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  top: -100px;
}

.member-info p {
  font-weight: 300;
  font-size: 12px;
  bottom: -150px;
}

.member-details>div:after {
  content: '';
  background-image: linear-gradient(45deg, rgba(156, 192, 38, 0.7) 50%, transparent 50%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

/* hover content - onhover */
.member-details *,
.member-details>div:after {
  cursor: pointer;
  transition: all .4s ease;
}

.member-details:hover *,
.member-details:hover>div:after {
  opacity: 1;
  visibility: visible;
}

.member-details:hover .member-info h3 {
  top: 0;
}

.member-details:hover .member-info p {
  bottom: 0;
}

/* Team overview */
.team-overview {
  padding-right: 15px;
}

/* For centering elements - optional - Can use table,tablecell instead */
.team-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.team-row>div:first-child {
  order: 2;
}

/* //////////////////////////////////////////////////////////////
                      [Team part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [specification part css start]
////////////////////////////////////////////////////////////// */
#specification {
  padding: 100px 0;
  background: #fff;
}

.specification {
  margin-top: 55px;
}

.specification-info-col {
  display: flex;
  margin-top: 60px;
}

.specification-info-col img {
  width: 80px;
  height: 80px;
  margin: auto 0;
}

.specification-detail {
  margin-left: 5px;
}

.specification-detail h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 2px;
}

.specification-detail p {
  font-size: 16px;
  font-weight: 500;
}

/* //////////////////////////////////////////////////////////////
                      [specification part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [User Profile part css start]
////////////////////////////////////////////////////////////// */

.user-details {
  background: #ffffff;
  position: relative;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 25px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
  -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
  display: block;
  margin: 0 auto;
  border-radius: 10px;
}

.user-card {
  width: 100%;
}

.user-card img {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.user-card .card-body h3 {
  margin: 12px 0;
  font-weight: 500;
}

.user-card .card-body h3 span {
  color: var(--brand);
  margin-right: 10px;
}

.user-card .card-body .about-user {
  background: #ddd;
  padding: 13px 5px 35px 5px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.user-card .card-body .about-user span {
  color: var(--brand);
  font-size: 15px;
  border-bottom: 2px dashed #2f3444;
  margin-bottom: 22px;
  display: block;
  padding: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 0;
}

.user-details .personal-details h3 {
  border-bottom: 2px dashed #b9bbbe;
  padding: 0px 0 10px 0;
}

.personal-details-more a {
  color: #000;
}

.personal-details .user-edit {
  position: relative;
  right: 0;
  top: 0;
  color: #ff6000;
  text-align: end;
  display: block;
}

.user-edit {
  position: absolute;
  right: 25px;
  top: 25px;
  color: #ff6000;
}

.personal-details .membership {
  background: #ff6000;
  padding: 7px 20px;
  border-radius: 15px;
  color: #fff;
  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: inline-block;
}

.personal-details .membership:hover {
  background: #ddd;
  color: #ff6000;
}

.personal-details span {
  font-size: 13px;
  display: inline-block;
  margin-bottom: 10px;
}

.personal-details span.red-dot {
  color: #ff6000;
}

.personal-details-more {
  margin-top: 30px;
}

/* //////////////////////////////////////////////////////////////
                      [User Profile part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Tesimonial part css start]
////////////////////////////////////////////////////////////// */

#testimonial {
  padding: 100px 0;
  background: #fff;
}

#testimonial .swiper-container {
  padding-bottom: 50px;
  overflow: hidden;
  padding-top: 50px;
}

.testimonial__box {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 0 60px;
}

.testimonial__star {
  margin-bottom: 10px;
}

.testimonial__star i {
  color: #f0ad4e;
}

.testimonial__heading {
  margin-bottom: 20px;
}

.testimonial__heading h3 {
  font-size: 36px;
}

.testimonial__quote-icon {
  margin-bottom: 30px;
}

.testimonial__quote-icon i {
  font-size: 26px;
}

.testimonial__desc {
  margin-bottom: 30px;
}

.testimonial__user-image {
  margin-bottom: 10px;
}

.testimonial__user-image img {
  border-radius: 100%;
}

.testimonial__user-name h6 {
  font-size: 18px;
}

#testimonial .swiper-button-prev,
#testimonial .swiper-button-next {
  color: var(--brand);
}

#testimonial .swiper-pagination-bullet-active {
  background-color: var(--brand);
}

/* //////////////////////////////////////////////////////////////
                      [Tesimonial part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Footer part css start]
////////////////////////////////////////////////////////////// */

.footer-row {
  padding: 48px 48px 0 48px;
  background: var(--brand2);
}

.footer-logo {
  padding-bottom: 50px;
}

.footer-logo a {
  padding-bottom: 30px;
}

.footer-logo p {
  color: #fff;
  font-size: 13px;
  line-height: 1.923;
}

.footer-content h4 {
  position: relative;
  color: #fff;
  font-weight: 700;
  padding-bottom: 10px;
  font-size: 15px;
  line-height: 1.6;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.footer-content h4::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  background: #fff;
  width: 140px;
  height: 2px;
}

.footer-content.app h4::after {
  display: none;
}

.footer-content.app h4 {
  border: none;
}

.footer-content.app {
  padding: 40px 0;
}


.footer-content a {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.923;
}

.footer-bottom-menu {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding-top: 13px;
  padding-bottom: 10px;
}

.footer-down-content {
  margin: 4px 0;
}

.footer-down-content ul li {
  /* border-right: 1px solid #fff; */
  padding-right: 14px;
}

.footer-down-content ul li:last-child {
  border: none;
  padding-right: 14px;
}

.footer-down-content ul li a {
  font-weight: 700;
  color: #fff;
  margin-left: 10px;
  padding: 2px 0;
  font-size: 15px;
  line-height: 1.6;
  text-transform: uppercase;
}

.footer-down-content-mid {
  text-align: center;
}

.footer-down-content ul li {
  position: relative;
}

.footer-down-content ul li::after {
  position: absolute;
  content: "";
  top: 6px;
  right: 0;
  height: 17px;
  width: 2px;
  background: #fff;
}

.footer-down-content ul li:last-child:after {
  display: none;
}

.footer-down-content-mid ul li a {
  color: #fff;
  padding: 6px 10px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  font-size: 15px;
  border: 1px solid #fff;
}

.footer-down-content-mid ul li a:hover {
  color: var(--brand2);
  background: #fff;
}

.footer-down-content-right ul {
  justify-content: end;
  display: flex;
}

.pay-icons {
  justify-content: end;
}

.footer-bottom {
  padding: 10px 0;
}

.footer-bottom p {
  text-align: start;
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.923;
}

.footer-bottom p a {
  color: #fff;
}

.footer-wave {
  position: relative;
  text-align: center;
  background-image: url("../images/banner/body-bg.jpg");
  background-position: left top;
  background-size: auto;
  background-repeat: repeat;
  background-attachment: fixed;
}

.waves {
  position: relative;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px;
  /*Fix for safari gap*/
  min-height: 100px;
  max-height: 150px;
}


/* Animation */

.parallax>use {
  animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* //////////////////////////////////////////////////////////////
                      [Footer part css end]
////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////
                      [Cart Modal part css start]
////////////////////////////////////////////////////////////// */
#cart-modal {
  padding-top: 60px;
  padding-bottom: 20px;
}

.cart-main-body {
  background: #fff;
  padding-top: 14px;
  padding-bottom: 0px;
  position: relative;
}

.cart-main-body .cart-js-hide-modal {
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  position: absolute;
  top: 0px;
  right: -15px;
  background: #ff6000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  transform: translateY(-50%);
}

.cart-main-body .cart-js-hide-modal i {
  font-size: 23px;
  color: #ffffff;
}

.cart-main-body .cart-js-hide-modal:hover {
  opacity: 1;
}

.cart-modal-body {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1 !important;
  overflow: auto;
  visibility: hidden;
  opacity: 0;
}


.cart-overlay-modal {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.8;
}

.cart-show-modal {
  z-index: 991 !important;
  visibility: visible;
  opacity: 1;
}

.cart-images {
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 30px;
}

.cart-images .slider-cart .swiper-container,
.cart-images .slider-cart .swiper-product-slider {
  width: 100%;
  height: 100%;
}


.slider__flex {
  display: flex;
  /* align-items: flex-start; */
  justify-content: center;
}

.slider__col {
  display: flex;
  flex-direction: column;
  width: 150px;
  margin-right: 32px;
}

.slider__prev,
.slider__next {
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.slider__prev:focus,
.slider__next:focus {
  outline: none;
}

.slider__thumbs {
  height: calc(581px - 96px);
}

.slider__thumbs .slider__image::after {
  font: var(--fa-font-solid);
  content: "\f06e";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.34;
  transition: all 0.4s;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  opacity: 0;
}

.slider__thumbs .slider__image:hover::after {
  opacity: 1;
}

.slider__thumbs .slider__image:hover {
  opacity: 1;
}

.slider__thumbs .swiper-slide-thumb-active .slider__image {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  opacity: 1;
}

.slider__thumbs .swiper-slide-thumb-active .slider__image {
  position: relative;
}

.slider__thumbs .swiper-slide-thumb-active .slider__image::after {
  font: var(--fa-font-solid);
  content: "\f06e";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.34;
  transition: all 0.4s;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  opacity: 1;

}

.view-cart-img {
  position: relative;
}

.view-cart-img::after {
  position: absolute;
  font: var(--fa-font-solid);
  content: "\f424";
  top: 0;
  right: 0;
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.34;
  transition: all 0.4s;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.view-cart-img:hover::after {
  background: #fff;
}

.slider__images {
  height: 485px;
  position: relative;
  width: 485px;
}

.slider__images .slider__image img {
  transition: 3s;
}

.slider__images .slider__prev,
.slider__images .slider__next {
  position: absolute;
  z-index: 2;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.5);
  width: 35px;
  font-size: 20px;
}

.slider__images .slider__prev:hover,
.slider__images .slider__next:hover {
  background: #fff;
}

.slider__images .slider__prev {
  left: 0;
  top: 50%;
}

.slider__images .slider__next {
  right: 0;
  top: 50%;
}


.slider__image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}


.cart-details {
  padding-bottom: 30px;
  padding-right: 50px;
  padding-top: 5px;
}


.cart-details .tag {
  background-color: #ff6000;
  color: #fff;
  display: inline-block;
  padding: 5px 14px;
  font-weight: normal;
}

.cart-product-title {
  color: #000;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 600;
}

.cart-product-code {
  color: #000;
  font-weight: 600;
  font-size: 12px;
}

.cart-product-code span {
  color: var(--brand);
}

.cart-price {
  display: block;
  padding: 10px 0;
  color: #000;
  font-size: 18px;
  line-height: 1.388888;
}

.cart-product-paragraph {
  font-weight: 200;
  color: #000;
  font-size: 12px;
}

.cart-product-sizes {
  padding-right: 10px;
  margin-right: 11px;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.cart-product-sizes h4 {
  font-size: 17px;
  font-weight: 500;
  margin-right: 20px;
}

.cart-product-sizes .rs1-select2 .select2-container .select2-results__option[aria-selected] {
  font-size: 12px;
}

.cart-product-sizes .rs2-select2 .select2-container--default .select2-selection--single .select2-selection__arrow {
  right: -5px;
}

.cart-product-sizes .form-select {
  width: 55%;
  border: 1px solid var(--brand);
  padding: 5px 15px;
  margin: 0 0 0 18px;
}

.cart-product-coupon {
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  padding: 10px 6px;
  text-align: center;
  justify-content: center;
  background-color: var(--brand);
  margin-right: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.cart-product-coupon input {
  background: #fff;
  color: #000;
  padding: 0 20px;
  margin: 5px 10px 5px 0;
  font-size: 14px;
  line-height: 1.466667;
}

.cart-product-coupon input::-webkit-input-placeholder {
  color: #888;
}

.cart-product-coupon input:-moz-placeholder {
  color: #888;
}

.cart-product-coupon input::-moz-placeholder {
  color: #888;
}

.cart-product-coupon input:-ms-input-placeholder {
  color: #888;
}

.cart-product-coupon .apply-coupon-button {
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  display: flex;
  color: #fff;
  font-size: 15px;
  line-height: 1.466667;
  text-transform: uppercase;
  background: var(--brand);
  border: 1px solid #fff;
  border-radius: 22px;
  min-width: 134px;
  height: 43px;
  padding: 0 15px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  margin: 5px 0;
  cursor: pointer;
}

.cart-product-coupon .apply-coupon-button:hover {
  background: var(--brand2);
}

.cart-add-body {
  padding: 17px 0;
  justify-content: space-around;
}

.cart-add-body .cart-add {
  -ms-align-items: center;
  align-items: center;

}


.cart-num-product {
  width: 140px;
  height: 45px;
  border: 1px solid var(--brand);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto;
}

.btn-num-product-up,
.btn-num-product-down {
  width: 45px;
  height: 100%;
  cursor: pointer;
  background: var(--brand);
  color: #fff;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  display: flex;
}

.btn-num-product-up i,
.btn-num-product-down i {
  font-size: 16px;
}

.btn-num-product-up:hover,
.btn-num-product-down:hover {
  border-color: var(--brand2);
  background-color: var(--brand2);
  color: #fff;
}

.num-product {
  width: calc(100% - 90px);
  height: 100%;
  border-left: 1px solid var(--brand);
  border-right: 1px solid var(--brand);
  background-color: #f7f7f7;
  -moz-appearance: textfield;
  appearance: none;
  -webkit-appearance: none;
  color: #666;
  font-size: 16px;
  line-height: 1.6;
}


input.num-product::-webkit-outer-spin-button,
input.num-product::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.cart-add-body button {
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  color: #fff;
  background: var(--brand);
  font-size: 15px;
  line-height: 1.466667;
  text-transform: uppercase;
  padding: 0 15px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  min-width: 161px;
  height: 46px;
}

.cart-add-body button:hover {
  background: var(--brand2);
}

.add-to {
  padding: 20px 10px 0px 0;
  margin-right: 11px;
}

.add-to-wishlist {
  text-align: end;
  font-size: 15px;
  line-height: 1.6;
  text-transform: uppercase;
  color: #666;
  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: 2px 5px;
}

.add-to-wishlist:hover {
  color: var(--brand);
}

/* //////////////////////////////////////////////////////////////
                      [Cart Modal part css end]
////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////
                      [commentbox part css start]
////////////////////////////////////////////////////////////// */
.commentbox-button button {
  background: var(--brand2);
  width: 14%;
  padding: 8px;
  margin-top: 15px;
}

.commentbox-top button {
  background: #ff6000;
}

.commentbox-top {
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid #2f3444;
}

.commentbox-top h3 {
  color: #888;
}

.commentbox-top .dropdown-menu {
  min-width: 23%;
  background: #e3e5d9;
  z-index: 1;
}

.commentbox-top .dropdown-menu i {
  margin-right: 5px;
  font-size: 14px;
  padding: 5px;
  border-radius: 5px;
  color: #fff;
}

.commentbox-top .dropdown-menu .fa-facebook {
  background: #0866ff;
}

.commentbox-top .dropdown-menu .fa-square-x-twitter {
  background: #000000;
}

.commentbox-top .dropdown-menu .fa-google {
  background: #d31e2e;
}

#commentbox .form-floating {
  position: relative;
  border: 1px solid #444;
}


#commentbox .form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
  background: #e3e5d9;
}

.commentbox-top .dropdown-menu .dropdown-item {
  color: #000;
  padding: 8px 8px;
}

.commentbox-top .dropdown-menu .dropdown-item:focus,
.commentbox-top .dropdown-menu .dropdown-item:hover {
  color: #fff;
  background: var(--brand);
}

#commentbox .form-floating>label {
  color: #000;
}

.comment_area {
  border-top: 1px solid var(--brand);
  padding-top: 50px;
  padding-bottom: 50px;
}

#commentbox .title {
  margin-bottom: 30px;
  font-size: 30px;
  color: #888;
}

.comment-nav .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--brand);
  background-color: transparent;
  border-bottom: 3px solid var(--brand);
  border-radius: 0;
}

.comment-nav .nav-pills .nav-link:hover {
  color: var(--brand);
  background: transparent;
  border-bottom: 3px solid var(--brand);
  border-radius: 0;
}

.comment-nav .nav-link:focus-visible {
  outline: 0;
  box-shadow: none;
}

.comment-nav .nav-link {
  color: #000;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  font-weight: 600;
}

.comment-nav .nav {
  text-align: end;
  display: flex;
  justify-content: end;
}

#commentbox .Comments {
  padding-top: 50px;
}

.comment_area .comment-content {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  background: #e3e5d9;
  padding: 15px;
  border-radius: 10px;
}

.comment_area .comment-content .comment-author {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 70px;
  flex: 0 0 70px;
  width: 70px;
  max-width: 70px;
  margin-right: 20px;
  border-radius: 50%;
}



.comment_area .comment-content .comment-author img {
  border-radius: 10px;
}

.comment_area .comment-content .comment-meta .post-date {
  color: #000;
  font-size: 12px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

.comment_area .comment-content .comment-meta h5 {
  margin-bottom: 5px;
  color: var(--brand2);
}


.comment_area .comment-content .comment-meta p {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}


.comment_area .comment-content .comment-meta a.like,
.comment_area .comment-content .comment-meta a.reply {
  display: inline-block;
  padding: 5px 15px 3px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #252525;
  text-transform: uppercase;
  color: #f1f1f1;
}

.comment_area .comment-content .comment-meta a.like,
.comment_area .comment-content .comment-meta a.reply {
  color: #ff6000;
  border: 1px solid #ff6000;
  transition: all linear .3s;
  background: #fff;
}

.comment_area .comment-content .comment-meta a.like:focus,
.comment_area .comment-content .comment-meta a.like:hover,
.comment_area .comment-content .comment-meta a.reply:focus,
.comment_area .comment-content .comment-meta a.reply:hover {
  border-color: #ddd;
  background-color: #ff6000;
  color: #ffffff;
}

.comment_area .children {
  margin-left: 50px;
}


.comment_area .children .single_comment_area:last-of-type {
  margin-bottom: 0;
}

/* //////////////////////////////////////////////////////////////
                      [commentbox part css end]
////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////
                      [Contact part css start]
////////////////////////////////////////////////////////////// */
/* #contact {
  padding: 100px 0;
} */
.contact-form .heading-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.contact-form {
  background: #ddd;
  padding: 35px;
  border-radius: 20px;
}

.contact-form .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(156, 192, 38, 0.5);
}

.contact-form .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(156, 192, 38, 0.5);
}

.contact-form .form-control {
  background: #fff;
  color: #000;
}

.contact-form .form-floating>.form-control:not(:-moz-placeholder-shown)~label::after {
  background: var(--brand);
}

.contact-form .form-floating>.form-control-plaintext~label::after,
.contact-form .form-floating>.form-control:focus~label::after,
.contact-form .form-floating>.form-control:not(:placeholder-shown)~label::after,
.contact-form .form-floating>.form-select~label::after {
  background: var(--brand);
}

.contact-form .form-floating>label {
  padding: 16px 15px;
  font-size: 13px;
  font-weight: 700;
}

.contact-form .form-select {
  color: #000;
  /* background-color: #282c39; */
}

.contact .form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
  background: #ffffff;
}

.contact-form-btn {
  background-color: var(--brand);
  padding: 10px 50px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 20px;
  text-align: 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;
}

.contact-form-btn:hover {
  background-color: #fff;
  color: var(--brand);
  border: 2px solid var(--brand);
}

.contact-form .contact-get-more h4 {
  font-size: 18px;
  font-weight: 600;
}

.contact-form .contact-get-more h4 i {
  color: var(--brand);
  margin-right: 4px;
}

form.cmxform label.error,
label.error {
  color: red !important;
  display: contents;
  font-size: 13px;
  font-weight: 600;
}

#contact .form-check-input {
  border: 1px solid #000;
}

/* //////////////////////////////////////////////////////////////
                      [Contact part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [coming-soon  part css start]
////////////////////////////////////////////////////////////// */
#coming-soon {
  padding-top: 200px;
  padding-bottom: 200px;
}

.coming_soon_details h4 {
  color: #000;
  text-transform: uppercase;
  font-size: 40px;
  text-align: center;
  font-weight: 800;
}

.coming_soon_details h3 {
  color: #ff6000;
  text-transform: uppercase;
  font-size: 70px;
  text-align: center;
  font-weight: 800;
}


.Coming-Out-info {
  position: relative;
  z-index: 1;
}

#Coming-Out .Coming-Out-info p {
  font-size: 12px;
  color: #b9bbbe;
  font-weight: 500;
  margin-bottom: 15px;
  line-height: 20px;
}

#Coming-Out .Coming-Out-info h6 {
  color: #fff;
  font-weight: 800;
  font-size: 30px;
  margin: 30px 0;
  text-transform: uppercase;
  text-align: center;
}

#Coming-Out .Coming-Out-info h1 {
  font-weight: 700;
  font-size: 60px;
  color: #fff;
  margin-bottom: 0;
}

#Coming-Out .Coming-Out-info ul li {
  margin-bottom: 5px;
}

#Coming-Out .Coming-Out-info ul li h5 strong {
  color: #fff;
  font-weight: 400;
  display: inline-block;
  margin-right: 5px;
  font-size: 12px;
}

#Coming-Out .Coming-Out-info ul li h5 {
  color: #b4b4b4;
  font-weight: 400;
  display: inline-block;
  font-size: 12px;
}

.flipper {
  color: #ffffff;
  display: block;
  font-size: 50px;
  line-height: 100%;
  padding: 0;
  margin: 0;
  height: 1.7em;
}

.flipper.flipper-invisible {
  font-size: 0px !important;
}

.flipper-group {
  position: relative;
  white-space: nowrap;
  display: block;
  float: left;
  padding: 0;
  margin: 0;
}

.flipper-group label {
  position: absolute;
  color: #9cc026;
  font-size: 20%;
  top: 78%;
  line-height: 1em;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  text-align: center;
  font-weight: 800;
}

.flipper-digit {
  white-space: nowrap;
  position: relative;
  padding: 0;
  margin: 0;
  display: block;
  float: left;
  height: 1.2em;
  overflow-y: hidden;
  font-family: var(--font2);
}

.flipper-digit span {
  font-size: 23%;
}

.flipper-delimiter {
  white-space: nowrap;
  display: block;
  float: left;
  padding: 0;
  margin: 0;
  color: #ffffff;
  min-width: .1em;
  white-space: nowrap;
  display: block;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  line-height: 1em;
}

.digit-face {
  display: block;
  visibility: hidden;
  position: relative;
  border-radius: 0.1em;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  padding-left: 0.1em;
  padding-right: 0.1em;
  box-sizing: border-box;
  text-align: center;
}

.digit-next {
  display: block;
  position: relative;
  border-radius: 0.1em;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  height: 1.2em;
  background: #000000;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  padding-left: 0.1em;
  padding-right: 0.1em;
  box-sizing: border-box;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.digit-top {
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  position: absolute;
  background: #333;
  padding-top: 0.1em;
  padding-bottom: 0;
  padding-left: 0.1em;
  padding-right: 0.1em;
  border-top-left-radius: 0.1em;
  border-top-right-radius: 0.1em;
  box-sizing: border-box;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background 0s linear, -webkit-transform 0s linear;
  transition: transform 0s linear, background 0s linear;
  transition: transform 0s linear, background 0s linear, -webkit-transform 0s linear;
  -webkit-transform-origin: 0 0.6em 0 !important;
  transform-origin: 0 0.6em 0 !important;
  -webkit-transform-style: preserve-3d !important;
  transform-style: preserve-3d !important;
  z-index: 20;
}

.digit-top.r {
  transition: background 0.2s linear, -webkit-transform 0.2s linear;
  transition: transform 0.2s linear, background 0.2s linear;
  transition: transform 0.2s linear, background 0.2s linear, -webkit-transform 0.2s linear;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  background: #333;
}

.digit-top2 {
  visibility: hidden;
  position: absolute;
  height: 50%;
  left: 0;
  right: 0;
  background: #333;
  transition: -webkit-transform 0.2s linear;
  transition: transform 0.2s linear;
  transition: transform 0.2s linear, -webkit-transform 0.2s linear;
  line-height: 0em !important;
  top: 50% !important;
  bottom: auto !important;
  padding-top: 0;
  padding-bottom: 0.1em;
  padding-left: 0.1em;
  padding-right: 0.1em;
  border-bottom-left-radius: 0.1em;
  border-bottom-right-radius: 0.1em;
  overflow: hidden;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background 0s linear, -webkit-transform 0s linear;
  transition: transform 0s linear, background 0s linear;
  transition: transform 0s linear, background 0s linear, -webkit-transform 0s linear;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-style: preserve-3d !important;
  transform-style: preserve-3d !important;
  -webkit-transform-origin: 0 0 0 !important;
  transform-origin: 0 0 0 !important;
  z-index: 20;
}

.digit-top2.r {
  visibility: visible;
  transition: background 0.2s linear 0.2s, -webkit-transform 0.2s linear 0.2s;
  transition: transform 0.2s linear 0.2s, background 0.2s linear 0.2s;
  transition: transform 0.2s linear 0.2s, background 0.2s linear 0.2s, -webkit-transform 0.2s linear 0.2s;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  background: #333;
}

.digit-bottom {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  background: #333;
  height: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  line-height: 0em;
  padding-top: 0;
  padding-bottom: 0.1em;
  padding-left: 0.1em;
  padding-right: 0.1em;
  border-bottom-left-radius: 0.1em;
  border-bottom-right-radius: 0.1em;
  box-sizing: border-box;
  text-align: center;
  transition: none;
}

.digit-bottom.r {
  transition: background 0.2s linear;
  background: #000000;
}

.flipper-digit:after {
  content: "";
  position: absolute;
  height: 2px;
  background: rgba(0, 0, 0, 0.5);
  top: 50%;
  display: block;
  z-index: 30;
  left: 0;
  right: 0;
}

.flipper-dark {
  color: #fff;
}

.flipper-dark .flipper-delimiter {
  color: #333;
}

.flipper-dark .digit-next {
  background: #333;
}

.flipper-dark .digit-top {
  background: #333;
}

.flipper-dark .digit-top.r {
  background: black;
}

.flipper-dark .digit-top2 {
  background: black;
}

.flipper-dark .digit-top2.r {
  background: #333;
}

.flipper-dark .digit-bottom {
  background: #333;
}

.flipper-dark-labels .flipper-group label {
  color: #333;
}

.btn-coming-soon a {
  color: #fff;
  background: var(--brand);
  border-radius: 23px;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  -ms-border-radius: 23px;
  -o-border-radius: 23px;
  padding: 6px 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;
  display: inline-block;
}

.btn-coming-soon a:hover {
  background: var(--brand2);
}

/* //////////////////////////////////////////////////////////////
                      [coming-soon part css end]
////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////
                      [Error page  part css start]
////////////////////////////////////////////////////////////// */
#error-page {
  padding-top: 100px;
  padding-bottom: 100px;
}

#error-page h1 {
  font-size: 156px;
  font-weight: 800;
}

#error-page h2 {
  font-size: 35px;
  font-weight: 600;
  margin-bottom: 15px;
}

#error-page p {
  font-size: 16px;
  font-weight: 500;
}

#error-page .btnstyle {
  margin-top: 32px;
}

.btn-error a {
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  color: #fff;
  display: flex;
  background: var(--brand);
  border-radius: 23px;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  -ms-border-radius: 23px;
  -o-border-radius: 23px;
  padding: 6px 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;
  display: inline-block;
  margin-top: 25px;
}

.btn-error a:hover {
  background: var(--brand2);
}

/* //////////////////////////////////////////////////////////////
                      [Error page  part css end]
////////////////////////////////////////////////////////////// */