/*========================================

            ALL COMMON PART STYLE

=========================================*/

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

:root {

  --h1size: 50px;

  --h2size: 40px;

  --h3size: 24px;

  --h4size: 20px;

  --h5size: 18px;

  --h6size: 16px;

  --bodysize: 16px;

  --h1height: 58px;

  --h2height: 48px;

  --h3height: 32px;

  --h4height: 28px;

  --h5height: 26px;

  --h6height: 26px;

  --bodyheight: 26px;

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

  --red: #ff3838;

  --gray: #777777;

  --text: #555555;

  --blue: #1494a9;

  --white: #ffffff;

  --chalk: #f5f5f5;

  --green: #11b76b;

  --purple: #b12fad;

  --orange: #e86121;

  --yellow: #ffab10;

  --body: #f5f6f7;

  --border: #e8e8e8;

  --heading: #39404a;

  --primary: #119744;

  --sub-heading: #565765;

  --green-chalk: #ddffd5;

  --green-dark: #072f17;

  --gray-chalk: #cccccc;

  --intro-bg: #f8fffa;

  --facebook: #3b5998;

  --linkedin: #0e76a8;

  --twitter: #00acee;

  --google: #E60023;

  --instagram: #F77737;

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

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

}



* {

  margin: 0px;

  padding: 0px;

  outline: 0px;

}



img {

  vertical-align: middle;

}



a {

  text-decoration: none;

  display: inline-block;

}



a:hover {

  text-decoration: none;

}



ul,

ol {

  padding: 0px;

  list-style: none;

}



h1,

h2,

h3,

h4,

h5,

h6,

p,

ol,

ul,

li,

span,

label {

  margin-bottom: 0px;

}



html,

body {

  scroll-behavior: smooth;

}



body {

  color: var(--text);

  background: var(--body);

  font-size: var(--bodysize);

  font-family: var(--pfamily);

  line-height: var(--bodyheight);

  overflow-x: hidden;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-weight: 500;

  color: var(--heading);

}



h1 {

  font-size: var(--h1size);

  line-height: var(--h1height);

}



h2 {

  font-size: var(--h2size);

  line-height: var(--h2height);

  letter-spacing: -0.3px;

  text-transform: capitalize;

}



h3 {

  font-size: var(--h3size);

  line-height: var(--h3height);

}



h4 {

  font-size: var(--h4size);

  line-height: var(--h4height);

}



h5 {

  font-size: var(--h5size);

  line-height: var(--h5height);

}



h6 {

  font-size: var(--h6size);

  line-height: var(--h6height);

}



input::-webkit-input-placeholder,

textarea::-webkit-input-placeholder {

  font-size: 14px;

  color: var(--gray);

  text-transform: capitalize;

}



input:-ms-input-placeholder,

textarea:-ms-input-placeholder {

  font-size: 14px;

  color: var(--gray);

  text-transform: capitalize;

}



input::-ms-input-placeholder,

textarea::-ms-input-placeholder {

  font-size: 14px;

  color: var(--gray);

  text-transform: capitalize;

}



input::placeholder,

textarea::placeholder {

  font-size: 14px;

  color: var(--gray);

  text-transform: capitalize;

}



input,

button {

  border: none;

  outline: none;

  background: none;

}



button:focus {

  outline: none;

}



@media (max-width: 575px) {

  .col {

    padding: 0px 4px;

  }

}



@media (max-width: 991px) {

  .content-reverse {

    -webkit-box-orient: vertical;

    -webkit-box-direction: reverse;

        -ms-flex-direction: column-reverse;

            flex-direction: column-reverse;

  }

}



/*========================================

        ALL COMPONENTS PART STYLE

=========================================*/

.section {

  margin-bottom: 115px;

}



.inner-section {

  margin-bottom: 100px;

}



.section-heading {

  text-align: center;

  margin-bottom: 40px;

}



.section-btn-50 {

  text-align: center;

  margin-top: 50px;

}



.section-btn-25 {

  text-align: center;

  margin-top: 25px;

}



@media (max-width: 767px) {

  .section {

    margin-bottom: 55px;

  }

  .inner-section {

    margin-bottom: 60px;

  }

  .section-heading {

    margin-bottom: 30px;

  }

  .section-heading h2 {

    font-size: 28px;

    line-height: 36px;

  }

}



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

  .section {

    margin-bottom: 75px;

  }

  .inner-section {

    margin-bottom: 80px;

  }

}



.alert {

  border: none;

  margin: 0px;

  /*padding: 0px 15px;*/

  border-radius: 0px;

  margin-top: 10px;

}



.alert-info {

  text-align: center;

  margin-bottom: 30px;

  padding: 20px 20px;

  border-radius: 3px;

  background: var(--white);

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

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

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

}



.alert-info p {

  font-weight: 500;

  color: var(--primary);

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

}



.alert-info p a {

  margin-left: 5px;

  text-decoration: underline;

}



.breadcrumb {

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  background: none;

  margin: 0px;

}



.breadcrumb .active {

  color: var(--gray-chalk);

}



.breadcrumb-item {

  font-size: 18px;

  padding: 0px !important;

  text-transform: capitalize;

  color: var(--white);

}



.breadcrumb-item a {

  color: var(--chalk);

}



.breadcrumb-item a:hover {

  color: var(--primary);

  text-decoration: underline;

}



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

  color: var(--white);

  padding: 0px 8px;

  float: right;

}



.backdrop {

  position: fixed;

  top: 0px;

  left: 0px;

  z-index: 4;

  width: 1000%;

  height: 100%;

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

  display: none;

}



.backtop {

  position: fixed;

  left: 20px;

  bottom: 20px;

  z-index: 2;

  width: 48px;

  height: 48px;

  font-size: 15px;

  color: var(--white);

  line-height: 48px;

  text-align: center;

  display: none;

  border-radius: 50%;

  background: var(--primary);

  -webkit-box-shadow: 0px 0px 15px 3px rgba(71, 254, 126, 0.5);

          box-shadow: 0px 0px 15px 3px rgba(71, 254, 126, 0.5);

  -webkit-animation: mahmud 2s infinite;

          animation: mahmud 2s infinite;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.backtop:hover {

  color: var(--white);

}



@-webkit-keyframes mahmud {

  0% {

    margin-bottom: 0px;

  }

  50% {

    margin-bottom: 15px;

  }

}



@keyframes mahmud {

  0% {

    margin-bottom: 0px;

  }

  50% {

    margin-bottom: 15px;

  }

}



@media (max-width: 575px) {

  .backtop {

    width: 42px;

    height: 42px;

    line-height: 42px;

    font-size: 14px;

  }

}



@media (max-width: 991px) {

  .backtop {

    bottom: 55px;

  }

}



.btn {

  border: none;

  font-size: 15px;

  font-weight: 500;

  text-transform: uppercase;

  /*padding: 14px 32px;*/

  border-radius: 6px;

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

  position: relative;

  overflow: hidden;

}



.btn:focus {

  -webkit-box-shadow: none !important;

          box-shadow: none !important;

}



.btn i {

  margin-left: 5px;

}



.btn-inline {

  color: var(--white);

  background: var(--primary);

}



.btn-inline:hover {

  color: var(--primary);

  background: var(--white);

}



.btn-outline {

  color: var(--primary);

  background: var(--white);

}



.btn-outline:hover {

  color: var(--white);

  background: var(--primary);

}



.menu-badge {

  font-size: 10px;

  padding: 0px 5px;

  margin-right: 5px;

  line-height: 18px;

  border-radius: 3px;

  letter-spacing: 0.3px;

  display: inline-block;

  text-transform: uppercase;

  color: var(--white);

  background: var(--red);

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

}



.dropdown-arrow {

  position: relative;

  padding-left: 18px !important;

}



.dropdown-arrow:hover::before {

  color: var(--primary);

}



.dropdown-arrow::before {

  position: absolute;

  content: "\ea99";

  top: 50%;

  left: 0px;

  font-size: 15px;

  line-height: 15px;

  color: var(--text);

  font-family: IcoFont;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.dropdown-link {

  position: relative;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.dropdown-link:hover {

  color: var(--primary);

  background: var(--chalk);

}



.dropdown-link:hover::before {

  color: var(--primary);

}



.dropdown-link::before {

  position: absolute;

  top: 50%;

  left: 18px;

  content: "\f054";

  font-size: 10px;

  font-weight: 900;

  font-family: "Font Awesome 5 Free";

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.dropdown-link.active {

  color: var(--primary);

}



.dropdown-link.active::before {

  color: var(--primary);

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

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

}



.dropdown-list {

  display: none;

  padding: 0px 20px;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.dropdown-list li a {

  width: 100%;

  font-size: 15px;

  line-height: 18px;

  border-radius: 8px;

  padding: 10px 35px 10px 15px;

  color: var(--text);

  background: var(--white);

  position: relative;

  white-space: nowrap;

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.dropdown-list li a:hover {

  color: var(--primary);

  background: var(--chalk);

}



.dropdown-list li a::before {

  position: absolute;

  top: 50%;

  right: 15px;

  content: "\f068";

  font-size: 10px;

  font-weight: 900;

  font-family: "Font Awesome 5 Free";

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.dropdown:hover .dropdown-position-list {

  visibility: visible;

  opacity: 1;

  top: 70px;

}



.dropdown-position-list {

  position: absolute;

  top: 100px;

  right: 0px;

  z-index: 2;

  width: 200px;

  height: auto;

  visibility: hidden;

  opacity: 0;

  padding: 10px;

  border-radius: 8px;

  background: var(--white);

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

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.dropdown-position-list::before {

  position: absolute;

  content: "";

  z-index: -1;

  top: -7px;

  right: 12px;

  width: 12px;

  height: 12px;

  border-radius: 3px;

  -webkit-transform: rotate(45deg);

          transform: rotate(45deg);

  background: var(--white);

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

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

}



.dropdown-position-list li a {

  width: 100%;

  font-size: 15px;

  line-height: 18px;

  border-radius: 8px;

  padding: 8px 15px;

  color: var(--text);

  background: var(--white);

  white-space: nowrap;

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.dropdown-position-list li a:hover {

  color: var(--primary);

  background: var(--chalk);

}



.dropdown-megamenu {

  position: static;

}



.dropdown-megamenu:hover .megamenu {

  visibility: visible;

  opacity: 1;

  top: 199px;

}



.megamenu {

  position: absolute;

  top: 230px;

  left: 50%;

  z-index: 2;

  width: 1180px;

  border-radius: 8px;

  padding: 30px 30px;

  background: var(--white);

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

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

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

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

  visibility: hidden;

  opacity: 0;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.megamenu-scroll {

  height: 380px;

  overflow-y: scroll;

}



.megamenu-wrap {

  margin-bottom: 30px;

}



.megamenu-title {

  padding-bottom: 18px;

  margin-bottom: 20px;

  position: relative;

  text-transform: capitalize;

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

}



.megamenu-title::before {

  position: absolute;

  content: "";

  bottom: -2px;

  right: 0px;

  width: 50px;

  height: 2px;

  background: var(--primary);

}



.megamenu-list {

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

}



.megamenu-list li a {

  width: 100%;

  border-radius: 5px;

  padding: 5px 25px 5px 0px;

  color: var(--text);

  white-space: nowrap;

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.megamenu-list li a:hover {

  color: var(--primary);

  background: var(--chalk);

}



.megamenu-promo a img {

  width: 100%;

  border-radius: 3px;

}



@media (max-width: 1199px) {

  .megamenu {

    width: 100%;

  }

}



.form-title {

  text-align: center;

  margin-bottom: 20px;

}



.form-title h3 {

  text-transform: capitalize;

}



.form-group {

  margin-bottom: 25px;

}



.form-group small {

  color: var(--gray);

  letter-spacing: 0.3px;

  padding: 0px 0px 0px 20px;

}



.form-group textarea {

  height: 150px;

  padding: 12px 20px;

}



.form-label {

  font-weight: 500;

  margin: 0px 0px 7px 3px;

  white-space: nowrap;

  text-transform: capitalize;

}



.form-control {

  width: 100%;

  height: 45px;

  border-radius: 6px;

  padding: 0px 20px 2px;

  color: var(--text);

  background: var(--chalk);

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

}



.form-control:focus-within {

  background: var(--chalk);

  border-color: var(--primary);

  -webkit-box-shadow: none;

          box-shadow: none;

  outline: 0;

}



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

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

  border: none;

  background: none;

  height: 45px;

  line-height: 45px;

  padding: 5px 15px 0px;

  color: var(--gray);

}



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

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

  background-color: transparent;

}



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

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

  border: none;

  outline: none;

}



.form-select {

  height: 45px;

  font-size: 15px;

  padding: 0px 16px;

  letter-spacing: 0.3px;

  background-size: 12px 10px;

  text-transform: capitalize;

  background-position: left .75rem center;

  color: var(--text);

  cursor: pointer;

}



.form-select:focus-within {

  -webkit-box-shadow: none;

          box-shadow: none;

  border-color: var(--primary);

}



.form-check .form-check-input {

  float: right;

  margin-left: 0.75em;

}



.form-check-input:focus {

  border-color: var(--primary);

  -webkit-box-shadow: none;

          box-shadow: none;

}



.form-check-input:checked {

  background-color: var(--primary);

  border-color: var(--primary);

}



.form-btn {

  width: 100%;

  height: 45px;

  font-size: 14px;

  font-weight: 400;

  line-height: 45px;

  border-radius: 6px;

  letter-spacing: 0.5px;

  text-align: center;

  text-transform: uppercase;

  color: var(--white);

  background: var(--primary);

}



.form-input-group {

  position: relative;

}



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

  color: var(--primary);

}



.form-input-group input {

  padding: 0px 20px 2px 45px;

}



.form-input-group textarea {

  padding: 12px 20px 12px 45px;

}



.form-input-group i {

  position: absolute;

  top: 0px;

  left: 0px;

  width: 45px;

  height: 45px;

  font-size: 18px;

  line-height: 45px;

  border-radius: 50%;

  text-align: center;

}



.form-btn-group {

  width: 100%;

  height: 45px;

  font-size: 14px;

  font-weight: 500;

  line-height: 45px;

  border-radius: 6px;

  letter-spacing: 0.5px;

  text-align: center;

  text-transform: uppercase;

  color: var(--white);

  background: var(--primary);

}



.form-btn-group i {

  font-size: 15px;

  margin-left: 5px;

  display: inline-block;

}



.nav-tabs {

  border: none;

  padding: 25px 25px;

  border-radius: 8px;

  margin-bottom: 25px;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  background: var(--white);

}



.nav-tabs li {

  padding: 0px 30px;

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

}



.nav-tabs li:last-child {

  border: none;

}



.tab-link {

  font-size: 15px;

  font-weight: 500;

  text-transform: uppercase;

  color: var(--heading);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.tab-link:hover {

  color: var(--primary);

}



.tab-link i {

  font-size: 18px;

  margin-left: 5px;

}



.tab-link.active {

  color: var(--primary);

}



.tab-pane {

  display: none;

  padding: 0px;

}



.tab-pane.active {

  display: block;

}



@media (max-width: 575px) {

  .nav-tabs {

    -ms-flex-wrap: nowrap;

        flex-wrap: nowrap;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

  }

  .nav-tabs li {

    padding: 5px;

    border: none;

  }

}



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

  .nav-tabs {

    padding: 25px 10px;

  }

  .nav-tabs li {

    padding: 0px 20px;

  }

}



.pagination {

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.page-item {

  margin-left: 10px;

}



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

  border-radius: 50%;

}



.page-item .active {

  color: var(--white);

  background: var(--primary);

}



.page-link {

  width: 40px;

  height: 40px;

  line-height: 40px;

  text-align: center;

  border-radius: 50%;

  font-weight: 400;

  border: none;

  padding: 0px;

  color: var(--text);

  background: var(--white);

}



.page-link:hover {

  color: var(--white);

  background: var(--primary);

}



.page-link:focus {

  -webkit-box-shadow: none;

          box-shadow: none;

}



@media (max-width: 991px) {

  .page-link {

    width: 35px;

    height: 35px;

    line-height: 35px;

  }

}



@media (max-width: 767px) {

  .page-item {

    margin: 0px 3px;

  }

}



.star-rating {

  direction: rtl;

  text-align: center;

  margin: 25px 0px;

}



.star-rating input {

  display: none;

}



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

  opacity: 1;

}



.star-rating label {

  display: inline-block;

  position: relative;

  cursor: pointer;

  margin: 0px 8px;

}



.star-rating label:hover::after {

  opacity: 1;

}



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

  opacity: 1;

}



.star-rating label::before {

  content: "\ec7c";

  font-family: 'Icofont';

  font-weight: 900;

  font-size: 35px;

  display: block;

  color: #bbbbbb;

}



.star-rating label::after {

  content: "\ec7c";

  font-family: 'Icofont';

  font-weight: 900;

  font-size: 35px;

  position: absolute;

  display: block;

  top: 0px;

  left: 0px;

  color: var(--yellow);

  opacity: 0;

}



.slider-arrow:hover .dandik,

.slider-arrow:hover .bamdik {

  visibility: visible;

  opacity: 1;

}



.dandik,

.bamdik {

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  font-size: 20px;

  width: 45px;

  height: 45px;

  line-height: 45px;

  text-align: center;

  border-radius: 50%;

  color: var(--primary);

  background: var(--white);

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

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

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

  visibility: hidden;

  opacity: 0;

  cursor: pointer;

  z-index: 1;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.dandik:hover,

.bamdik:hover {

  color: var(--white);

  background: var(--primary);

}



.dandik {

  right: -10px;

}



.bamdik {

  left: -10px;

}



.slider-dots ul {

  position: absolute;

  bottom: 20px;

  left: 50%;

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

}



.slider-dots ul li {

  width: 9px;

  height: 9px;

  margin: 0px 5px;

  border-radius: 30px;

  cursor: pointer;

  display: inline-block;

  background: var(--primary);

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.slider-dots ul li button {

  display: none;

}



.slider-dots ul li.slick-active {

  width: 25px;

  background: var(--primary);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



@media (max-width: 575px) {

  .slider-dots ul {

    bottom: 10px;

  }

  .slider-dots ul li {

    margin: 0px 6px;

  }

}



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

  .slider-dots ul {

    bottom: 20px;

  }

  .slider-dots ul li {

    margin: 0px 6px;

  }

}



.product-add {

  width: 100%;

  font-size: 15px;

  padding: 6px 0px;

  border-radius: 6px;

  text-align: center;

  text-transform: capitalize;

  color: var(--heading);

  background: var(--border);

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.product-add i {

  font-size: 14px;

  margin-left: 5px;

}



.product-action {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  margin-top: 10px;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  /*display: none;*/

}



.product-action button i {

  width: 35px;

  height: 35px;

  font-size: 14px;

  line-height: 35px;

  border-radius: 6px;

  text-align: center;

  display: inline-block;

  color: var(--text);

  background: var(--chalk);

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.product-action button i:hover {

  color: var(--white);

  background: var(--primary);

}



.product-action input {

  width: 100%;

  font-size: 15px;

  margin: 0px 5px;

  padding: 6px 0px;

  border-radius: 6px;

  text-align: center;

  color: var(--white);

  background: var(--primary);

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

}



.table-list {

  width: 100%;

}



thead tr {

  background: var(--primary);

}



thead tr th {

  font-size: 22px;

  font-weight: 500;

  white-space: nowrap;

  text-align: center;

  text-transform: capitalize;

  padding: 12px 20px;

  color: var(--white);

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

}



thead tr th:first-child {

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

}



thead tr th:last-child {

  border-left: none;

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

}



tbody tr {

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

}



tbody tr td {

  padding: 12px 20px;

  text-align: center;

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

}



tbody tr td:last-child {

  border-left: none;

}



.table-name {

  white-space: nowrap;

  text-transform: capitalize;

}



.table-image img {

  width: auto;

  height: 100px;

}



.table-price h6 {

  white-space: nowrap;

}



.table-price h6 small {

  font-size: 13px;

  margin-right: 3px;

  color: var(--gray);

  font-family: sans-serif;

}



.table-desc p {

  width: 150px;

  font-size: 15px;

  text-align: right;

}



.table-desc p a {

  text-transform: capitalize;

}



.table-desc p a:hover {

  text-decoration: underline;

}



.table-vendor a {

  font-weight: 500;

  color: var(--heading);

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.table-vendor a:hover {

  color: var(--primary);

}



.table-status h6 {

  text-transform: capitalize;

}



.table-status .stock-in {

  color: var(--purple);

}



.table-status .stock-out {

  color: var(--orange);

}



.table-shop {

  width: 180px;

}



.table-shop .product-add {

  color: var(--white);

  background: var(--primary);

}



.table-shop .action-plus i,

.table-shop .action-minus i {

  background: var(--white);

}



.table-action a i {

  width: 35px;

  height: 35px;

  font-size: 16px;

  line-height: 35px;

  text-align: center;

  display: inline-block;

  border-radius: 5px;

  margin: 3px;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.table-action button i {

  width: 35px;

  height: 35px;

  font-size: 16px;

  line-height: 35px;

  border-radius: 5px;

  text-align: center;

  display: inline-block;

  color: var(--text);

  background: var(--chalk);

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.table-action .view i {

  color: var(--green);

  background: var(--white);

}



.table-action .view i:hover,

.table-action button i:hover {

  color: var(--white);

  background: var(--green);

}



.table-action .wish i {

  color: var(--green);

  background: var(--white);

}



.table-action .wish.active i {

  color: var(--white);

  background: var(--green);

}



.table-action .trash i {

  color: var(--red);

  background: var(--white);

}



.table-action .trash i:hover {

  color: var(--white);

  background: var(--red);

}



@media (max-width: 1199px) {

  .table-scroll {

    overflow-x: scroll;

  }

}



/*.modal-dialog {

  max-width: -webkit-max-content;

  max-width: -moz-max-content;

  max-width: max-content;

}



.modal-content {

  border: none;

  background: none;

  border-radius: 0px;

}



.modal-close {

  position: absolute;

  top: -15px;

  left: -15px;

  z-index: 1;

  width: 35px;

  height: 35px;

  font-size: 18px;

  line-height: 35px;

  border-radius: 50%;

  text-align: center;

  display: inline-block;

  background: var(--white);

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.modal-close:hover {

  color: var(--white);

  background: var(--primary);

}



.modal-form {

  width: 400px;

  padding: 30px;

  border-radius: 8px;

  background: var(--white);

}



@media (max-width: 400px) {

  .modal-form,

  .modal-dialog {

    width: 100%;

    max-width: inherit;

  }

}



@media (max-width: 1100px) {

  .modal-dialog {

    margin: 80px auto 50px;

  }

  .modal-close {

    right: 50%;

    top: -45px;

    -webkit-transform: translateX(50%);

            transform: translateX(50%);

  }

}*/



.order-track {

  margin-bottom: 25px;

}



.order-track-list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  padding: 25px 25px;

  border-radius: 8px;

  background: var(--chalk);

}



.order-track-item {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  position: relative;

  text-align: center;

  width: 100%;

  z-index: 1;

}



.order-track-item::before {

  position: absolute;

  content: "";

  top: 20px;

  left: 0px;

  width: 100%;

  height: 5px;

  z-index: -1;

  background: var(--white);

}



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

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

}



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

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

}



.order-track-item i {

  width: 45px;

  height: 45px;

  font-size: 20px;

  line-height: 42px;

  border-radius: 50%;

  margin-bottom: 10px;

  text-align: center;

  display: inline-block;

  color: var(--primary);

  background: var(--white);

  border: 2px dotted var(--primary);

}



.order-track-item span {

  font-weight: 500;

  line-height: 20px;

  white-space: nowrap;

  color: var(--heading);

  text-transform: capitalize;

}



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

  background: var(--primary);

}



.order-track-item.active i {

  color: var(--white);

  background: var(--primary);

}



.order-track-item.active span {

  color: var(--primary);

}



@media (max-width: 575px) {

  .order-track {

    overflow-x: scroll;

  }

  .order-track-list {

    width: 575px;

  }

}



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

  .order-track-item span {

    white-space: inherit;

  }

}



.nav-pills .nav-link {

  font-weight: 400;

  list-style: decimal;

}



.nav-pills .nav-link.active {

  color: var(--primary);

  background: transparent;

}



@media (max-width: 991px) {

  .nav {

    margin-bottom: 30px;

  }

}



.countdown {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.countdown-time {

  padding: 0px 30px;

  position: relative;

  color: var(--heading);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

}



.countdown-time::before {

  position: absolute;

  content: ":";

  top: 28%;

  left: -3px;

  font-size: 25px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  color: var(--heading);

}



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

  display: none;

}



.countdown-time span {

  display: block;

  font-size: 40px;

  font-weight: 700;

  line-height: 40px;

  color: var(--primary);

}



.countdown-time small {

  font-size: 18px;

  font-weight: 500;

  text-transform: capitalize;

}



@media (max-width: 575px) {

  .countdown-time {

    padding: 0px 12px;

  }

  .countdown-time:first-child {

    padding-right: 0px;

  }

  .countdown-time:last-child {

    padding-left: 0px;

  }

  .countdown-time span {

    font-size: 35px;

  }

  .countdown-time small {

    font-size: 16px;

  }

}



/*========================================

          ALL ELEMENTS PART STYLE

=========================================*/

.suggest-card {

  position: relative;

}



.suggest-card::before {

  position: absolute;

  content: "";

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  border-radius: 8px;

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.suggest-card:hover::before {

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

}



.suggest-card img {

  width: 100%;

  border-radius: 8px;

}



.suggest-card h5 {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  text-align: center;

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

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

  color: var(--white);

  font-weight: 400;

  text-transform: capitalize;

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

}



.suggest-card h5 span {

  display: block;

  font-size: 15px;

  font-weight: 300;

}



@media (max-width: 400px) {

  .suggest-card h5 {

    font-size: 16px;

    line-height: 24px;

  }

  .suggest-card h5 span {

    font: 14px;

  }

}



.product-card {

  width: 100%;

  overflow: hidden;

  position: relative;

  margin-bottom: 25px;

  padding: 15px 18px;

  border-radius: 8px;

  background: var(--white);

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.product-card:hover {

  border-color: var(--primary);

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

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

}



.product-card:hover .product-widget {

  opacity: 1;

  bottom: 15px;

}



.product-card:hover .product-add {

  color: var(--white);

  background: var(--primary);

}



.product-media {

  position: relative;

}



.product-label {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  position: absolute;

  top: 0px;

  right: 0px;

}



.label-text {

  font-size: 14px;

  padding: 5px 8px;

  line-height: 13px;

  border-radius: 3px;

  margin-bottom: 5px;

  color: var(--white);

  text-align: center;

  text-transform: capitalize;

}



.label-text.off {

  background: var(--red);

}



.label-text.new {

  background: var(--green);

}



.label-text.sale {

  background: var(--orange);

}



.label-text.feat {

  background: var(--purple);

}



.label-text.rate {

  background: var(--yellow);

}



.label-text.order {

  background: var(--blue);

}



.product-wish {

  position: absolute;

  top: 0px;

  left: 0px;

  font-size: 18px;

  color: var(--gray-chalk);

}



.product-wish.active {

  color: var(--primary);

}



.product-image img {

  width: 100%;

}



.product-widget {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  position: absolute;

  bottom: 0px;

  left: 0px;

  width: 100%;

  opacity: 0;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.product-widget a {

  width: 40px;

  height: 40px;

  font-size: 15px;

  margin: 0px 6px;

  line-height: 40px;

  text-align: center;

  border-radius: 8px;

  color: var(--white);

  background: var(--primary);

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

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

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

}



.product-content {

  padding-top: 12px;

  text-align: center;

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

}



.product-rating {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  margin-bottom: 3px;

}



.product-rating i,

.product-rating a {

  font-size: 14px;

  margin: 0px 2px;

  color: var(--gray);

}



.product-rating a {

  white-space: nowrap;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.product-rating a:hover {

  color: var(--primary);

  text-decoration: underline;

}



.product-rating .active {

  color: var(--yellow);

}



.product-name {

  margin-bottom: 3px;

  text-transform: capitalize;

}



.product-name a {

  color: var(--sub-heading);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.product-name a:hover {

  color: var(--primary);

}



.product-price {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-align: baseline;

      -ms-flex-align: baseline;

          align-items: baseline;

  margin-bottom: 13px;

}



.product-price del {

  color: var(--red);

  margin-left: 8px;

}



.product-price span {

  color: var(--primary);

  white-space: nowrap;

}



.product-price span small {

  font-weight: 400;

}



.product-disable {

  position: relative;

}



.product-disable:hover {

  border-color: var(--border);

  -webkit-box-shadow: none;

          box-shadow: none;

}



.product-disable:hover .product-add {

  color: var(--heading);

  background: var(--border);

}



.product-disable .product-widget {

  visibility: hidden;

}



.product-disable::before {

  position: absolute;

  content: "נגמר המלאי";

  top: 40%;

  left: 50%;

  z-index: 2;

  width: 100%;

  font-size: 15px;

  font-weight: 400;

  padding: 15px 0px;

  text-align: center;

  text-transform: uppercase;

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

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

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

  color: var(--white);

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

}



.product-disable::after {

  position: absolute;

  content: "";

  top: 0px;

  right: 0px;

  z-index: 1;

  width: 100%;

  height: 100%;

  border-radius: 8px;

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

}



@media (max-width: 575px) {

  .product-card {

    padding: 8px;

    margin-bottom: 8px;

  }

  .product-name {

    font-size: 15px;

    line-height: 22px;

  }

}



.feature-card {

  width: 100%;

  overflow: hidden;

  position: relative;

  margin-bottom: 25px;

  padding: 18px 18px;

  border-radius: 8px;

  background: var(--white);

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: start;

      -ms-flex-align: start;

          align-items: flex-start;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.feature-card:hover {

  border-color: var(--primary);

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

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

}



.feature-card:hover .feature-widget {

  opacity: 1;

  bottom: 15px;

}



.feature-card:hover .feature-add {

  color: var(--white);

  background: var(--primary);

}



.feature-media {

  position: relative;

}



.feature-label {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  position: absolute;

  top: 0px;

  right: 0px;

}



.label-text {

  font-size: 14px;

  padding: 5px 8px;

  line-height: 13px;

  border-radius: 3px;

  margin-bottom: 5px;

  color: var(--white);

  text-align: center;

  text-transform: capitalize;

}



.label-text.off {

  background: var(--red);

}



.label-text.new {

  background: var(--green);

}



.label-text.sale {

  background: var(--orange);

}



.label-text.feat {

  background: var(--purple);

}



.label-text.rate {

  background: var(--yellow);

}



.label-text.order {

  background: var(--blue);

}



.feature-wish {

  position: absolute;

  top: 0px;

  left: 0px;

  font-size: 18px;

  color: var(--gray-chalk);

}



.feature-wish.active {

  color: var(--primary);

}



.feature-image img {

  width: 220px;

}



.feature-widget {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  position: absolute;

  bottom: 0px;

  right: 0px;

  width: 100%;

  opacity: 0;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.feature-widget a {

  width: 40px;

  height: 40px;

  font-size: 15px;

  margin: 0px 6px;

  line-height: 40px;

  text-align: center;

  border-radius: 8px;

  color: var(--white);

  background: var(--primary);

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

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

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

}



.feature-content {

  width: 100%;

  padding-right: 25px;

  margin-right: 25px;

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

}



.feature-rating {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  margin-bottom: 3px;

}



.feature-rating i,

.feature-rating a {

  font-size: 14px;

  margin: 0px 2px;

  color: var(--gray);

}



.feature-rating a {

  white-space: nowrap;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.feature-rating a:hover {

  color: var(--primary);

  text-decoration: underline;

}



.feature-rating .active {

  color: var(--yellow);

}



.feature-name {

  margin-bottom: 3px;

  text-transform: capitalize;

}



.feature-name a {

  color: var(--sub-heading);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.feature-name a:hover {

  color: var(--primary);

}



.feature-price {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  -webkit-box-align: baseline;

      -ms-flex-align: baseline;

          align-items: baseline;

  margin-bottom: 10px;

}



.feature-price del {

  color: var(--red);

  margin-left: 8px;

}



.feature-price span {

  color: var(--primary);

  white-space: nowrap;

}



.feature-price span small {

  font-weight: 400;

}



.feature-desc {

  font-size: 15px;

  line-height: 25px;

  margin-bottom: 15px;

}



@media (max-width: 575px) {

  .feature-card {

    padding: 8px;

    margin-bottom: 15px;

  }

  .feature-image img {

    width: 100%;

  }

  .feature-name {

    font-size: 15px;

    line-height: 22px;

  }

}



@media (max-width: 450px) {

  .feature-card {

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

  }

  .feature-content {

    padding-right: 12px;

    margin-right: 12px;

  }

  .feature-desc {

    display: none;

  }

}



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

  .feature-image img {

    width: 190px;

  }

}



.product-standard {

  width: 100%;

  overflow: hidden;

  position: relative;

  margin-bottom: 25px;

  padding: 15px 15px;

  border-radius: 8px;

  background: var(--white);

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.product-standard:hover {

  border-color: var(--primary);

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

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

}



.product-standard:hover .standard-widget {

  opacity: 1;

  bottom: 15px;

}



.product-standard:hover .standard-add {

  color: var(--white);

  background: var(--primary);

}



.standard-media {

  position: relative;

}



.standard-label-group {

  position: absolute;

  top: 15px;

  right: 15px;

  z-index: 1;

}



.standard-label {

  font-size: 14px;

  padding: 5px 8px;

  line-height: 13px;

  border-radius: 3px;

  text-transform: capitalize;

  color: var(--white);

}



.standard-label.off {

  background: var(--red);

}



.standard-label.new {

  background: var(--green);

}



.standard-label.sale {

  background: var(--orange);

}



.standard-label.feat {

  background: var(--purple);

}



.standard-label.rate {

  background: var(--yellow);

}



.standard-image img {

  width: 220px;

}



.standard-widget {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  position: absolute;

  bottom: 0px;

  left: 0px;

  width: 100%;

  opacity: 0;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.standard-widget a {

  width: 40px;

  height: 40px;

  font-size: 15px;

  margin: 0px 6px;

  line-height: 40px;

  text-align: center;

  border-radius: 8px;

  color: var(--white);

  background: var(--primary);

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

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

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

}



.standard-content {

  width: 100%;

  margin-right: 30px;

  padding-right: 30px;

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

}



.standard-name {

  margin-bottom: 5px;

  text-transform: capitalize;

}



.standard-name a {

  color: var(--sub-heading);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.standard-name a:hover {

  color: var(--primary);

}



.standard-price {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  -webkit-box-align: baseline;

      -ms-flex-align: baseline;

          align-items: baseline;

  margin-bottom: 5px;

}



.standard-price del {

  color: var(--red);

  margin-left: 12px;

}



.standard-price span {

  color: var(--primary);

  white-space: nowrap;

}



.standard-price span small {

  font-weight: 400;

}



.standard-rating {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  margin-bottom: 10px;

}



.standard-rating i,

.standard-rating a {

  font-size: 14px;

  margin-left: 3px;

  color: var(--gray);

}



.standard-rating a {

  white-space: nowrap;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.standard-rating a:hover {

  color: var(--primary);

  text-decoration: underline;

}



.standard-rating .active {

  color: var(--yellow);

}



.standard-desc {

  margin-bottom: 20px;

}



.standard-action-group {

  display: -ms-grid;

  display: grid;

  grid-gap: 15px;

  -ms-grid-columns: (minmax(180px, 1fr))[auto-fit];

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

}



.standard-action-group .product-add,

.standard-action-group .action-input {

  padding: 10px 0px;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  color: var(--white);

  background: var(--primary);

}



.standard-action-group .product-add {

  font-size: 14px;

  font-weight: 500;

}



.standard-wish {

  padding: 10px 0px;

  border-radius: 8px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.standard-wish i {

  font-size: 16px;

  margin-left: 6px;

}



.standard-wish span {

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}



.standard-wish {

  color: var(--primary);

  background: var(--border);

}



.standard-wish.active {

  color: var(--white);

  background: var(--primary);

}



.standard-action {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  display: none;

}



.standard-action button i,

.standard-action a i {

  width: 35px;

  height: 35px;

  font-size: 15px;

  line-height: 35px;

  border-radius: 5px;

  text-align: center;

  display: inline-block;

  color: var(--text);

  background: var(--border);

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.standard-action button i:hover,

.standard-action a i:hover {

  color: var(--white);

  background: var(--primary);

}



.standard-action input {

  width: 100%;

  height: 45px;

  margin: 0px 8px;

  font-size: 15px;

  line-height: 14px;

  border-radius: 5px;

  letter-spacing: 0.3px;

  text-align: center;

  color: var(--white);

  background: var(--primary);

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

}



@media (max-width: 575px) {

  .product-standard {

    padding: 10px 10px;

  }

  .standard-image img {

    width: 130px;

  }

  .standard-content {

    margin-right: 10px;

    padding-right: 10px;

  }

  .standard-name {

    font-size: 16px;

    margin-bottom: 3px;

  }

  .standard-price {

    font-size: 15px;

    margin-bottom: 3px;

  }

  .standard-rating {

    margin-bottom: 6px;

  }

  .standard-desc {

    display: none;

  }

  .standard-action-group {

    grid-gap: 10px;

    -ms-grid-columns: (minmax(140px, 1fr))[auto-fit];

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

  }

  .product-add,

  .standard-wish {

    padding: 8px 0px;

  }

  .product-add i,

  .standard-wish i {

    display: none;

  }

  .standard-action input {

    height: 38px;

  }

}



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

  .standard-image img {

    width: 150px;

  }

  .standard-content {

    margin-right: 10px;

    padding-right: 10px;

  }

  .standard-name {

    font-size: 18px;

  }

  .standard-price {

    font-size: 16px;

  }

  .standard-desc {

    display: none;

  }

  .standard-action-group {

    grid-gap: 10px;

    -ms-grid-columns: (minmax(140px, 1fr))[auto-fit];

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

  }

  .product-add,

  .standard-wish {

    padding: 8px 0px;

  }

  .product-add i,

  .standard-wish i {

    display: none;

  }

  .standard-action input {

    height: 38px;

  }

}



.testimonial-card {

  padding: 50px 50px 0px;

  margin: 0px 15px 30px;

  text-align: center;

  border-radius: 8px;

  background: var(--primary);

}



.testimonial-card i {

  font-size: 45px;

  margin-bottom: 20px;

  color: var(--white);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.testimonial-card p {

  font-size: 22px;

  line-height: 32px;

  margin-bottom: 25px;

  font-style: italic;

  color: var(--white);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.testimonial-card h5 {

  color: var(--white);

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.testimonial-card ul {

  font-size: 14px;

  color: var(--yellow);

  margin-bottom: 13px;

}



.testimonial-card img {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  margin-bottom: -35px;

  display: inline-block;

  border: 5px solid var(--body);

}



@media (max-width: 575px) {

  .testimonial-card {

    margin: 0px 0px 30px;

    padding: 25px 25px 0px;

  }

  .testimonial-card p {

    font-size: 18px;

    line-height: 28px;

  }

}



.category-wrap:hover .category-overlay {

  -webkit-transform: scale(1);

          transform: scale(1);

}



.category-media {

  position: relative;

  margin-bottom: 15px;

}



.category-media img {

  width: 100%;

  height: auto;

  border-radius: 8px;

}



.category-overlay {

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  border-radius: 8px;

  text-align: center;

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

  -webkit-transform: scale(0);

          transform: scale(0);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.category-overlay a i {

  width: 50px;

  height: 50px;

  line-height: 50px;

  border-radius: 50%;

  text-align: center;

  color: var(--white);

  background: var(--primary);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.category-overlay a i:hover {

  color: var(--primary);

  background: var(--white);

}



.category-meta {

  padding: 0px 10px;

}



.category-meta h4 {

  text-transform: capitalize;

  margin-bottom: 3px;

}



@media (max-width: 575px) {

  .category-wrap {

    width: 150px;

  }

}



@media (max-width: 1199px) {

  .category-meta {

    padding: 0px 5px;

  }

  .category-meta h4 {

    font-size: 17px;

    margin-bottom: 0px;

  }

  .category-meta p {

    font-size: 15px;

  }

}



.brand-wrap {

  text-align: center;

  padding-top: 15px;

}



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

  border-color: var(--primary);

  -webkit-animation-play-state: running;

          animation-play-state: running;

}



.brand-wrap:hover .brand-overlay {

  -webkit-transform: scale(1);

          transform: scale(1);

}



.brand-media {

  display: inline-block;

  position: relative;

  margin-bottom: 15px;

  z-index: 1;

}



.brand-media::before {

  position: absolute;

  content: "";

  top: 50%;

  left: 50%;

  z-index: -1;

  width: 175px;

  height: 175px;

  border-radius: 50%;

  background: var(--white);

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

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

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

  -webkit-animation: rotate360 1.2s linear infinite;

          animation: rotate360 1.2s linear infinite;

  -webkit-animation-play-state: paused;

          animation-play-state: paused;

}



.brand-media img {

  width: 150px;

  height: 150px;

  border-radius: 50%;

}



@-webkit-keyframes rotate360 {

  to {

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

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

  }

}



@keyframes rotate360 {

  to {

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

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

  }

}



.brand-overlay {

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  text-align: center;

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

  -webkit-transform: scale(0);

          transform: scale(0);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.brand-overlay a i {

  width: 50px;

  height: 50px;

  line-height: 50px;

  border-radius: 50%;

  text-align: center;

  color: var(--white);

  background: var(--primary);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.brand-overlay a i:hover {

  color: var(--primary);

  background: var(--white);

}



.brand-meta h4 {

  text-transform: capitalize;

  margin-bottom: 3px;

}



@media (max-width: 575px) {

  .brand-wrap {

    width: 200px;

  }

}



.choose-card {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}



.choose-card:hover i {

  color: var(--white);

  background: var(--primary);

}



.choose-icon i {

  width: 75px;

  height: 75px;

  font-size: 40px;

  line-height: 75px;

  border-radius: 50%;

  margin-left: 30px;

  text-align: center;

  display: inline-block;

  color: var(--primary);

  background: var(--white);

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

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.choose-text h4 {

  margin-bottom: 10px;

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-card {

  margin-bottom: 30px;

}



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

  -webkit-transform: scale(1.05);

          transform: scale(1.05);

}



.blog-media {

  position: relative;

}



.blog-calender {

  position: absolute;

  top: 20px;

  left: 20px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  width: 55px;

  height: 55px;

  border-radius: 6px;

  color: var(--white);

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

}



.blog-calender span {

  line-height: 20px;

}



.blog-date {

  font-size: 20px;

  font-weight: 500;

}



.blog-month {

  font-size: 14px;

  letter-spacing: 0.3px;

  text-transform: uppercase;

}



.blog-img {

  overflow: hidden;

  border-radius: 8px;

}



.blog-img img {

  width: 100%;

  border-radius: 8px;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-content {

  padding: 15px 15px 0px;

}



.blog-meta {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;

  margin-bottom: 15px;

}



.blog-meta li {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  margin-left: 30px;

}



.blog-meta li:last-child {

  margin: 0px;

}



.blog-meta li i {

  color: var(--primary);

  margin-left: 8px;

  font-size: 14px;

}



.blog-meta li a,

.blog-meta li span {

  font-size: 15px;

  font-weight: 400;

  white-space: nowrap;

  text-transform: uppercase;

}



.blog-meta li a {

  color: var(--text);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-meta li a:hover {

  color: var(--primary);

}



.blog-title {

  font-size: 22px;

  line-height: 30px;

  margin-bottom: 15px;

}



.blog-title a {

  color: var(--heading);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-title a:hover {

  color: var(--primary);

}



.blog-desc {

  font-size: 17px;

  line-height: 28px;

  color: var(--gray);

  margin-bottom: 25px;

}



.blog-btn {

  font-size: 15px;

  font-weight: 500;

  color: var(--primary);

  text-transform: uppercase;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-btn i {

  font-size: 17px;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-btn:hover {

  color: var(--primary);

  text-decoration: underline;

}



.blog-btn:hover i {

  margin-right: 5px;

}



@media (max-width: 575px) {

  .blog-meta li {

    margin-left: 25px;

  }

  .blog-content {

    padding: 15px 8px 0px;

  }

}



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

  .blog-content {

    padding: 15px 12px 0px;

  }

}



.offer-card {

  margin-bottom: 30px;

}



.offer-card a {

  width: 100%;

}



.offer-card a img {

  width: 100%;

  border-radius: 8px;

}



.offer-div {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

  padding: 10px 15px;

  margin: 0px 15px;

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

  background: var(--white);

}



.offer-div h5 {

  font-size: 15px;

  font-weight: 400;

  text-transform: uppercase;

}



.offer-div button,

.offer-div span {

  font-size: 15px;

  font-weight: 500;

  color: var(--primary);

  text-transform: capitalize;

}



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

  .offer-card {

    width: 320px;

    margin: 0px auto 30px;

  }

}



.account-card {

  margin-bottom: 30px;

  border-radius: 8px;

  padding: 0px 30px 30px;

  background: var(--white);

}



.account-title {

  padding: 18px 0px;

  margin-bottom: 25px;

  position: relative;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

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

}



.account-title::before {

  position: absolute;

  content: "";

  bottom: -2px;

  right: 0px;

  width: 50px;

  height: 2px;

  background: var(--primary);

}



.account-title h4 {

  text-transform: capitalize;

}



.account-title button,

.account-title a {

  border: none;

  font-size: 15px;

  font-weight: 500;

  border-radius: 6px;

  letter-spacing: 0.3px;

  padding: 5px 15px;

  white-space: nowrap;

  text-transform: capitalize;

  color: var(--primary);

  background: var(--green-chalk);

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.account-title button:hover,

.account-title a:hover {

  color: var(--white);

  background: var(--primary);

}



@media (max-width: 575px) {

  .account-card {

    padding: 0px 15px 15px;

  }

}



.profile-card {

  padding: 25px;

  border-radius: 8px;

  margin-bottom: 25px;

  background: var(--chalk);

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

  position: relative;

  cursor: pointer;

}



.profile-card:hover ul {

  visibility: visible;

  opacity: 1;

}



.profile-card h6 {

  color: var(--text);

  margin-bottom: 8px;

  text-transform: capitalize;

}



.profile-card p {

  text-transform: capitalize;

}



.profile-card ul {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  position: absolute;

  top: 50%;

  left: 15px;

  opacity: 0;

  visibility: hidden;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.profile-card ul li {

  margin: 5px 0px;

}



.profile-card ul li button {

  width: 30px;

  height: 32px;

  line-height: 32px;

  border-radius: 6px;

  text-align: center;

  display: inline-block;

  background: var(--white);

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

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.profile-card ul .edit {

  color: var(--green);

}



.profile-card ul .edit:hover {

  color: var(--white);

  background: var(--green);

}



.profile-card ul .trash {

  color: var(--red);

}



.profile-card ul .trash:hover {

  color: var(--white);

  background: var(--red);

}



.profile-card.active {

  background: var(--green-chalk);

  border-color: var(--primary);

}



.payment-card {

  padding: 25px;

  border-radius: 6px;

  margin-bottom: 25px;

  background: var(--chalk);

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

  position: relative;

  cursor: pointer;

}



.payment-card:hover button {

  visibility: visible;

  opacity: 1;

}



.payment-card img {

  margin-bottom: 18px;

}



.payment-card h4 {

  font-size: 12px;

  line-height: 20px;

  margin-bottom: 5px;

  text-transform: capitalize;

}



.payment-card p {

  color: var(--heading);

  margin-bottom: 5px;

}



.payment-card p span {

  font-size: 20px;

  margin-left: 15px;

  letter-spacing: 2px;

}



.payment-card p sup {

  font-size: 13px;

  font-weight: 500;

  letter-spacing: 2px;

}



.payment-card h5 {

  font-size: 14px;

  line-height: 22px;

  text-transform: capitalize;

}



.payment-card button {

  position: absolute;

  top: 15px;

  left: 15px;

  opacity: 0;

  visibility: hidden;

  width: 30px;

  height: 32px;

  line-height: 32px;

  border-radius: 6px;

  text-align: center;

  display: inline-block;

  background: var(--white);

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

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.payment-card .trash {

  color: var(--red);

}



.payment-card .trash:hover {

  color: var(--white);

  background: var(--red);

}



.payment-card.active {

  background: var(--green-chalk);

  border-color: var(--primary);

}



@media (max-width: 575px) {

  .payment-card p span {

    margin-left: 8px;

  }

}



.contact-card {

  text-align: center;

  border-radius: 8px;

  margin: 0px 2.5px 30px;

  padding: 60px 15px 55px;

  background: var(--white);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.contact-card:hover {

  background: var(--primary);

}



.contact-card:hover i {

  color: var(--primary);

  background: var(--white);

}



.contact-card:hover h4, .contact-card:hover p, .contact-card:hover a {

  color: var(--white);

}



.contact-card i {

  width: 50px;

  height: 50px;

  font-size: 22px;

  line-height: 50px;

  border-radius: 50%;

  margin-bottom: 15px;

  text-align: center;

  display: inline-block;

  color: var(--white);

  background: var(--primary);

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

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.contact-card h4 {

  margin-bottom: 18px;

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.contact-card p {

  width: 250px;

  font-size: 18px;

  line-height: 30px;

  margin: 0 auto;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.contact-card p a {

  font-size: 18px;

  line-height: 30px;

  display: block;

  color: var(--text);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.contact-card.active {

  background: var(--primary);

}



.contact-card.active i {

  color: var(--primary);

  background: var(--white);

}



.contact-card.active h4, .contact-card.active p, .contact-card.active a {

  color: var(--white);

}



.branch-card {

  margin: 0px 2.5px 30px;

  position: relative;

}



.branch-card:hover::before {

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

}



.branch-card:hover .branch-overlay {

  top: 50%;

}



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

  opacity: 1;

}



.branch-card::before {

  position: absolute;

  content: "";

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  border-radius: 8px;

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.branch-card img {

  width: 100%;

  border-radius: 8px;

}



.branch-overlay {

  position: absolute;

  top: 60%;

  left: 0px;

  width: 100%;

  padding: 0px 15px;

  text-align: center;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.branch-overlay h3 {

  color: var(--white);

  letter-spacing: 0.3px;

  margin-bottom: 8px;

  text-transform: capitalize;

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

}



.branch-overlay p {

  width: 200px;

  margin: 0 auto;

  letter-spacing: 0.3px;

  color: var(--white);

  opacity: 0;

  text-transform: capitalize;

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.team-media {

  overflow: hidden;

  position: relative;

  border-radius: 8px;

}



.team-media:hover img {

  -webkit-transform: scale(1.05);

          transform: scale(1.05);

}



.team-media:hover .team-overlay {

  top: 0px;

  opacity: 1;

}



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

  padding-top: 0px;

}



.team-media img {

  width: 100%;

  border-radius: 8px;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.team-overlay {

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  border-radius: 8px;

  opacity: 0;

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.team-overlay a {

  width: 36px;

  height: 36px;

  font-size: 15px;

  line-height: 36px;

  margin: 0px 5px;

  padding-top: 30px;

  text-align: center;

  border-radius: 50%;

  color: var(--text);

  background: var(--white);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.team-meta {

  text-align: center;

}



.team-meta h5 {

  text-transform: capitalize;

}



.team-meta h5 a {

  color: var(--heading);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.team-meta h5 a:hover {

  color: var(--primary);

}



.team-meta p {

  font-size: 15px;

  text-transform: capitalize;

}



@media (max-width: 575px) {

  .team-card {

    width: 290px;

    margin: 0px auto 50px;

  }

}



/*========================================

         ALL LAYOUTS PART STYLE

=========================================*/

.header-top {

  padding: 8px 0px;

  background: var(--primary);

  border-bottom: 1px solid #2E75A1;

}



.header-top-welcome p {

  font-size: 14px;

  color: var(--white);

  letter-spacing: 0.3px;

}



.header-top-select {

  margin-top: 3px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.header-select {

  width: 100%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

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

}



.header-select:last-child {

  border: none;

}



.header-select i {

  font-size: 16px;

  margin-left: 8px;

  color: var(--white);

}



.header-select .nice-select {

  line-height: 20px;

}



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

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

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

}



.header-select .nice-select .current {

  color: var(--white);

}



.header-top-list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: end;

      -ms-flex-pack: end;

          justify-content: flex-end;

}



.header-top-list li {

  margin-right: 35px;

}



.header-top-list li a {

  font-size: 14px;

  color: var(--white);

  letter-spacing: 0.3px;

  white-space: nowrap;

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.header-top-list li a:hover {

  color: var(--green-chalk);

}



@media (max-width: 767px) {

  .header-top-welcome,

  .header-top-list {

    display: none;

  }

  .header-top-select {

    width: 270px;

    margin: 0px auto;

  }

}



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

  .header-top-welcome {

    text-align: center;

    margin-bottom: 10px;

  }

}



.header-part {

  background: var(--white);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.header-part.active {

  position: -webkit-sticky;

  position: sticky;

  top: 0px;

  left: 0px;

  width: 100%;

  z-index: 3;

  background: var(--white);

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.header-part.active .header-content {

  padding: 15px 0px;

}



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

  background: var(--primary);

}



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

  border-color: var(--white);

}



.header-part.active .header-form {

  background: var(--white);

  border-color: var(--primary);

}



.header-content {

  padding: 18px 0px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.header-logo {

  margin-left: 50px;

}



.header-logo img {

  width: auto;

  height: 45px;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.header-widget-group {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.header-widget-group .header-widget {

  margin-right: 20px;

}



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

  margin-right: 0px;

}



.header-widget {

  position: relative;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.header-widget:hover i {

  color: var(--white);

  background: var(--primary);

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

}



.header-widget:hover span {

  color: var(--primary);

}



.header-widget img {

  width: 40px;

  height: 40px;

  border-radius: 50%;

}



.header-widget i {

  width: 40px;

  height: 40px;

  font-size: 15px;

  line-height: 40px;

  text-align: center;

  display: inline-block;

  border-radius: 50%;

  color: var(--text);

  background: var(--chalk);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.header-widget span {

  font-size: 15px;

  font-weight: 400;

  margin-right: 8px;

  letter-spacing: 0.3px;

  white-space: nowrap;

  text-align: right;

  text-transform: capitalize;

  color: var(--heading);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.header-widget span small {

  font-size: 16px;

  font-weight: 600;

  line-height: 20px;

  font-family: sans-serif;

  display: block;

}



.header-widget sup {

  position: absolute;

  top: -12px;

  right: 20px;

  width: 24px;

  height: 24px;

  font-size: 12px;

  line-height: 20px;

  border-radius: 50%;

  text-align: center;

  color: var(--white);

  background: var(--primary);

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

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

}



.header-cart span {

  font-size: 12px;

  margin-right: 15px;

  line-height: 20px;

  text-transform: uppercase;

}



.header-form {

  width: 100%;

  margin: 0px 50px;

  border-radius: 8px;

  background: var(--chalk);

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.header-form:focus-within {

  background: var(--white);

  border-color: var(--primary);

}



.header-form input {

  width: 100%;

  height: 45px;

  font-size: 15px;

  padding-right: 15px;

  direction: rtl;

}



.header-form button i {

  width: 45px;

  height: 45px;

  font-size: 15px;

  line-height: 45px;

  text-align: center;

  border-radius: 8px;

  color: var(--text);

  display: inline-block;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.header-form button i:hover {

  color: var(--primary);

}



.header-media-group {

  display: none;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

}



.header-media-group a img {

  width: auto;

  height: 45px;

}



.header-user img,

.header-src img {

  width: 40px;

  height: 40px;

  border-radius: 50%;

}



.header-user i,

.header-src i {

  width: 40px;

  height: 40px;

  font-size: 15px;

  line-height: 40px;

  text-align: center;

  display: inline-block;

  border-radius: 50%;

  color: var(--text);

  background: var(--chalk);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.header-user i:hover,

.header-src i:hover {

  color: var(--white);

  background: var(--primary);

}



@media (max-width: 991px) {

  .header-content {

    padding: 10px 0px;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

  }

  .header-media-group {

    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

  }

  .header-widget-group,

  .header-widget,

  .header-logo {

    display: none;

  }

  .header-form {

    display: none;

    margin: 10px 0px 0px;

  }

  .header-form.active {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

  }

}



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

  .header-widget span {

    display: none;

  }

}



.navbar-part {

  background: var(--white);

}



.navbar-content {

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

}



.navbar-list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

}



.navbar-item {

  margin-left: 30px;

}



.navbar-item:last-child {

  margin-left: 0px;

}



.navbar-link {

  padding: 22px 0px;

  font-weight: 500;

  color: var(--text);

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.navbar-link:hover {

  color: var(--primary);

}



.submenu{

  position: absolute;

  z-index: 2;

  right: 0;

  min-width: 200px;

  height: auto;

  transform-origin: 0 0;

  transform: rotateX(-90deg);

  visibility: hidden;

  opacity: 0;

  padding: 10px;

  border-radius: 8px;

  background: var(--white);

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

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.submenu li{

  position: relative;

}



.submenu .submenu{

  position: absolute;

  top: -10px;

  right: 189px;

  padding: 10px;

  border-radius: 8px;

  background: var(--white);

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

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.navbar-list li:hover > .submenu{

  opacity: 1;

  visibility: visible;

  transform: rotateX(0deg);

}



.submenu a{

  width: 100%;

  font-size: 15px;

  line-height: 18px;

  padding: 8px 15px;

  color: var(--text);

  background: var(--white);

  white-space: nowrap;

  text-transform: capitalize;

  display: block;

}



.submenu li a:hover {

  color: var(--primary);

  background: var(--chalk);

}



.submenu::before{

  position: absolute;

  z-index: -1;

  top: -7px;

  right: 12px;

  width: 12px;

  height: 12px;

  border-radius: 3px;

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

  background: var(--white);

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

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

}



.navbar-focus-list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: end;

      -ms-flex-pack: end;

          justify-content: flex-end;

}



.navbar-focus-list li {

  margin-right: 30px;

}



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

  margin-right: 0px;

}



.navbar-focus-list li a {

  font-weight: 500;

  color: var(--text);

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.navbar-focus-list li a:hover {

  color: var(--primary);

}



.navbar-focus-list li a i {

  font-size: 18px;

  margin-left: 5px;

}



.navbar-info-group {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.navbar-info {

  margin-left: 30px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

}



.navbar-info:last-child {

  margin-left: 0px;

}



.navbar-info i {

  font-size: 30px;

  margin-left: 15px;

  color: var(--primary);

}



.navbar-info p small {

  font-size: 14px;

  line-height: 16px;

  display: block;

  text-align: right;

  text-transform: capitalize;

}



.navbar-info p span {

  font-size: 15px;

  font-weight: 500;

}



@media (max-width: 991px) {

  .navbar-part {

    display: none;

  }

}



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

  .navbar-list li {

    margin-left: 18px;

  }

  .navbar-link {

    font-size: 15px;

  }

  .navbar-info {

    margin-left: 15px;

  }

  .navbar-info p span {

    font-size: 14px;

  }

  .navbar-info i {

    margin-left: 10px;

  }

}



.nav-sidebar {

  position: fixed;

  top: 0px;

  left: -320px;

  width: 280px;

  height: 100vh;

  padding: 0px;

  z-index: 5;

  background: var(--white);

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.nav-sidebar.active {

  left: 0px;

}



.nav-header {

  padding: 15px 0px;

  position: relative;

  text-align: center;

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

}



.nav-header a img {

  width: auto;

  height: 40px;

}



.nav-close {

  position: absolute;

  top: 50%;

  right: -18px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.nav-close i {

  width: 35px;

  height: 35px;

  font-size: 18px;

  line-height: 35px;

  border-radius: 50%;

  text-align: center;

  display: inline-block;

  color: var(--text);

  background: var(--white);

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.nav-close i:hover {

  color: var(--white);

  background: var(--primary);

}



.nav-content {

  padding: 0px 18px;

  overflow-y: scroll;

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

}



.nav-btn {

  width: 100%;

  padding: 50px 0px;

  margin-bottom: 20px;

  text-align: center;

  background: var(--chalk);

}



.nav-btn .btn {

  font-size: 14px;

  padding: 12px 28px;

  letter-spacing: 0.3px;

}



.nav-btn .btn i {

  font-size: 14px;

}



.nav-profile {

  width: 100%;

  text-align: center;

  padding: 18px 0px 0px;

}



.nav-user {

  margin-bottom: 10px;

  border-radius: 50%;

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

}



.nav-user img {

  width: 85px;

  height: 85px;

  border-radius: 50%;

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

}



.nav-name {

  margin-bottom: 18px;

  text-transform: capitalize;

}



.nav-name a {

  color: var(--heading);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.nav-name a:hover {

  color: var(--primary);

}



.nav-select-group {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  padding-bottom: 18px;

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

}



.nav-select {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  margin-right: 18px;

  padding-right: 18px;

  line-height: 20px;

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

}



.nav-select:last-child {

  padding: 0px;

  margin: 0px;

  border: none;

}



.nav-select i {

  margin-right: 5px;

}



.nav-list {

  width: 100%;

}



.nav-list li {

  width: 100%;

}



.nav-link {

  width: 100%;

  font-weight: 500;

  padding: 12px 15px;

  border-radius: 8px;

  color: var(--text);

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.nav-link:hover {

  color: var(--primary);

  background: var(--chalk);

}



.nav-link::before {

  right: 15px;

}



.nav-link i {

  font-size: 20px;

  margin-right: 12px;

}



.nav-link.active {

  color: var(--primary);

  background: var(--green-chalk);

}



.nav-info-group {

  padding: 20px 0px;

  margin-top: 15px;

  margin-bottom: 25px;

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

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

}



.nav-info {

  margin-bottom: 20px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

}



.nav-info:last-child {

  margin-bottom: 0px;

}



.nav-info i {

  font-size: 30px;

  margin-right: 15px;

  color: var(--primary);

}



.nav-info p small {

  font-size: 14px;

  line-height: 18px;

  display: block;

  text-align: left;

  text-transform: capitalize;

}



.nav-info p span {

  font-size: 16px;

  font-weight: 500;

}



.nav-footer {

  text-align: center;

}



.nav-footer p {

  font-size: 14px;

  color: var(--gray);

}



.nav-footer p a {

  color: var(--primary);

}



.cart-sidebar {

  position: fixed;

  top: 0px;

  right: -450px;

  width: 400px;

  height: 100vh;

  z-index: 5;

  background: var(--white);

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.cart-sidebar.active {

  right: 0px;

}



.cart-header {

  padding: 18px 25px;

  text-align: center;

  position: relative;

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

}



.cart-total {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.cart-total i {

  font-size: 20px;

  margin-right: 8px;

  color: var(--primary);

}



.cart-total span {

  font-weight: 500;

  color: var(--primary);

  text-transform: capitalize;

}



.cart-close {

  position: absolute;

  top: 50%;

  left: -18px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.cart-close i {

  width: 35px;

  height: 35px;

  font-size: 18px;

  line-height: 35px;

  border-radius: 50%;

  text-align: center;

  display: inline-block;

  color: var(--text);

  background: var(--white);

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.cart-close i:hover {

  color: var(--white);

  background: var(--primary);

}



.cart-list {

  height: 100%;

  padding: 0px 15px;

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

  overflow-y: scroll;

}



.cart-item {

  padding: 15px 0px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-align: start;

      -ms-flex-align: start;

          align-items: flex-start;

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

}



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

  -webkit-transform: scale(1);

          transform: scale(1);

}



.cart-item:last-child {

  border-bottom: none;

}



.cart-media {

  position: relative;

  margin-right: 25px;

}



.cart-media a img {

  width: 100px;

  border-radius: 8px;

}



.cart-media button {

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  border-radius: 8px;

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

  -webkit-transform: scale(0);

          transform: scale(0);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.cart-media button i {

  width: 32px;

  height: 32px;

  font-size: 18px;

  line-height: 32px;

  text-align: center;

  border-radius: 5px;

  display: inline-block;

  color: var(--red);

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.cart-media button i:hover {

  color: var(--white);

  background: var(--red);

}



.cart-info-group {

  width: 100%;

}



.cart-info {

  margin-bottom: 13px;

}



.cart-info h6 {

  font-weight: 400;

  text-transform: capitalize;

}



.cart-info h6 a {

  color: var(--heading);

}



.cart-info p {

  font-size: 14px;

}



.cart-action-group {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

}



.cart-action-group .product-action {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}



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

  width: 30px;

  height: 30px;

  font-size: 12px;

  line-height: 30px;

  border-radius: 5px;

}



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

  width: 45px;

  height: 30px;

  font-size: 14px;

  border-radius: 5px;

  color: var(--primary);

  background: var(--chalk);

}



.cart-action-group h6 {

  font-weight: 500;

  color: var(--primary);

}



.cart-footer {

  padding: 20px 15px 0px;

  text-align: center;

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

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

}



.coupon-btn {

  font-weight: 500;

  margin-bottom: 20px;

  color: var(--primary);

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

}



.coupon-btn:hover {

  text-decoration: underline;

}



.coupon-form {

  padding: 3px;

  border-radius: 8px;

  margin-bottom: 18px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

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

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

  display: none;

}



.coupon-form:focus-within {

  border-color: var(--primary);

}



.coupon-form input {

  width: 100%;

  height: 38px;

  padding: 0px 15px;

}



.coupon-form a span {

  width: 100px;

  height: 38px;

  font-size: 14px;

  line-height: 38px;

  border-radius: 8px;

  display: block;

  text-align: center;

  text-transform: uppercase;

  color: var(--white);

  background: var(--primary);

  cursor: pointer;

}



.cart-checkout-btn {

  padding: 10px 0px;

  border-radius: 8px;

  background: var(--primary);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.cart-checkout-btn:hover {

  background: var(--heading);

}



.checkout-label {

  width: 100%;

  height: 30px;

  font-size: 15px;

  line-height: 30px;

  letter-spacing: 0.3px;

  text-align: center;

  text-transform: capitalize;

  color: var(--white);

}



.checkout-price {

  padding: 0px 25px;

  letter-spacing: 0.3px;

  color: var(--white);

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

}



@media (max-width: 450px) {

  .cart-sidebar {

    right: 0px;

    width: 100%;

    height: 100vh;

    -webkit-transform: scale(0);

            transform: scale(0);

    margin: 80px 0px 0px;

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

    transition: all linear .3s;

    -webkit-transition: all linear .3s;

    -moz-transition: all linear .3s;

    -ms-transition: all linear .3s;

    -o-transition: all linear .3s;

  }

  .cart-sidebar.active {

    -webkit-transform: scale(1);

            transform: scale(1);

    -webkit-transform-origin: top;

            transform-origin: top;

  }

  .cart-close {

    left: 50%;

    top: -45px;

    bottom: inherit;

    -webkit-transform: translateX(-50%);

            transform: translateX(-50%);

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

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

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

  }

  .cart-list {

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

  }

  .cart-media a img {

    width: 80px;

  }

}



.category-sidebar {

  position: fixed;

  top: 0px;

  left: -320px;

  width: 280px;

  height: 100vh;

  z-index: 5;

  background: var(--white);

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.category-sidebar.active {

  left: 0px;

}



.category-header {

  padding: 15px 18px;

  position: relative;

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

}



.category-title {

  color: var(--primary);

  text-transform: capitalize;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

}



.category-title i {

  margin-right: 8px;

}



.category-close {

  position: absolute;

  top: 50%;

  right: -18px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.category-close i {

  width: 35px;

  height: 35px;

  font-size: 18px;

  line-height: 35px;

  border-radius: 50%;

  text-align: center;

  display: inline-block;

  color: var(--text);

  background: var(--white);

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.category-close i:hover {
  color: var(--white);
  background: var(--primary);
}



.category-list {
  width: 100%;
  padding: 0px 15px;
  overflow-y: scroll;
  height: calc(100vh - 130px);
}

.category-item {
  width: 100%;
  border-bottom: 1px solid var(--border);
}

.category-link {
  font-size: 16px;
  font-weight: 400;
  padding: 12px 15px;
  color: var(--text);
  text-transform: capitalize;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}



.category-link i {

  font-size: 25px;

  margin-right: 15px;

  display: inline-block;

}



.category-footer {

  text-align: center;

  margin-top: 20px;

}



.category-footer p {

  font-size: 14px;

  color: var(--gray);

}



.category-footer p a {

  color: var(--primary);

}



.mobile-menu {

  position: fixed;

  bottom: 0px;

  left: 0px;

  width: 100%;

  z-index: 3;

  background: var(--white);

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

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

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

  display: none;

}



.mobile-menu a,

.mobile-menu button {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  width: 80px;

  padding: 8px 0px;

  border-radius: 8px;

  position: relative;

}



.mobile-menu a:hover,

.mobile-menu button:hover {

  background: var(--chalk);

}



.mobile-menu a:hover i,

.mobile-menu button:hover i {

  color: var(--primary);

}



.mobile-menu a:hover span,

.mobile-menu button:hover span {

  color: var(--primary);

}



.mobile-menu a i,

.mobile-menu button i {

  font-size: 15px;

  margin-bottom: 5px;

  color: var(--text);

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

}



.mobile-menu a span,

.mobile-menu button span {

  font-size: 10px;

  line-height: 12px;

  color: var(--text);

  text-transform: uppercase;

}



.mobile-menu a sup,

.mobile-menu button sup {

  position: absolute;

  top: -5px;

  left: 75%;

  width: 24px;

  height: 24px;

  font-size: 12px;

  line-height: 20px;

  border-radius: 50%;

  text-align: center;

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

  color: var(--white);

  background: var(--primary);

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

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

}



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

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

  font-size: 18px;

}



@media (max-width: 991px) {

  .mobile-menu {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

  }

}



.product-view {

  max-width: 1000px;

  border-radius: 8px;

  background: var(--white);

}



.view-gallery {

  margin: 30px;

  position: relative;

}



.view-label-group {

  position: absolute;

  top: 0px;

  left: 0px;

  z-index: 1;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

}



.view-label {

  font-size: 15px;

  padding: 6px 10px;

  margin-bottom: 6px;

  line-height: 13px;

  border-radius: 3px;

  text-align: center;

  text-transform: capitalize;

  color: var(--white);

}



.view-label:last-child {

  margin-bottom: 0px;

}



.view-label.off {

  background: var(--red);

}



.view-label.new {

  background: var(--green);

}



.view-label.sale {

  background: var(--orange);

}



.view-label.feat {

  background: var(--purple);

}



.view-label.rate {

  background: var(--yellow);

}



.view-details {

  margin: 30px;

}



.view-name {

  font-size: 26px;

  line-height: 34px;

  margin-bottom: 5px;

  text-transform: capitalize;

}



.view-name a {

  color: var(--heading);

}



.view-name a:hover {

  color: var(--primary);

}



.view-meta {

  margin-bottom: 12px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

}



.view-meta p {

  font-size: 13px;

  margin-right: 20px;

  text-transform: uppercase;

  color: var(--placeholder);

}



.view-meta span,

.view-meta a {

  margin-left: 5px;

  color: var(--placeholder);

}



.view-meta a:hover {

  text-decoration: underline;

  color: var(--primary);

}



.view-rating {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  margin-bottom: 15px;

}



.view-rating i,

.view-rating a {

  font-size: 15px;

  margin-right: 3px;

  color: var(--gray);

}



.view-rating a {

  margin-left: 8px;

  white-space: nowrap;

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.view-rating a:hover {

  color: var(--primary);

  text-decoration: underline;

}



.view-rating .active {

  color: var(--yellow);

}



.view-price {

  margin-bottom: 20px;

}



.view-price del {

  color: var(--red);

  margin-right: 25px;

}



.view-price span {

  color: var(--primary);

}



.view-price span small {

  font-size: 14px;

  font-weight: 400;

  text-transform: capitalize;

}



.view-desc {

  margin-bottom: 25px;

}



.view-list-group {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  margin-bottom: 25px;

}



.view-list-group:last-child {

  margin-bottom: 0px;

}



.view-list-title {

  font-weight: 500;

  margin-right: 15px;

  color: var(--heading);

  text-transform: capitalize;

}



.view-tag-list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.view-tag-list li {

  margin-right: 8px;

}



.view-tag-list li a {

  font-size: 14px;

  line-height: 12px;

  padding: 8px 10px;

  border-radius: 5px;

  letter-spacing: 0.3px;

  text-transform: capitalize;

  color: var(--text);

  background: var(--chalk);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.view-tag-list li a:hover {

  color: var(--white);

  background: var(--primary);

}



.view-share-list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.view-share-list li {

  margin-right: 8px;

}



.view-share-list li a {

  width: 35px;

  height: 35px;

  font-size: 16px;

  line-height: 35px;

  border-radius: 50%;

  text-align: center;

  color: var(--text);

  background: var(--chalk);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.view-share-list li a:hover {

  color: var(--white);

  background: var(--primary);

}



.view-add-group {

  margin: 45px 0px 15px;

}



.view-add-group .product-add,

.view-add-group .action-input {

  height: 46px;

  line-height: 46px;

  letter-spacing: 0.3px;

  text-transform: uppercase;

  color: var(--white);

  background: var(--primary);

}



.view-action-group {

  display: -ms-grid;

  display: grid;

  grid-gap: 15px;

  -ms-grid-columns: (minmax(200px, 1fr))[auto-fit];

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

  position: relative;

}



.view-action-group a {

  padding: 10px 0px;

  border-radius: 8px;

  color: var(--text);

  background: var(--border);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.view-action-group a i {

  font-size: 16px;

  margin-right: 8px;

}



.view-action-group a span {

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}



.view-wish.active {

  color: var(--white);

  background: var(--primary);

}



.preview-slider {

  margin-bottom: 20px;

}



.preview-slider li img {

  width: 100%;

  border-radius: 8px;

}



.thumb-slider li {

  margin: 0px 10px;

  cursor: pointer;

}



.thumb-slider li img {

  width: 100%;

  border-radius: 8px;

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

}



.thumb-slider .slick-center img {

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

}



@media (max-width: 500px) {

  .view-gallery,

  .view-details {

    margin: 25px;

  }

  .view-list-group {

    -webkit-box-align: start;

        -ms-flex-align: start;

            align-items: flex-start;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

  }

  .view-list-title {

    margin: 0px 0px 10px;

  }

}



@media (max-width: 767px) {

  .product-view {

    max-width: 480px;

  }

}



.countdown-part {

  padding: 80px 0px;

  background: -webkit-gradient(linear, right top, left top, from(#c3ffda), to(#a1f3c0));

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

}



.countdown-content {

  text-align: center;

}



.countdown-content h3 {

  font-size: 40px;

  font-weight: 700;

  line-height: 48px;

  text-transform: uppercase;

  margin-bottom: 12px;

}



.countdown-content p {

  margin-bottom: 38px;

}



.countdown-clock {

  margin-bottom: 45px;

}



.countdown-img {

  position: relative;

}



.countdown-img img {

  width: 100%;

}



.countdown-off {

  width: 120px;

  height: 120px;

  border-radius: 50%;

  padding: 35px 30px 30px;

  background: var(--red);

  position: absolute;

  top: 0px;

  right: 0px;

}



.countdown-off span {

  display: block;

  text-transform: uppercase;

  font-size: 30px;

  font-weight: 500;

  letter-spacing: 0.5px;

  color: var(--white);

}



@media (max-width: 767px) {

  .countdown-part {

    padding: 60px 0px;

  }

  .countdown-img {

    margin-top: 30px;

  }

}



.news-part {

  background-size: cover !important;

  padding: 70px 0px;

  position: relative;

  z-index: 1;

}



.news-part::before {

  position: absolute;

  content: "";

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

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

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

  z-index: -1;

}



.news-text h2 {

  font-size: 35px;

  color: var(--white);

  margin-bottom: 5px;

}



.news-text p {

  font-size: 18px;

  font-weight: 300;

  color: var(--white);

}



.news-form {

  width: 100%;

  padding: 6px;

  border-radius: 8px;

  background: var(--white);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.news-form input {

  width: 100%;

  height: 50px;

  padding: 0px 20px;

  line-height: 50px;

}



.news-form button span {

  width: 180px;

  font-size: 14px;

  font-weight: 500;

  padding: 12px 0px;

  border-radius: 8px;

  text-align: center;

  display: inline-block;

  text-transform: uppercase;

  color: var(--white);

  background: var(--primary);

}



.news-form button span i {

  margin-right: 5px;

}



@media (max-width: 575px) {

  .news-form {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

  }

}



@media (max-width: 767px) {

  .news-text {

    margin-bottom: 30px;

  }

}



@media (max-width: 991px) {

  .news-part {

    padding: 50px 30px 60px;

  }

  .news-part .container-fluid {

    padding: 0px;

  }

}



.intro-part {

  padding: 80px 0px;

  background: var(--intro-bg);

}



.intro-wrap {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: start;

      -ms-flex-align: start;

          align-items: flex-start;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

}



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

  color: var(--white);

  background: var(--primary);

}



.intro-icon {

  margin-left: 20px;

}



.intro-icon i {

  width: 50px;

  height: 50px;

  font-size: 18px;

  line-height: 43px;

  border-radius: 50%;

  text-align: center;

  display: inline-block;

  color: var(--primary);

  background: var(--white);

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

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.intro-content h5 {

  font-size: 17px;

  margin-bottom: 8px;

  text-transform: capitalize;

}



.intro-content p {

  font-size: 15px;

  line-height: 22px;

}



@media (max-width: 767px) {

  .intro-part {

    padding: 60px 0px 30px;

  }

  .intro-wrap {

    margin-bottom: 30px;

  }

}



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

  .intro-part {

    padding: 80px 0px 50px;

  }

  .intro-wrap {

    margin-bottom: 30px;

  }

}



/*=====================================

            FOOTER PART STYLE

======================================*/

.footer-part {

  padding-top: 95px;

}



.footer-widget {

  display: -ms-grid;

  display: grid;

  -ms-grid-columns: 100%;

      grid-template-columns: 100%;

}



.footer-logo {

  margin-bottom: 25px;

}



.footer-logo img {

  width: 180px;

}



.footer-desc {

  margin-bottom: 30px;

}



.footer-social li {

  display: inline-block;

  margin-left: 7px;

}



.footer-social li:last-child {

  margin-left: 0px;

}



.footer-social li a {

  width: 40px;

  height: 40px;

  font-size: 16px;

  line-height: 40px;

  border-radius: 50%;

  text-align: center;

  color: var(--primary);

  background: var(--white);

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

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

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.footer-social li a:hover {

  color: var(--white);

  background: var(--primary);

}



.footer-title {

  margin-bottom: 25px;

  letter-spacing: -0.3px;

  text-transform: capitalize;

}



.footer-widget.contact {

  margin-right: 30px;

}



.footer-contact li {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  margin-bottom: 18px;

}



.footer-contact li:last-child {

  margin-bottom: 0px;

}



.footer-contact li i {

  font-size: 30px;

  margin-left: 15px;

  color: var(--primary);

}



.footer-contact li p span {

  display: block;

}



.footer-links {

  display: -ms-grid;

  display: grid;

  grid-gap: 50px;

  -ms-grid-columns: 1fr 1fr;

      grid-template-columns: 1fr 1fr;

}



.footer-links ul li {

  margin-bottom: 15px;

}



.footer-links ul li:last-child {

  margin-bottom: 0px;

}



.footer-links ul li a {

  color: var(--text);

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.footer-links ul li a:hover {

  color: var(--primary);

  text-decoration: underline;

}



.footer-app {

  display: -ms-grid;

  display: grid;

  grid-gap: 10px;

  -ms-grid-columns: 1fr 1fr;

      grid-template-columns: 1fr 1fr;

}



.footer-app a img {

  width: 100%;

}



.footer-bottom {

  margin-top: 75px;

  padding: 20px 35px 15px;

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

  background: var(--primary);

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

}



.footer-copytext {

  font-size: 15px;

  color: var(--white);

}



.footer-copytext a {

  color: var(--green-chalk);

}



.footer-copytext a:hover {

  text-decoration: underline;

}



.footer-card a {

  margin-right: 10px;

}



.footer-card a img {

  width: 50px;

  border-radius: 3px;

}



@media (max-width: 768px) {

  .footer-part .container-fluid {

    padding: 0px 25px;

  }

  .footer-widget.contact {

    margin-right: 0px;

  }

}



@media (max-width: 1199px) {

  .footer-part {

    padding-top: 50px;

  }

  .footer-widget {

    margin-bottom: 40px;

  }

  .footer-bottom {

    margin-top: 10px;

  }

}



@media (max-width: 767px) {

  .footer-bottom {

    padding: 25px 15px 75px;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

    text-align: center;

  }

  .footer-copytext {

    margin-bottom: 10px;

  }

  .footer-card a {

    margin: 0px 3px;

  }

}



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

  .footer-bottom {

    padding: 25px 30px 75px;

  }

}



.blog-widget {

  margin-bottom: 30px;

  margin-right: 5px;

  border-radius: 8px;

  padding: 18px 25px 25px;

  background: var(--white);

}



.blog-widget:last-child {

  margin-bottom: 0px;

}



.blog-widget-title {

  padding-bottom: 16px;

  margin-bottom: 20px;

  position: relative;

  text-transform: capitalize;

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

}



.blog-widget-title::before {

  position: absolute;

  content: "";

  bottom: -2px;

  right: 0px;

  width: 50px;

  height: 2px;

  background: var(--primary);

}



.blog-widget-form {

  position: relative;

}



.blog-widget-form input {

  width: 100%;

  height: 45px;

  padding: 0px 60px 0px 15px;

  border-radius: 8px;

  background: var(--chalk);

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



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

  border-color: var(--primary);

}



.blog-widget-form button {

  position: absolute;

  top: 0px;

  right: 0px;

  width: 45px;

  height: 45px;

  line-height: 45px;

  text-align: center;

  color: var(--white);

  background: var(--primary);

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

}



.blog-widget-feed li {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  margin-bottom: 25px;

  padding-bottom: 25px;

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

}



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

  margin: 0px;

  padding: 0px;

  border: none;

}



.blog-widget-media img {

  width: 100px;

  border-radius: 8px;

  margin-left: 20px;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-widget-text {

  font-size: 17px;

  line-height: 24px;

}



.blog-widget-text a {

  color: var(--heading);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-widget-text a:hover {

  color: var(--primary);

}



.blog-widget-text span {

  display: block;

  margin-top: 8px;

  font-size: 13px;

  font-weight: 400;

  text-transform: uppercase;

}



.blog-widget-category li {

  margin-bottom: 15px;

  padding-bottom: 15px;

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

}



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

  margin: 0px;

  padding: 0px;

  border: none;

}



.blog-widget-category li:hover a {

  color: var(--primary);

}



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

  background: var(--primary);

}



.blog-widget-category li a {

  width: 100%;

  font-size: 17px;

  color: var(--text);

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-widget-category li a span {

  font-size: 14px;

  float: left;

  width: 30px;

  height: 30px;

  line-height: 32px;

  text-align: center;

  border-radius: 50%;

  color: var(--white);

  background: var(--heading);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-widget-tag li {

  display: inline-block;

  margin: 0px 0px 12px 8px;

}



.blog-widget-tag li a {

  font-size: 14px;

  padding: 5px 12px;

  border-radius: 3px;

  color: var(--text);

  background: var(--chalk);

  text-transform: capitalize;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-widget-tag li a:hover {

  color: var(--white);

  background: var(--primary);

}



.blog-widget-social li {

  display: inline-block;

  margin-left: 10px;

}



.blog-widget-social li a {

  width: 45px;

  height: 45px;

  font-size: 18px;

  line-height: 45px;

  text-align: center;

  border-radius: 3px;

  color: var(--white);

  background: var(--heading);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.blog-widget-social li a:hover {

  background: var(--primary);

}



@media (max-width: 575px) {

  .blog-widget-social li {

    margin-left: 5px;

  }

  .blog-widget-social li a {

    width: 40px;

    height: 40px;

    font-size: 16px;

    line-height: 40px;

  }

}



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

  .blog-widget-media img {

    width: 95px;

  }

  .blog-widget-social li {

    margin-right: 5px;

  }

  .blog-widget-social li a {

    width: 40px;

    height: 40px;

    font-size: 16px;

    line-height: 40px;

  }

}



@media (max-width: 991px) {

  .blog-widget {

    margin-right: 0px;

  }

}



.shop-filter {

  padding: 20px 30px;

  border-radius: 8px;

  margin-bottom: 25px;

  background: var(--white);

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

}



.shop-filter .nice-select {

  border-radius: 6px;

  background: var(--chalk);

  padding: 8px 20px 8px 35px;

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

}



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

  left: 20px;

}



.shop-filter .nice-select .current {

  font-size: 15px;

}



.shop-filter .nice-select .list {

  top: 45px;

  -webkit-box-align: start;

      -ms-flex-align: start;

          align-items: flex-start;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

}



.shop-filter ul {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.shop-filter ul li {

  margin: 0px 5px;

}



.shop-filter ul li a {

  width: 40px;

  height: 40px;

  font-size: 16px;

  line-height: 40px;

  border-radius: 50%;

  text-align: center;

  color: var(--text);

  background: var(--chalk);

}



.shop-filter ul li .active {

  color: var(--white);

  background: var(--primary);

}



.shop-filter p {

  font-size: 15px;

  text-transform: capitalize;

}



@media (max-width: 767px) {

  .shop-filter {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

  }

  .shop-filter .nice-select {

    margin-bottom: 15px;

  }

  .shop-filter ul {

    margin-bottom: 15px;

  }

}



.shop-widget-promo {

  margin-bottom: 25px;

  border-radius: 8px;

  text-align: center;

  overflow: hidden;

}



.shop-widget-promo img {

  width: 100%;

  border-radius: 8px;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.shop-widget-promo img:hover {

  -webkit-transform: scale(1.05);

          transform: scale(1.05);

}



.shop-widget {

  padding: 20px 20px;

  border-radius: 8px;

  margin-bottom: 25px;

  background: var(--white);

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

}



.shop-widget:last-child {

  margin-bottom: 0px;

}



.shop-widget-title {

  padding-bottom: 12px;

  text-transform: uppercase;

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

}



.shop-widget-btn {

  width: 100%;

  font-size: 15px;

  padding: 8px 0px;

  border-radius: 8px;

  color: var(--heading);

  background: var(--border);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.shop-widget-btn:hover {

  color: var(--white);

  background: var(--primary);

}



.shop-widget-btn i {

  margin-left: 8px;

  margin-top: -1px;

}



.shop-widget-btn span {

  text-transform: capitalize;

}



.shop-widget-group {

  display: -ms-grid;

  display: grid;

  grid-gap: 10px;

  -ms-grid-columns: (1fr)[2];

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

  -ms-grid-rows: auto;

      grid-template-rows: auto;

  margin: 15px 0px;

}



.shop-widget-group input {

  width: 100%;

  height: 45px;

  border-radius: 5px;

  background: var(--chalk);

  text-align: center;

}



.shop-widget-list {

  margin: 18px 0px 20px;

}



.shop-widget-list li {

  margin-bottom: 12px;

  color: var(--gray);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.shop-widget-list li:hover {

  color: var(--primary);

}



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

  margin-bottom: 0px;

}



.shop-widget-content {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

}



.shop-widget-content input {

  width: 15px;

  height: 15px;

  margin-left: 12px;

  cursor: pointer;

}



.shop-widget-content label {

  cursor: pointer;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  text-transform: capitalize;

}



.shop-widget-content label i {

  font-size: 15px;

  margin-right: 8px;

  color: var(--gray);

}



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

  margin-right: 0px;

}



.shop-widget-content label i.active {

  color: var(--yellow);

}



.shop-widget-number {

  font-size: 15px;

}



.shop-widget-search {

  width: 100%;

  height: 40px;

  padding: 0px 15px;

  border-radius: 5px;

  background: var(--chalk);

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

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.shop-widget-search:focus-within {

  border-color: var(--primary);

}



.shop-widget-scroll {

  height: 279px;

  overflow-y: scroll;

  padding-left: 10px;

}



.single-banner {

  background-size: cover !important;

  padding: 100px 0px;

  text-align: center;

  position: relative;

  z-index: 1;

}



.single-banner::before {

  position: absolute;

  content: "";

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

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

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

  z-index: -1;

}



.single-banner h2 {

  font-size: 38px;

  margin-bottom: 15px;

  color: var(--white);

  text-transform: uppercase;

}



@media (max-width: 767px) {

  .single-banner {

    padding: 60px 0px;

  }

  .single-banner h2 {

    font-size: 32px;

    margin-bottom: 12px;

  }

}



.top-filter {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

  margin-bottom: 25px;

}



.filter-short {

  width: 225px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.filter-show {

  width: 125px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.filter-label {

  font-size: 14px;

  font-weight: 500;

  margin-left: 8px;

  white-space: nowrap;

  text-transform: uppercase;

}



.filter-select {

  height: 40px;

  background-color: transparent;

}



.filter-select:focus-within {

  border-color: #ced4da;

}



.filter-action {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: end;

      -ms-flex-pack: end;

          justify-content: flex-end;

}



.filter-action a i {

  width: 40px;

  height: 40px;

  font-size: 16px;

  line-height: 40px;

  border-radius: 50%;

  text-align: center;

  color: var(--text);

  background: transparent;

}



.filter-action a i:hover {

  color: var(--primary);

}



.filter-action .active i {

  color: var(--white);

  background: var(--primary);

}



.filter-action .active i:hover {

  color: var(--white);

}



@media (max-width: 575px) {

  .filter-label,

  .filter-action {

    display: none;

  }

  .filter-show {

    width: 80px;

  }

  .filter-short {

    width: 175px;

  }

}



.bottom-paginate {

  padding-top: 25px;

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

}



.page-info {

  font-weight: 400;

  color: var(--text);

}



@media (max-width: 575px) {

  .bottom-paginate {

    margin-bottom: 30px;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

  }

  .page-info {

    margin-bottom: 15px;

  }

}



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

  .bottom-paginate {

    margin-bottom: 30px;

  }

}



.dropdown-toggle{
 /* color: var(--white);*/
  color: var(--primary);
}


/*.menu_mobile{

  width: 100%;

  height: calc(100vh - 130px);

}*/


.menu_mobile ul {

  margin: 3em 3.5em;

  margin: 7.5vw 8.75vw;

  padding: 0 2px;

}



.menu_mobile li {

  list-style: none;

  margin: 1em 5px;

  position: relative;

}



.menu_mobile li li {

  list-style: none;

}



.menu_mobile li a {

  display: block;

  font-size: 16px;

  font-weight: 400;

  padding: 12px 15px;

  color: var(--text);

  text-transform: capitalize;

  line-height: 30px;

  width: 90%;

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

}



.menu_mobile li a:hover {

  color: var(--primary);

  background: var(--chalk);

}



.menu_mobile li ul {

  display: none;

}



.menu_mobile ul ul {

  margin: 0;

}



.shown {

  display: block;

}



.mobile-button{

  position: absolute;

  left: 42px;

  top: 14px;

  height: 40px;

  width: 40px;

  z-index: 2;

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

}



.mobile-button::before {

  position: absolute;

  top: 34%;

  z-index: 2;

  content: "\f054";

  font-size: 10px;

  font-weight: 900;

  font-family: "Font Awesome 5 Free";

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

  transition: all linear .3s;

  -webkit-transition: all linear .3s;

  -moz-transition: all linear .3s;

  -ms-transition: all linear .3s;

  -o-transition: all linear .3s;

}



.mobile-button.active::before {

  color: var(--primary);

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

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

}



.modal-content1{

  position: relative;

  display: flex;

  flex-direction: column;

  width: 100%;

  pointer-events: auto;

  background-color: #fff;

  background-clip: padding-box;

  border: 1px solid rgba(0, 0, 0, 0.2);

  border-radius: 0.3rem;

  outline: 0;

}



.modal-header{

  display: flex;

  flex-shrink: 0;

  align-items: center;

  justify-content: space-between;

  padding: 1rem 1rem;

  border-bottom: 1px solid #dee2e6;

  border-top-left-radius: calc(0.3rem - 1px);

  border-top-right-radius: calc(0.3rem - 1px);

}



.modal-body{

  position: relative;

  flex: 1 1 auto;

  padding: 0rem;

}



.modal-footer{

  display: flex;

  flex-wrap: wrap;

  flex-shrink: 0;

  align-items: center;

  direction: rtl;

  float: right;

  justify-content: flex-end;

  padding: 0.75rem;

  border-top: 1px solid #dee2e6;

  border-bottom-right-radius: calc(0.3rem - 1px);

  border-bottom-left-radius: calc(0.3rem - 1px);

}



.text-start {

  text-align: right !important;

  direction: rtl;

  padding: 5px 15px;

}



.cart-table img {

  max-height: 50px;

}



.preloader{

  position:fixed;

  top:0;

  left:0;

  right:0;

  bottom:0;

  z-index:9999;

  background-color:#fefefe;

  opacity: .7;

  display: none;

}

.preloader img{

  position:relative;

  right:50%;

  top:50vh;

  margin:-100px 0 0 -100px;

}



/*search*/

span.twitter-typeahead .tt-menu,

span.twitter-typeahead .tt-dropdown-menu {

  position: absolute;

  top: 100%;

  right: 0;

  z-index: 1000;

  display: none;

  float: right;

  min-width: 100%;

  padding: 5px 0;

  margin: 2px 0 0;

  list-style: none;

  font-size: 14px;

  text-align: right;

  direction: rtl;

  background-color: #ffffff;

  border: 1px solid #cccccc;

  border: 1px solid rgba(0, 0, 0, 0.15);

  border-radius: 4px;

  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

  background-clip: padding-box;

}

span.twitter-typeahead .tt-suggestion {

  display: block;

  padding: 3px 20px;

  clear: both;

  font-weight: normal;

  line-height: 1.42857143;

  color: #333333;

  white-space: nowrap;

  cursor: pointer;

}

span.twitter-typeahead .tt-suggestion.tt-cursor,

span.twitter-typeahead .tt-suggestion:hover,

span.twitter-typeahead .tt-suggestion:focus {

  color: #ffffff;

  text-decoration: none;

  outline: 0;

  background-color: #337ab7;

}

.input-group.input-group-lg span.twitter-typeahead .form-control {

  height: 46px;

  padding: 10px 16px;

  font-size: 18px;

  line-height: 1.3333333;

  border-radius: 6px;

}

.input-group.input-group-sm span.twitter-typeahead .form-control {

  height: 30px;

  padding: 5px 10px;

  font-size: 12px;

  line-height: 1.5;

  border-radius: 3px;

}

span.twitter-typeahead {

  width: 100%;

}

.input-group span.twitter-typeahead {

  display: block !important;

  height: 34px;

}

.input-group span.twitter-typeahead .tt-menu,

.input-group span.twitter-typeahead .tt-dropdown-menu {

  top: 32px !important;

}

.input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control {

  border-radius: 0;

}

.input-group span.twitter-typeahead:first-child .form-control {

  border-top-left-radius: 4px;

  border-bottom-left-radius: 4px;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.input-group span.twitter-typeahead:last-child .form-control {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

  border-top-right-radius: 4px;

  border-bottom-right-radius: 4px;

}

.input-group.input-group-sm span.twitter-typeahead {

  height: 30px;

}

.input-group.input-group-sm span.twitter-typeahead .tt-menu,

.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {

  top: 30px !important;

}

.input-group.input-group-lg span.twitter-typeahead {

  height: 46px;

}

.input-group.input-group-lg span.twitter-typeahead .tt-menu,

.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {

  top: 46px !important;

}

/*search*/



.select_city{

  height: 45px;

  font-size: 15px;

  padding: 0px 16px;

  letter-spacing: 0.3px;

  background-size: 12px 10px;

  text-transform: capitalize;

  background-position: left .75rem center;

  color: var(--text);

  cursor: pointer;





}



.title-no-info{

  font: 15px sans-serif;

  direction: rtl;

  color: red;

  font-weight: bold;

}



.edit-cell { display: flex; align-items: center; } 

.edit-cell input { width: 100px; margin-right: 10px; } 

.edit-cell button { display: none; } 

.edit-cell button.active { display: inline-block; }

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #ff4d4f;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    z-index: 1000;
    animation: fadein 0.3s, fadeout 0.3s 2.7s;
}

@keyframes fadein {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeout {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(20px); }
}

/* 🔹 Кнопка */
#accessibility-btn {
  position: fixed;
  top: 140px;
  right: 20px;
  width: 55px;
  height: 55px;
  background: #005bbb;
  color: #fff;
  font-size: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 55px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  opacity: 1;
  transition: background 0.3s, transform 0.3s;
}
#accessibility-btn:hover {
  background: #004799;
  transform: scale(1.05);
}

/* 🔹 Панель */
#accessibility-panel {
  position: fixed;
  top: 140px;
  right: -260px; /* прячем за экраном */
  width: 240px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 14px;
  border-radius: 10px 0 0 10px;
  z-index: 9998;
  box-shadow: 0 3px 12px rgba(0,0,0,0.18);
  transition: right 0.4s ease;
  opacity: 0.95;
}

/* 🔹 Когда открыта */
#accessibility-panel.show {
  right: 80px; /* плавно выезжает слева от кнопки */
}

/* Кнопки панели */
.access-option {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 8px;
  border-radius: 6px;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.3s;
}
.access-option:hover {
  background: #e3e3e3;
}

/* Контрастный режим */
.high-contrast {
  background: #000 !important;
  color: #ff0 !important;
}
.high-contrast a { color: #0ff !important; }

/* 🔹 Мобильная адаптация */
@media (max-width: 768px) {
  #accessibility-btn {
    top: 110px;
    right: 15px;
    width: 50px;
    height: 50px;
    line-height: 50px;
  }
  #accessibility-panel {
    top: 120px;
    right: -230px;
    width: 200px;
  }
  #accessibility-panel.show {
    right: 70px;
  }
}

.disabled-btn {
  opacity: 0.4;
  pointer-events: none;
}