/*-------------------------------
    
    CSS INDEX
    ===================

    01. Theme default CSS
    02. Header CSS
    03. Slider CSS
    04. Banner CSS
    05. Features CSS
    06. Shop CSS
    07. Sale CSS
    08. Blog CSS
    09. Subscribe CSS
    10. Caterories CSS
    11. Testimonial CSS
    12. Brand CSS
    00. Footer CSS 
    
    -------------------------------*/

/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* --primary-color: #b9a89e; */
  --primary-color: #864623;
}

body {
  font-family: "Jost", serif;
  font-size: 15px;
  font-weight: normal;
  color: #666;
  line-height: 24px;
}

a {
  text-decoration: none;
}
.form-group.row {
  margin-bottom: 10px;
}
.btn-primary {
  background: var(--primary-color) !important;
}

.w-img img {
  width: 100%;
}
.accordion-button:not(.collapsed) {
  color: var(--primary-color);
}
.accordion-button:not(.collapsed)::after {
  background-image: none;
  mask-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
  background-color: var(--primary-color);
}

.m-img img {
  max-width: 100%;
}

input {
  outline: none;
}

a,
.btn,
button,
span,
p,
i,
input,
select,
textarea,
li,
img,
*::after,
*::before,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
}

button {
  background: transparent;
}

button:hover,
select:hover {
  cursor: pointer;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Jost", serif;
  color: #222;
  margin-top: 0px;
  font-weight: 500;
  line-height: 1.2;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 27px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

p {
  font-family: "Jost", serif;
  font-size: 14px;
  font-weight: normal;
  color: #666;
  margin-bottom: 15px;
  line-height: 24px;
}

*::-moz-selection {
  background: var(--primary-color);
  color: #ffffff;
  text-shadow: none;
}

::-moz-selection {
  background: var(--primary-color);
  color: #ffffff;
  text-shadow: none;
}

::selection {
  background: var(--primary-color);
  color: #ffffff;
  text-shadow: none;
}

/*--
    - Input Placeholder
-----------------------------------------*/
*::-moz-placeholder {
  color: #222;
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: #222;
  font-size: 14px;
  opacity: 1;
}

/*--
    - Common Classes
-----------------------------------------*/
.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

/*--
    - Background color
-----------------------------------------*/

.footer-bg-2 {
  background: #000;
}

.footer-bottom-bg {
  background: #202935;
}

/*--
    - color
-----------------------------------------*/
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #ffffff !important;
}

.white-color {
  color: #ffffff;
}

.theme-color {
  color: var(--primary-color) !important;
}

.black-color {
  color: #222;
}

.body-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.body-overlay.opened {
  opacity: 1;
  visibility: visible;
}

/* section title */
.section__head {
  padding-bottom: 6px;
  border-bottom: 1px solid #ebebeb;
  position: relative;
}
/* .section__head::after {
  position: absolute;
  content: "";
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 50px;
  background: var(--primary-color);
} */
.section__head-2::after {
  background: #d01418;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title {
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .section__title {
    margin-bottom: 20px;
  }
}
.section__title h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0;

}
.section__title h3 span {
  font-weight: 300;

}

/* rating */
.rating {
  margin-bottom: 5px;
  color: var(--primary-color);
}
.rating-2 {
  margin-bottom: 15px;
}
.rating ul li {
  display: inline-block;
}
.rating ul li a {
  color: var(--primary-color);
}
.rating__shop ul li a {
  font-size: 16px;
}

/* back to top */
.back-to-top-btn {
  width: 100%;
}
.back-to-top-btn a {
  display: block;
  border-radius: 0;
  background: #4d5669;
  color: #ffffff;
  text-transform: uppercase;
  padding: 20px 0;
  width: 100%;
  font-weight: 500;
}
.back-to-top-btn:hover a {
  color: var(--primary-color);
}
.back-to-top-btn-2 a {
  background: #333;
}
.back-to-top-btn-4 {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
}
.back-to-top-btn-4 a {
  display: inline-block;
  font-size: 20px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  color: #ffffff;
  border: 1px solid #d01418;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #d01418;
  z-index: 9999;
}
.back-to-top-btn-4 a:hover {
  background: #ffffff;
  color: #222;
}

/* display laptop none */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .d-laptop-none {
    display: none;
  }
}
/* common nav */
.t-nav .owl-nav {
  display: flex;
  position: absolute;
  top: -77px;
  right: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .t-nav .owl-nav {
    display: none;
  }
}
@media (max-width: 575px) {
  .t-nav .owl-nav {
    display: none;
  }
}
.t-nav .owl-nav div {
  margin: 0 7px;
}
.t-nav .owl-nav div button {
  font-size: 24px;
  color: #333;
  background: transparent;
  -webkit-transition: all 0.1s ease-out 0s;
  -moz-transition: all 0.1s ease-out 0s;
  -ms-transition: all 0.1s ease-out 0s;
  -o-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}
.t-nav .owl-nav div button:hover {
  color: var(--primary-color);
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  -ms-transform: scale(1.7);
  transform: scale(1.7);
}

.basic-pagination ul li {
  display: inline-block;
}
.basic-pagination ul li:not(:last-child) {
  margin-right: 10px;
}
.basic-pagination ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  background: #ffffff;
}
.basic-pagination ul li a:hover,
.basic-pagination ul li a.active {
  background: var(--primary-color);
  color: #ffffff;
}
.basic-pagination-border {
  border-top: 1px solid #e6e6e6;
}

/*----------------------------------------*/
/*  00. BUTTONS CSS START
/*----------------------------------------*/
/* btn */
.t-y-btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  background-color: var(--primary-color);
  height: 45px;
  line-height: 42px;
  padding: 0 20px;
  color: #ffffff;
  border-radius: 30px;
  text-transform: initial;
  z-index: 1;
  text-transform: uppercase;
  border: 2px solid transparent;
  text-align: center;
}
.t-y-btn:hover {
  border-color: var(--primary-color);
  color: #222;
  background: #ffffff;
}
.t-y-btn-sub {
  height: 50px;
  line-height: 50px;
  background: var(--primary-color);
  color: #222;
  text-transform: uppercase;
  padding: 0 25px;
  border-radius: 0 35px 35px 0;
  border: 0;
  text-align: center;
}
.t-y-btn-sub:hover {
  background: var(--primary-color);
  color: #ffffff;
}
.t-y-btn-border {
  background: #ffffff;
  color: #222;
  border-color: var(--primary-color);
}
.t-y-btn-border:hover {
  background: var(--primary-color);
  color: #ffffff;
}

.t-y-btn-grey {
  background: #f6f6f6;
  border-color: #e6e6e6;
  color: #222;
  border-width: 1px;
  line-height: 43px;
}
.t-y-btn-grey:hover {
  background: #222;
  border-color: #222;
  color: #ffffff;
}

/*----------------------------------------*/
/*  00. MENU CSS START
/*----------------------------------------*/
/* main menu area */
.main-menu ul {
  margin: 0;
  padding: 0;
}
.main-menu ul li {
  display: inline-block;
  margin-right: 25px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu ul li {
    margin-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .main-menu ul li {
    margin-right: 30px;
  }
}

.main-menu ul li:hover ul.submenu {
  visibility: visible;
  opacity: 1;
  top: 100%;
}
.main-menu ul li ul.submenu li:hover > a {
  color: var(--primary-color);
}
.main-menu ul li a {
  display: block;
  font-size: 15px;
  color: #000;
  font-weight: 500;
  /* text-transform: uppercase; */
  padding: 24px 0;
}
.main-menu ul li ul.submenu {
  position: absolute;
  top: 120%;
  left: 0;
  min-width: 200px;
  background: #ffffff;
  -webkit-box-shadow: 0px 15px 30px 0px rgba(0, 3, 143, 0.1);
  -moz-box-shadow: 0px 15px 30px 0px rgba(0, 3, 143, 0.1);
  box-shadow: 0px 15px 30px 0px rgba(0, 3, 143, 0.1);
  border: 1px solid #b0c6c64d;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  z-index: 11;
}
.main-menu ul li ul.submenu li {
  display: block;
  margin-right: 0;
}
.main-menu ul li ul.submenu li a {
  position: relative;
  padding: 9px 25px;
  font-size: 13px;
  text-transform: capitalize;
  border-bottom: 1px solid #b0c6c64d;
  color: #222;
}
.main-menu ul li ul.submenu li a:hover {
  color: var(--primary-color);
}
.main-menu ul li ul.submenu li a i {
  position: absolute;
  top: 34%;
  right: 0;
  -webkit-transform: rotate(-90deg) translateY(-50%);
  -moz-transform: rotate(-90deg) translateY(-50%);
  -ms-transform: rotate(-90deg) translateY(-50%);
  transform: rotate(-90deg) translateY(-50%);
}
.main-menu ul li ul.submenu li:last-child a {
  border-bottom: none;
}
.main-menu ul li ul.submenu li ul.submenu {
  left: 120%;
  top: 0%;
  visibility: hidden;
  opacity: 0;
}
.main-menu ul li ul.submenu li:hover ul.submenu {
  visibility: visible;
  opacity: 1;
  left: 100%;
}

/* cat */
.cat-toggle-btn {
  background: #ffffff;
  color: #222;
  border-bottom: 1px solid #ebebeb;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
  height: 61px;
  line-height: 61px;
  width: 100%;
  text-align: left;
  padding-left: 20px;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cat-toggle-btn {
    padding-left: 10px;
  }
}
.cat-toggle-btn i {
  margin-right: 10px;
}
.cat-toggle-btn-2 {
  color: #ffffff;
  background: #d01418;
  border: none;
}

.cat-toggle {
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  position: relative;
}
.cat-toggle-4 {
  border: none;
  background: #d01418;
  color: #ffffff;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.cat-toggle-2 {
  border: 2px solid var(--primary-color);
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

/* side menu btn */
.side-menu-btn {
  background: transparent;
  font-size: 18px;
  color: #222;
}
.side-menu-btn:hover {
  color: var(--primary-color);
}
.side-menu-btn-2:hover {
  color: #ffffff;
}
.side-menu-btn-4 {
  background: #d01418;
  color: #ffffff;
  padding: 19px;
}
.side-menu-btn-4:hover {
  color: #ffffff;
  background: #d01418;
}

/* mean menu customize */
.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

nav ul {
  text-align: center;
}
nav ul ul {
  text-align: left;
}
.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: #222;
  border-top: 1px solid #ebebeb;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--primary-color);
}
.mean-container .mean-nav ul li a .cat-label {
  display: none;
}

.mean-container.mobile-menu-2 .mean-nav ul li a:hover {
  color: var(--primary-color);
}

.mean-container.mobile-menu-3 .mean-nav ul li a:hover {
  color: var(--primary-color);
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 5px;
  padding: 0 !important;
  line-height: 14px;
  border: 1px solid #ebebeb !important;
  height: 30px;
  width: 30px;
  line-height: 30px;
  color: #222;
  line-height: 30px;
  top: 0;
  font-weight: 400;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

.mean-container.mobile-menu-2 .mean-nav ul li a.mean-expand:hover {
  background: var(--primary-color);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.mean-container.mobile-menu-3 .mean-nav ul li a.mean-expand:hover {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

.mean-container .mean-nav ul li > a > i {
  display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  color: #222;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  color: #222;
}

/*----------------------------------------*/
/*  00. OFF CANVAS CSS START
/*----------------------------------------*/
.offcanvas__area {
  position: fixed;
  right: -495px;
  top: 0;
  width: 465px;
  height: 100%;
  background: #ffffff none repeat scroll 0 0;
  overflow-y: scroll;
  -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  z-index: 9999;
}
@media (max-width: 575px) {
  .offcanvas__area {
    width: 290px;
  }
}
.offcanvas__area.opened {
  right: 0px;
}
.offcanvas__wrapper {
  position: relative;
  padding: 45px;
}
@media (max-width: 575px) {
  .offcanvas__wrapper {
    padding: 20px;
  }
}
.offcanvas__close {
  position: absolute;
  top: 37px;
  right: 45px;
}
@media (max-width: 575px) {
  .offcanvas__close {
    top: 10px;
    right: 20px;
  }
}
.offcanvas__close-btn {
  display: inline-block;
  font-size: 16px;
  height: 45px;
  width: 45px;
  line-height: 45px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 50%;
}
.offcanvas__close-btn:hover {
  background: #222;
}
.offcanvas__logo {
  padding-bottom: 20px;
  border-bottom: 1px solid #ebebeb;
}
.offcanvas__search {
  position: relative;
}
.offcanvas__search input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-right: 20px;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid #ebebeb;
  font-size: 14px;
}
.offcanvas__search input::placeholder {
  color: #666;
}
.offcanvas__search input:focus {
  border-color: #222;
}
.offcanvas__search button {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 14px;
  color: #666;
}

.custom-container {
  max-width: 1833px;
}

/*----------------------------------------*/
/*  02. HEADER CSS START
/*----------------------------------------*/

/* Sticky header styles */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.sticky {
  transition: all 0.3s ease-in-out;
}
.transparent-sticky {
  background-color: rgba(
    255,
    255,
    255,
    0.9
  ); /* Slightly transparent background for transparent headers */
}

.header__padding {
  padding-left: 75px;
  padding-right: 75px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px),
  only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px) {
  .header__padding {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 575px) {
  .header__padding {
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__bottom {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.header__bottom-border {
  border-bottom: 1px solid #ebebeb;
  /* background: var(--primary-color); */
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__bottom-4 {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}
@media (max-width: 575px) {
  .header__bottom-4 {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}
.header__action ul li {
  display: inline-block;
  line-height: 45px;
  position: relative;
  padding-right: 20px;
  margin-right: 20px;
}
.header__action ul li:last-child {
  margin-right: 0;
}
.header__action ul li::after {
  position: absolute;
  content: "";
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  width: 1px;
  height: 13px;
  background: #ebebeb;
}
.header__action ul li a {
  font-size: 13px;
  display: block;
}
@media (max-width: 575px) {
  .header__action ul li a {
    padding-right: 10px;
    margin-right: 10px;
  }
}
.header__action ul li a:hover {
  color: var(--primary-color);
}
.header__action ul li:last-child a {
  margin-right: 0;
  padding-right: 0;
}
.header__action ul li:last-child a::after {
  display: none;
}
.header__info {
  /* padding: 10px 0; */
  border-bottom: 1px solid #ddd;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__info-left {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__info-left {
    margin-bottom: 20px;
  }
}
.header__info-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: end;
}
.header__info-right .user-icon a {
  margin-right: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header__info-right .user-icon i {
  font-size: 20px;
}
.header__hotline-icon {
  margin-right: 15px;
}
.header__hotline-icon i {
  font-size: 35px;
}
.header__hotline-info span {
  font-weight: 400;
  display: block;
  color: #666;
}
.header__hotline-info h6 {
  font-size: 14px;
}
.header__hotline-4 {
  padding: 19px 0;
  border-left: 2px solid #394452;
}
.header__hotline-4 i {
  color: #ffffff;
}
.header__hotline-4 span {
  font-size: 14px;
  color: #ffffff;
  margin-left: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header__hotline-4 span {
    font-size: 12px;
  }
}
.header__search {
  width: 70%;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__search {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .header__search {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__search-4 {
    width: 70%;
  }
}
.header__search form {
  position: relative;
}
.header__search-box {
  width: 100%;
  position: relative;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .header__search-box::before {
    display: none;
  }
}
.header__search-box input {
  width: 100%;
  height: 50px;
  line-height: 50px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  border: 2px solid var(--primary-color);
  outline: none;
  padding: 0 15px;
  padding-right: 190px;
}
@media (max-width: 575px) {
  .header__search-box input {
    padding-left: 15px;
  }
}
.header__search-box input::placeholder {
  color: #e1e1e1;
  font-size: 12px;
}
.header__search-box button {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  height: 50px;
  color: #222;
  display: block;
  line-height: 50px;
  padding: 0 65px;
  font-size: 14px;
  font-weight: 400;
  background: var(--primary-color);
  border-radius: 0 30px 30px 0;
  text-transform: capitalize;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__search-box-4 input {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__search-box-4 input {
    padding-left: 30px;
  }
}
@media (max-width: 575px) {
  .header__search-box-4 input {
    padding-left: 30px;
  }
}
.header__search-cat {
  position: absolute;
  top: 50%;
  left: 20px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}
@media (max-width: 575px) {
  .header__search-cat {
    display: none;
  }
}
.header__search-cat .nice-select {
  border: none;
  padding-left: 0;
  color: #6d6d6d;
}
.header__search-cat .nice-select::after {
  border-width: 1px;
  border-color: #222;
  height: 8px;
  width: 8px;
  margin-top: -7px;
}
.header__search-cat .nice-select .list {
  min-width: 220px;
  height: 250px;
  overflow: hidden;
  overflow-y: scroll;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.header__search-cat .nice-select .list .option {
  padding: 10px 6px;
  line-height: 1.5;
}
.header__search-cat .nice-select .list .option:hover,
.header__search-cat .nice-select .list .option.selected {
  color: #ffffff;
  background: var(--primary-color);
}

/*----------------------------------------*/
/*  03. SLIDER CSS START
/*----------------------------------------*/
.slider__area {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.slider__inner .slick-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.slider__inner .slick-dots li {
  display: inline-block;
}
.slider__inner .slick-dots li button {
  font-size: 0;
  width: 7px;
  height: 7px;
  background: #ebebeb;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  margin: 0 5px;
}
.slider__inner .slick-dots li.slick-active button {
  width: 35px;
  background: var(--primary-color);
}

.single-slider {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
}
.single-slider-4 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

/*----------------------------------------*/
/*  04. BANNER CSS START
/*----------------------------------------*/
.banner__item {
  position: relative;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
}
.banner__item::after,
.banner__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -ms-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.banner__item::before {
  z-index: 1;
}
.banner__item:hover::after {
  top: 50%;
  bottom: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.banner__item:hover::before {
  right: 50%;
  left: 50%;
  background: rgba(255, 255, 255, 0.2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__item-sidebar {
    padding-top: 40px;
  }
}

/*----------------------------------------*/
/*  05. FEATURES CSS START
/*----------------------------------------*/
.features__inner {
  border: 1px solid #ebebeb;
}
.features__wrapper {
  border: 1px solid #ebebeb;
}
.features__item {
  padding: 25px;
  position: relative;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .features__item {
    padding: 25px 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .features__item {
    padding: 25px 20px;
  }
}
.features__item::after {
  position: absolute;
  content: "";
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 50%;
  background: #ebebeb;
}
@media (max-width: 575px) {
  .features__item::after {
    display: none;
  }
}
.features__item-last::after {
  display: none;
}
.features__item-4 .features__icon i {
  color: #222;
}
.features__icon i {
  font-size: 40px;
  color: var(--primary-color);
}
.features__content h6 {
  margin-bottom: 5px;
  font-size: 14px;
}
.features__content p {
  font-size: 12px;
  line-height: 12px;
  margin-bottom: 0;
}

/*----------------------------------------*/
/*  06. SHOP CSS START
/*----------------------------------------*/
.product__slider .owl-nav {
  display: flex;
  position: absolute;
  top: -77px;
  right: 0;
}
@media (max-width: 575px) {
  .product__slider .owl-nav {
    display: none;
  }
}
.product__slider .owl-nav div {
  margin: 0 7px;
}
.product__slider .owl-nav div button {
  font-size: 24px;
  color: #333;
  background: transparent;
  -webkit-transition: all 0.1s ease-out 0s;
  -moz-transition: all 0.1s ease-out 0s;
  -ms-transition: all 0.1s ease-out 0s;
  -o-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}
.product__slider .owl-nav div button:hover {
  color: var(--primary-color);
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  -ms-transform: scale(1.7);
  transform: scale(1.7);
}
.product__item {
  position: relative;
  /* padding: 15px 15px; */
  /* border-radius: 15px; */
  padding-bottom: 30px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
}
/* .product__thumb {
  border-radius: 15px;
  overflow: hidden;
} */
.onsale__area .product__item {
  margin-bottom: 20px;
  border-radius: 15px;
}
.product__item.product__item-2 {
  border: 2px solid #ebebeb;
}

.product__item:hover .product__thumb .second-img {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.product__item:hover .product__thumb .product__action {
  visibility: visible;
  opacity: 1;
  bottom: 20px;
}
.product__item:hover .product__add-btn {
  bottom: 35px;
  visibility: visible;
  opacity: 1;
}
.product__item:hover .product__add-btn-4 {
  bottom: 10px;
}
.product__item-4 {
  padding-bottom: 0;
}
.product__item-4:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.product__item-sidebar {
  padding: 15px 0;
  border-bottom: 1px solid #ebebeb;
}
.product__sale {
  padding: 15px 10px;
  padding-bottom: 0;
}
.product__thumb .second-img {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0;
  visibility: hidden;
}
.product__thumb-sale {
  width: 41.5%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .product__thumb-sale {
    width: 120px;
    height: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .product__thumb-sale {
    width: 120px;
    height: 120px;
  }
}
.product__thumb-sale img {
  width: 125px !important;
}
.product__thumb-sidebar img {
  width: 100px !important;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px) {
  .product__thumb-sidebar img {
    width: 70px !important;
  }
}
.product__action {
  bottom: -40px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  visibility: hidden;
  opacity: 0;
}
.product__action ul li {
  display: inline-block;
  margin: 0 2px;
}
.product__action ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #d7d7d7;
  background: #fafafa;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
  color: #222;
}
.product__action ul li a:hover {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}
.product__action-4 ul li a:hover {
  background: #d01418;
  border-color: #d01418;
}
.product__content h6 {
  padding-top: 15px;
  font-size: 15px;
  font-weight: 400;
  color: #222 !important;
  line-height: 18px;
  margin-bottom: 2px;
}

.product__content span {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  display: inline-block;
}
.product__content span.new {
  color: var(--primary-color);
}
.product__content span.new-2 {
  color: #222;
}
.product__content span.price-old {
  color: #b5b5b5;
  font-weight: 400;
}
.product__content p {
  padding: 0 30px;
}
.product__content-2 h6 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.product__content-2 p {
  padding: 0;
}
.product__content-4 h6 {
  color: #222;
}
.product__content-4 span.new {
  color: #d01418;
}
.product__add-btn {
  position: absolute;
  bottom: -40px;
  right: 0;
  left: 0;
  margin: 0;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}
.product__add-btn button {
  font-size: 12px;
  font-weight: 500;
  background-color: var(--primary-color);
  line-height: 45px;
  padding: 0 50px;
  color: #ffffff;
  border-radius: 30px;
  text-transform: initial;
  z-index: 1;
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .product__add-btn button {
    padding: 0 30px;
  }
}
.product__add-btn button:hover {
  background: #222;
  color: #ffffff;
}
.product__add-btn-4 button {
  border: 2px solid #d01418;
  background: #d01418;
  color: #ffffff;
}
.product__add-btn-4 button:hover {
  background: #ffffff;
  color: #d01418;
}
@media (max-width: 575px) {
  .product__nav-tab {
    margin-right: 0;
  }
}
.product__nav-tab .nav-tabs {
  border: none;
}
.product__nav-tab .nav-item {
  margin-right: 35px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .product__nav-tab .nav-item {
    margin-right: 30px;
  }
}
@media (max-width: 575px) {
  .product__nav-tab .nav-item {
    margin-bottom: 5px;
  }
}
.product__nav-tab .nav-item:last-child {
  margin-right: 0;
}
.product__nav-tab .nav-link {
  font-size: 14px;
  color: #222;
  text-transform: capitalize;
  padding: 0;
  background: transparent;
  border: none;
}
.product__nav-tab .nav-link.active {
  color: var(--primary-color);
  background: transparent;
}
.product__nav-tab-red .nav-link:hover {
  color: #d01418;
}
.product__nav-tab-red .nav-link.active {
  color: #d01418;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .product__nav-tab-3 {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .product__nav-tab-3 {
    margin-top: 20px;
    margin-right: 0;
  }
}
@media (max-width: 575px) {
  .product__nav-tab-3 {
    margin-top: 20px;
    margin-right: 0;
  }
}

.product__stock span {
  font-size: 14px;
  color: var(--primary-color);
}
.product__stock span:first-child {
  color: #222;
  padding-right: 5px;
}
.product__brand span {
  font-size: 14px;
  color: var(--primary-color);
}
.product__brand span:first-child {
  color: #222;
  padding-right: 5px;
}
.product__add-review span a {
  position: relative;
  padding-right: 10px;
  margin-right: 10px;
}
.product__add-review span a::after {
  position: absolute;
  content: "";
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 80%;
  background: #ebebeb;
}

.product__add-review span:last-child a::after {
  display: none;
}
.product__price span {
  color: #222;
  font-size: 24px;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 22px;
}
.product__price-slider input {
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-color);
  border: none;
  outline: none;
  background: none;
  margin-left: 10px;
  width: 100px;
  margin-bottom: 15px;
}
.product__offer {
  position: absolute;
  top: 0px;
  right: 10px;
}
.product__offer span {
  display: inline-block;
  text-align: center;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 2px;
  background-color: #000;
  color: #ffffff;
  font-weight: 400;
}
.product__offer span.discount-2 {
  padding: 0px 10px;
}

.product__deal .owl-nav {
  display: flex;
  position: absolute;
  top: -77px;
  right: 0;
}
.product__deal .owl-nav div {
  margin: 0 7px;
}
.product__deal .owl-nav div button {
  font-size: 24px;
  color: #333;
  background: transparent;
  -webkit-transition: all 0.1s ease-out 0s;
  -moz-transition: all 0.1s ease-out 0s;
  -ms-transition: all 0.1s ease-out 0s;
  -o-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}
.product__deal .owl-nav div button:hover {
  color: var(--primary-color);
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  -ms-transform: scale(1.7);
  transform: scale(1.7);
}
.product__electronic .owl-nav {
  display: flex;
  position: absolute;
  top: -77px;
  right: 0;
}
.product__electronic .owl-nav div {
  margin: 0 7px;
}
.product__electronic .owl-nav div button {
  font-size: 24px;
  color: #333;
  background: transparent;
  -webkit-transition: all 0.1s ease-out 0s;
  -moz-transition: all 0.1s ease-out 0s;
  -ms-transition: all 0.1s ease-out 0s;
  -o-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}
.product__electronic .owl-nav div button:hover {
  color: var(--primary-color);
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  -ms-transform: scale(1.7);
  transform: scale(1.7);
}
.product__phone-slider .owl-nav {
  right: -285px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .product__phone-slider .owl-nav {
    right: -230px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .product__phone-slider .owl-nav {
    right: -190px;
  }
}
.product__phone-slider-3 .owl-nav {
  right: -310px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .product__phone-slider-3 .owl-nav {
    right: -285px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .product__phone-slider-3 .owl-nav {
    right: -235px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .product__phone-slider-3 .owl-nav {
    right: -200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .product__phone-slider-3 .owl-nav {
    right: -365px;
  }
}
.product__col .nav-tabs {
  border: none;
}
.product__col .nav-tabs .nav-item:not(:last-child) {
  margin-right: 15px;
}
.product__col .nav-tabs .nav-item .nav-link {
  padding: 0;
  font-size: 24px;
  border: none;
  color: #b6b6b6;
}
.product__col .nav-tabs .nav-item .nav-link.active {
  color: var(--primary-color);
}
@media (max-width: 575px) {
  .product__result {
    padding-left: 0;
    margin-top: 10px;
  }
}
.product__result p {
  font-size: 14px;
  margin-bottom: 0;
}
.product__sorting .nice-select {
  border: 1px solid #e6e6e6;
  color: #222;
  height: 40px;
  line-height: 40px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  padding-left: 30px;
  padding-right: 40px;
}
.product__sorting .nice-select::after {
  right: 20px;
}
.product__sorting.product__show-position .nice-select {
  padding-left: 50px;
  padding-right: 70px;
}
.product__sorting.product__show-position .nice-select::after {
  right: 30px;
}

.product__widget-item .accordion-item:first-of-type .accordion-button {
  border-radius: 0;
}
.product__widget-item .accordion-button {
  padding: 0;
  outline: 0;
  box-shadow: none;
  padding-bottom: 6px;
  border-bottom: 1px solid #ebebeb;
  position: relative;
  font-size: 18px;
  font-weight: 500;
  color: #222;
}
.product__widget-item .accordion-button::before {
  position: absolute;
  content: "";
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 50px;
  background: var(--primary-color);
}
.product__widget-item .accordion-button::after {
  background-image: none;
  border-bottom: 1px solid #222;
  border-right: 1px solid #222;
  content: "";
  display: block;
  height: 8px;
  width: 8px;
  margin-top: -7px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  -ms-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.product__widget-item .accordion-button.collapsed::after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.product__widget-item .accordion-button:not(.collapsed) {
  background: #ffffff;
}
.product__widget-item .accordion-item {
  border: none;
}
.product__widget-item .accordion-body {
  padding: 0;
  padding-top: 20px;
  padding-bottom: 30px;
}
.product__widget-title {
  padding: 0;
  outline: 0;
  box-shadow: none;
  padding-bottom: 6px;
  border-bottom: 1px solid #ebebeb;
  position: relative;
  font-size: 18px;
  font-weight: 500;
  color: #222;
}
.product__widget-title::before {
  position: absolute;
  content: "";
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 50px;
  background: var(--primary-color);
}
.product__size ul li {
  display: inline-block;
  margin-right: 5px;
}
.product__size ul li a {
  font-size: 12px;
  color: #666;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 28px;
  border: 1px solid #dadada;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.product__size ul li a:hover {
  color: #ffffff;
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.product__sm-item:not(:last-child) {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f5f5f5;
}
.product__sm-title {
  font-size: 14px;
  color: #222;
  font-weight: 400;
}
.product__sm-title a:hover {
  color: var(--primary-color);
}
.product__sm-price .price {
  font-size: 16px;
  font-weight: 500;
  color: #222;
}
.product__list {
  border-bottom: 1px solid #e6e6e6;
}
.product__list:hover {
  box-shadow: none;
}
.product__list .product__thumb img {
  width: 332px;
  height: 332px;
}
@media (max-width: 575px) {
  .product__list .product__thumb img {
    width: 100%;
    height: auto;
  }
}
.product__list .product-name {
  font-size: 18px;
  font-weight: 400;
  color: #222;
  margin-bottom: 6px;
}
.product__list .price {
  padding: 0;
  margin-bottom: 17px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  (max-width: 575px) {
  .product__list .product-review-action {
    margin-left: 0;
  }
}
.product__list .product-review-action span {
  padding: 0;
  padding-right: 10px;
  margin-right: 7px;
  font-size: 13px;
  line-height: 1;
  color: #989898;
  font-weight: 400;
}
.product__list .product-review-action span:not(:last-child) {
  padding-right: 10px;
  margin-right: 7px;
  border-right: 1px solid #e6e6e6;
}
.product__list .product-text {
  padding: 0;
  margin-bottom: 20px;
}
.product__list .product__action-list {
  position: relative;
  visibility: visible;
  opacity: 1;
  text-align: left;
  margin: inherit;
  bottom: inherit;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  (max-width: 575px) {
  .product__list .product__action-list ul {
    margin-top: 10px;
  }
}
.product__list .product__action-list ul li {
  margin: 0;
  margin-right: 10px;
}
.product__list-features {
  margin-bottom: 20px;
}
.product__list-features ul li {
  list-style: disc;
  margin-left: 13px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .product__details-wrapper {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px),
  only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .product__details-nav-thumb img {
    width: 100%;
  }
}
.product__details-nav-thumb img {
  max-width: 100%;
}
.product__details-nav .nav-tabs {
  border: none;
}
.product__details-nav .nav-tabs .nav-item {
  padding: 0;
}
.product__details-nav .nav-tabs .nav-item .nav-link {
  padding: 0;
  margin: 0;
  border: none;
  padding: 5px 0;
  border-top: 1px solid #ebebeb;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.product__details-nav .nav-tabs .nav-item .nav-link img {
  width: 85px;
  height: 85px;
}
.product-img-lg img {
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .product-img-lg {
    display: none;
  }
}
@media (min-width: 768px) {
  .product-img-sm {
    display: none !important;
  }
}
.product__details-wrapper {
  position: sticky;
  top: 130px;
}

.product__details-title {
  font-size: 24px;
}
.product__details .rating__shop ul li a {
  font-size: 14px;
}
.product__details .product__price span {
  font-size: 22px;
}
.product__details .product__price span.new {
  color: var(--primary-color);
}
.product__details .product__price span.old {
  color: #555;
  font-size: 18px;
  text-decoration: line-through;
  margin-left: 10px;
}
.product__details-stock h3 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 17px;
}
.product__details-stock h3 span {
  font-weight: 500;
}
.product__details-stock .progress {
  height: 10px;
  border-radius: 10px;
  margin-bottom: 70px;
}
.product__details-stock .progress-bar {
  background-color: var(--primary-color);
}
.product__details-action ul li {
  display: inline-block;
  margin-right: 4px;
}
.product__details-action ul li a {
  display: block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: #f6f6f6;
  border: 1px solid #ebebeb;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
}
.product__details-action ul li a:hover {
  color: #222;
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.product__details-des h3 {
  font-size: 18px;
  margin-bottom: 15px;
}
.product__details-des-tab .nav-tabs {
  border: 0;
  margin: 0;
  border-bottom: 1px solid #ebebeb;
}
.product__details-des-tab .nav-tabs .nav-item {
  margin: 0;
}
.product__details-des-tab .nav-tabs .nav-item .nav-link {
  padding: 0;
  padding-bottom: 5px;
  border: 0;
  position: relative;
  font-size: 20px;
  font-weight: 500;
  color: #222;
  margin-right: 30px;
  color: #b6b6b6;
  background: transparent;
}
.product__details-des-tab .nav-tabs .nav-item .nav-link::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  height: 2px;
  width: 50px;
  background: transparent;
}
.product__details-des-tab .nav-tabs .nav-item .nav-link.active,
.product__details-des-tab .nav-tabs .nav-item .nav-link:hover {
  color: #222;
}
.product__details-des-tab .nav-tabs .nav-item .nav-link.active::after,
.product__details-des-tab .nav-tabs .nav-item .nav-link:hover::after {
  background-color: var(--primary-color);
}
.product__details-review .review-wrapper .block-title {
  font-size: 14px;
  margin-bottom: 0;
  border-bottom: 1px solid #ebebeb;
}
.product__details-review .review-item {
  border-bottom: 1px solid #ebebeb;
  padding: 16px 0;
  padding-bottom: 30px;
}
.product__details-review .review-title {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  margin-bottom: 7px;
}
.product__details-review .review-ratings ul {
  line-height: 1;
}
.product__details-review .review-ratings ul li {
  line-height: 1;
  display: inline-block;
  margin-bottom: 5px;
}
.product__details-review .review-ratings ul li a {
  font-size: 13px;
  color: var(--primary-color);
}
.product__details-review .review-ratings-single span {
  color: #222;
  width: 20%;
  line-height: 1;
}
@media (max-width: 575px) {
  .product__details-review .review-ratings-single span {
    width: 30%;
  }
}
.product__details-review .review-text p {
  color: #222;
}
.product__details-review .review-meta span {
  color: #222;
  line-height: 1;
}
.product__details-review .review-input {
  width: 75%;
}
@media (max-width: 575px) {
  .product__details-review .review-input {
    width: 65%;
  }
}
.product__details-review .review-input input,
.product__details-review .review-input textarea {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  padding: 0 15px;
  margin-bottom: 30px;
}
.product__details-review .review-input textarea {
  line-height: 1.1;
  padding: 15px;
  height: 105px;
  outline: none;
}
.product__details-review .review-input-title {
  font-size: 12px;
  color: #555;
  width: 25%;
}
@media (max-width: 575px) {
  .product__details-review .review-input-title {
    width: 35%;
  }
}
.product__details-review .review-input-title::after {
  content: "*";
  color: #e02b27;
  font-size: 14px;
  margin: 0 0 0 5px;
}
.product__details-review .review-input .review-ratings-single ul li a {
  color: #c7c7c7;
}
.product__details-review .review-input .review-ratings-single ul li a:hover {
  color: var(--primary-color);
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .product__details-review .review-form {
    margin-top: 35px;
  }
}
.product__details-review .review-form h3,
.product__details-review .review-form > p {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
  color: #222;
}
.product__details-color span {
  font-size: 14px;
  color: #222;
  width: 8%;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .product__details-color span {
    width: 13%;
  }
}
@media (max-width: 575px) {
  .product__details-color span {
    width: 25%;
  }
}
.product__details-color ul {
  line-height: 1;
}
.product__details-color ul li {
  display: inline-block;
  margin-right: 5px;
  line-height: 1;
}
.product__details-color ul li a {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: #000;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.product__details-color ul li a.blue {
  background: blue;
}
.product__details-color ul li a.red {
  background: red;
}
.product__details-size span {
  font-size: 14px;
  color: #222;
  width: 100%;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .product__details-size span {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .product__details-size span {
    width: 100%;
  }
}
.product__details-size ul {
  line-height: 1;
}
.product__details-size ul li {
  display: inline-block;
  margin-right: 5px;
  line-height: 1;
}
.product__details-size ul li a {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-size: 12px;
  color: #222;
  border: 1px solid #dadada;
}
.product__details-size ul li a:hover {
  color: #ffffff;
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.product__details-quantity .t-y-btn {
  padding: 0 70px;
}
@media (max-width: 768px) {
  .product__details-quantity .t-y-btn {
    padding: 0 30px;
  }
}
.product__details-download-input {
  font-size: 14px;
  color: #222;
}
.product__details-download-input span {
  display: block;
  font-size: 13px;
}
.product__details-download-input span::after {
  content: "*";
  color: #e02b27;
  font-size: 14px;
  margin: 0 0 0 5px;
}
.product__details-download-input label:hover {
  cursor: pointer;
}
.product__details-download-btn {
  margin-left: 290px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .product__details-download-btn {
    margin-left: 180px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .product__details-download-btn {
    margin-left: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .product__details-download-btn {
    margin-left: 260px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .product__details-download-btn {
    margin-left: 60px;
  }
}
@media (max-width: 575px) {
  .product__details-download-btn {
    margin-left: 0px;
    margin-top: 15px;
  }
}
.product__details-download-btn a {
  color: var(--primary-color);
}
.product__details-group-top {
  background: #f6f6f6;
  padding: 5px 5px;
  margin-bottom: 10px;
}
.product__details-group-top h4 {
  font-size: 13px;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 0;
}
.product__details-group .product-group-left h3 {
  font-size: 13px;
  color: #666;
  font-weight: 400;
  margin-bottom: 6px;
}
.product__details-group .product-group-left .price {
  font-size: 14px;
  font-weight: 500;
  color: #222;
}
.product__details-group .product-group-left .price.new-price {
  color: var(--primary-color);
}
.product__details-group .product-group-left .price.old-price {
  text-decoration: line-through;
  color: #b1b1b1;
  margin-left: 7px;
}
.product__details-group .product-group-quantity input {
  border: 1px solid #ebebeb;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

/*********** cart toggle start ****************/
.cart__toggle {
  position: fixed;
  right: 25px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 2px solid #ebebeb;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  /* margin-right: 25px; */
  background: var(--primary-color);
  color: #ffffff;
  border-color: #fff;
  z-index: 99;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .cart__toggle {
    right: 10px;
    bottom: 120px;
  }
}
.cart__toggle::after {
  content: "\f290";
  font-family: "Font Awesome 5 Pro";
  font-size: 18px;
  color: #fff;
  position: absolute;
  top: 0;
  margin-right: 2px;
  line-height: 46px;
  right: 12px;
}
.cart__toggle:hover {
  background: var(--primary-color);
  color: #ffffff;
  border-color: #fff;
}
.cart__toggle:hover::after {
  color: #ffffff;
}
.cart__toggle .cart__total-item {
  background: #222;
  color: #ffffff;
}
.cart__toggle.cart__toggle-open {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}
.cart__toggle.cart__toggle-open::after {
  color: #ffffff;
}
.cart__toggle.cart__toggle-open .cart__total-item {
  background: #222;
  color: #ffffff;
}

.cart__mini.cart__opened {
  visibility: visible;
  opacity: 1;
  top: 100%;
}
.cart__mini-4 {
  border-color: var(--primary-color);
}
.cart__mini-4 .cart__price span {
  color: var(--primary-color);
}
.cart__mini-4 .cart__sub-total {
  color: var(--primary-color);
}
.cart__close {
  position: absolute;
  top: 15px;
  right: 15px;
}
.cart__close-btn {
  font-size: 16px;
  color: #222;
  background: transparent;
}
.cart__close-btn:hover {
  color: var(--primary-color);
}
.cart__title {
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 20px;
}
.cart__title h4 {
  font-size: 18px;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 0;
}
.cart__title span {
  font-size: 12px;
}
.cart__total-item {
  min-width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  position: absolute;
  top: -2px;
  left: 35px;
  color: #ffffff;
  background: var(--primary-color);
  border-radius: 100%;
  font-size: 10px;
}
.cart__content span {
  display: block;
}
.cart__item {
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 1px solid #ebebeb;
}
.cart__price span {
  color: var(--primary-color);
}
.cart__sub {
  padding-top: 20px;
  padding-bottom: 20px;
}
.cart__sub h6 {
  margin-bottom: 0;
}
.cart__sub-total {
  font-size: 14px;
  color: #222;
  font-weight: 500;
  color: var(--primary-color);
}
.cart__thumb {
  margin-right: 15px;
}
.cart__thumb img {
  width: 70px;
  /* height: 70px; */
}
/* border right */
.border-right-2 {
  border-right: 1px solid #f2f2f2 !important;
}
.border-right-2:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.cart-plus-minus {
  width: 180px;
}

.cart-plus-minus input {
  border: 0px;
  outline: 0px;
  background: none;
  font-weight: 400;
  color: #222;
  font-size: 14px;
  display: inline-block;
  height: 45px;
  list-style: 45px;
  padding: 0 50px;
  width: 180px;
  border: 1px solid #ebebeb;
  text-align: center;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

.cart-plus-minus .qtybutton {
  font-size: 20px;
  color: #222;
  display: inline-block;
  position: absolute;
  top: 50%;
  height: 22px;
  width: 22px;
  background: transparent;
  border-radius: 30px;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.cart-plus-minus .dec {
  left: 7px;
}

.cart-plus-minus .inc {
  right: 7px;
}

#slider-range {
  position: relative;
  margin-bottom: 25px;
}

.ui-widget.ui-widget-content {
  border: none;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  background: var(--primary-color);
  border-radius: 50%;
  border: none;
  outline: none;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.004);
}

.ui-slider-horizontal {
  height: 6px;
}

.ui-widget-content {
  background: #f0f0f0;
}

.ui-widget-header {
  background: var(--primary-color);
}

.ui-slider-horizontal .ui-slider-handle {
  top: -5px;
}

.ui-slider .ui-slider-handle {
  height: 15px;
  width: 15px;
  -webkit-transition: all 0s ease-out 0s;
  -moz-transition: all 0s ease-out 0s;
  -ms-transition: all 0s ease-out 0s;
  -o-transition: all 0s ease-out 0s;
  transition: all 0s ease-out 0s;
}

.ui-slider .ui-slider-handle:before {
  position: absolute;
  content: "";
  height: 6px;
  width: 6px;
  background: #ffffff;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

/* 16. Cart */
.table-content table {
  background: #ffffff;
  border-color: #eaedff;
  border-radius: 0;
  border-style: solid;
  border-width: 1px 0 0 1px;
  text-align: center;
  width: 100%;
  margin-bottom: 0;
}

.table-content .table > :not(:last-child) > :last-child > * {
  border-bottom-color: #eaedff;
}

.table-content .product-quantity {
  float: none;
}

.table-content table td.product-name {
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
}

.table-content table td.product-name a:hover {
  color: var(--primary-color);
}

.table-content table td {
  border-top: medium none;
  padding: 20px 10px;
  vertical-align: middle;
  font-size: 16px;
}

.table-content table th,
.table-content table td {
  border-bottom: 1px solid #eaedff;
  border-right: 1px solid #eaedff;
}

.product-quantity input {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  border: 1px solid #dcdcdc;
}

.table td,
.table th {
  border-top: 1px solid #eaedff;
}

.product-quantity > input {
  width: 80px;
  border-radius: 3px;
}

.table-content table td.product-subtotal {
  font-size: 16px;
}

.table-content table td .cart-plus-minus {
  float: none;
  margin: 0 auto;
}

.coupon-all {
  margin-top: 50px;
}

.coupon {
  float: left;
}

@media (max-width: 767px) {
  .coupon {
    float: none;
  }
}
#coupon_code {
  height: 55px;
  border: 2px solid #eaedff;
  padding: 0 15px;
  margin-right: 10px;
}

@media (max-width: 767px) {
  #coupon_code {
    margin-bottom: 15px;
  }
}
.coupon2 {
  float: right;
}

@media (max-width: 767px) {
  .coupon2 {
    float: none;
    margin-top: 15px;
  }
}

/*----------------------------------------*/
/*  07. SALE CSS START
/*----------------------------------------*/
.sale__slider .owl-nav {
  display: flex;
  position: absolute;
  top: -70px;
  right: 0;
}
.sale__slider .owl-nav div {
  margin: 0 7px;
}
.sale__slider .owl-nav div button {
  font-size: 24px;
  color: #333;
  background: transparent;
  -webkit-transition: all 0.1s ease-out 0s;
  -moz-transition: all 0.1s ease-out 0s;
  -ms-transition: all 0.1s ease-out 0s;
  -o-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}
.sale__slider .owl-nav div button:hover {
  color: var(--primary-color);
}

.sidebar__widget-title {
  padding-bottom: 6px;
  border-bottom: 1px solid #ebebeb;
  position: relative;
  font-size: 20px;
  font-weight: 500;
}
.sidebar__widget-title::after {
  position: absolute;
  content: "";
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 50px;
  background: var(--primary-color);
}
.sidebar__categories ul li {
  padding: 10px 0;
  border-bottom: 1px solid #e6e6e6;
}
.sidebar__categories ul li a {
  font-size: 14px;
  color: #222;
}
.sidebar__search {
  position: relative;
}
.sidebar__search input {
  padding-left: 25px;
  padding-right: 55px;
  background: #f4f4f4;
  border-radius: 3px;
  border: 1px solid #e6e6e6;
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-size: 12px;
}
.sidebar__search input::placeholder {
  color: #fff;
  font-size: 12px;
}
.sidebar__search button {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 25px;
  font-size: 16px;
  color: #bcbcbc;
}
.sidebar__archive ul li {
  padding: 10px 0;
  border-bottom: 1px solid #e6e6e6;
}
.sidebar__archive ul li a {
  font-size: 14px;
  color: #222;
}

/*----------------------------------------*/
/*  10. CATEGORIES CSS START
/*----------------------------------------*/
.category__title span {
  font-size: 14px;
  text-transform: capitalize;
  display: inline-block;
  margin-bottom: 15px;
}
.category__title span:hover a {
  color: #d01418;
}
.category__title h3 {
  font-size: 18px;
  margin-bottom: 20px;
}
.category__title h3:hover a {
  color: #d01418;
}
.category__item {
  padding-right: 10px;
  margin-right: 5px;
}
.category__links ul li a {
  font-size: 14px;
  color: #222;
}
.category__links ul li a:hover {
  color: #d01418;
}

/*----------------------------------------*/
/*  13. BREADCRUMB CSS START
/*----------------------------------------*/
.breadcrumb__wrapper {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.breadcrumb__wrapper .breadcrumb {
  margin-bottom: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 15px 0;
  margin-bottom: 0;
  width: max-content;
}
.breadcrumb__wrapper .breadcrumb-item {
  white-space: nowrap;
  font-size: 13px;
}
.breadcrumb__wrapper .breadcrumb-item a {
  display: inline-block;
  font-size: 13px;
  color: #222 !important;
}
.breadcrumb__wrapper .breadcrumb-item.active {
  color: var(--primary-color) !important;
}
.breadcrumb__wrapper .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--primary-color);
  content: var(--bs-breadcrumb-divider, ">");
}

.breadcrumb__wrapper::-webkit-scrollbar {
  display: none;
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
}

/*----------------------------------------*/
/*  15. CONTACT CSS START
/*----------------------------------------*/
.contact__map {
  height: 600px;
}
.contact__map iframe {
  width: 100%;
  height: 100%;
}
.contact__title {
  padding-bottom: 6px;
  border-bottom: 1px solid #ebebeb;
  position: relative;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 30px;
}
.contact__title::after {
  position: absolute;
  content: "";
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 50px;
  background: var(--primary-color);
}
.contact__input {
  margin-bottom: 20px;
}
.contact__input input,
.contact__input textarea {
  width: 100%;
  height: 35px;
  line-height: 35px;
  border: 1px solid #e6e6e6;
  outline: none;
  padding: 0 15px;
}
.contact__input input:focus,
.contact__input textarea:focus {
  border-color: var(--primary-color);
}
.contact__input textarea {
  height: 150px;
  line-height: 1.5;
  padding: 15px;
  resize: none;
}
.contact__input span {
  color: #555;
  display: inline-block;
  position: relative;
}
.contact__input span::after {
  content: "*";
  color: #e02b27;
  font-size: 1.2rem;
  margin: 0 0 0 5px;
}
.contact__hotline-icon {
  margin-right: 15px;
}
.contact__hotline-icon i {
  font-size: 35px;
  color: var(--primary-color);
}
.contact__hotline-info span {
  font-weight: 400;
  display: block;
  color: #666;
}
.contact__hotline-info h6 {
  font-size: 18px;
  color: #666;
  margin-bottom: 0;
}
.contact__address ul li p {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.contact__address ul li p span {
  font-weight: 500;
}
.contact__social span {
  margin-right: 10px;
}
.contact__social ul {
  display: inline-block;
}
.contact__social ul li {
  display: inline-block;
  margin-right: 5px;
}
.contact__social ul li a {
  display: inline-block;
  font-size: 14px;
  text-align: center;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  color: #888;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 2px solid #e6e6e6;
  border-radius: 50%;
  margin-right: 10px;
  border-width: 1px;
}
.contact__social ul li a:hover {
  color: #ffffff;
  border-color: var(--primary-color);
  background: var(--primary-color);
}
.contact__text {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .contact__form {
    margin-top: 50px;
  }
}

/*----------------------------------------*/
/*  00. FOOTER CSS START
/*----------------------------------------*/
.footer__area ul {
  margin: 0;
  padding: 0;
}
.footer__area ul li {
  list-style: none;
}
.footer__widget {
  margin-bottom: 40px;
}
.footer__widget-title h4 {
  font-size: 16px;
  color: #ddd;
  text-transform: capitalize;
  margin-bottom: 33px;
  padding-top: 15px;
}
.footer__widget-title-2 h4 {
  color: #ffffff;
}
.footer__widget-title-4 h4 {
  color: #fff;
}
.footer__hotline .icon i {
  font-size: 55px;
  color: var(--primary-color);
}
.footer__hotline .text h4 {
  font-size: 14px;
  color: #ddd;
  margin-bottom: 0;
}
.footer__hotline .text span {
  font-size: 18px;
  font-weight: 500;
  color: var(--primary-color);
}
.footer__hotline-4 .icon i {
  color: #ffffff;
}
.footer__hotline-4 .text span {
  color: #ffffff;
}
.footer__info ul li {
  margin-bottom: 5px;
}
.footer__info ul li span {
  font-size: 14px;
  color: #ddd;
}
.footer__info-4 ul li span {
  color: #bcbcbc;
}
.footer__link ul li {
  margin-bottom: 6px;
}
.footer__link ul li a {
  color: #ddd;
  font-size: 14px;
}
.footer__link ul li a:hover {
  color: var(--primary-color);
  padding-left: 15px;
}
.footer__link-2 ul li a {
  color: #999;
}
.footer__link-4 ul li a {
  color: #fff;
}
.footer__link-4 ul li a:hover {
  color: #fff;
}
.footer__info-4 ul li span {
  color: #fff;
}
.footer__info-4 ul li span a {
  color: #fff;
}
.footer__bottom {
  border-top: 1px solid #4d5462;
}
.footer__links p {
  margin-bottom: 0;
}
.footer__links p a {
  color: #9da3af;
  font-size: 14px;
  padding: 0 5px;
}
.footer__links p a:hover {
  color: var(--primary-color);
}
.footer__download {
  margin-top: 25px;
}
.footer__download h4 {
  font-size: 14px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__copyright-text {
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer__copyright-text {
    margin-bottom: 15px;
  }
}
@media (max-width: 575px) {
  .footer__copyright-text {
    margin-bottom: 15px;
  }
}
.footer__copyright-text p {
  color: #767676;
  margin-bottom: 0;
}
.footer__copyright-text p a {
  color: var(--primary-color);
}
.footer__copyright-text-2 p {
  color: #bcbcbc;
}
.footer__copyright-text-2 p a {
  color: #d01418;
}
.footer__copyright-inner {
  border-top: 1px solid #393939;
}
.footer__copyright-2 {
  border-top: 1px solid #383838;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__payment {
    float: left;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer__payment {
    float: left;
  }
}
@media (max-width: 575px) {
  .footer__payment {
    float: left;
  }
}
.footer__payment a {
  opacity: 0.4;
}
.footer__payment a:hover {
  opacity: 0.6;
}
.footer__social ul li {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 10px;
}

.footer__social ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #000;
  text-align: center;
  line-height: 44px;
  background: #fff;
  transition: 0.4s;
}
.footer__social ul li a:hover {
  background: var(--primary-color);
  color: #fff;
}
.footer__social ul li a i {
  font-size: 16px;
}
.footer__subscribe p {
  color: #bcbcbc;
}
.footer__subscribe p span {
  font-weight: 500;
  color: #ffffff;
}
.footer__subscribe-form input {
  width: 100%;
  padding: 10px 15px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #394350;
  color: #bcbcbc;
}
.footer__subscribe-form input::placeholder {
  color: #394350;
  font-size: 14px;
}
.footer__subscribe-form button {
  height: 50px;
  margin: 0;
  padding: 0 50px;
  border-radius: 30px;
  background: #fff;
  color: #000;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
}

/* Category Product Area style Start */

.common-tab {
  justify-content: center;
  border: none;
}
.common-tab.nav .nav-item .nav-link {
  margin: 0 5px;
  border: 1px solid #000;
  padding: 5px 15px;
  border-radius: 30px;
  color: #000;
  background: #fff;
  font-size: 15px;
  letter-spacing: 0.025em;
}
.common-tab.nav .nav-item .nav-link.active {
  background: #000;
  color: #fff;
}
.tab-content .viewall-btn {
  letter-spacing: 0.3em;
  border: 1px solid #ddd;
  font-size: 12px;
  padding: 8px 14px;
  text-transform: uppercase;
  color: #000;
  border-radius: 0;
}
.tab-content .viewall-btn:hover {
  border: 1px solid #000;
}
.btn:focus {
  box-shadow: none !important;
}

/**************** category-section *****************/

.category_area {
  padding-top: 20px;
}

.category_area .category_item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}

.category_area .category_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.category_area .category_item:hover img {
  transform: scale(1.1);
}

.category_area .category_item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0) 50%
  );
  z-index: 1;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Allow clicks to pass through */
}

.category_area .category_item:hover::before {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.2) 50%
  );
}

.category_area .category_name {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  z-index: 2;
  text-transform: uppercase;
  margin: 0;
  transition: transform 0.3s ease;
}

.category_area .category_item:hover .category_name {
  transform: translateY(-5px);
}

.category_area .w-img {
  position: relative;
  display: block;
  height: 530px;
}

@media (max-width: 768px) {
  .category_area .w-img {
    height: 300px;
  }
  .category_area .category_name {
    font-size: 20px;
  }
}

/*************** Product Detail Accordion ***********/
.accordion-button {
  font-weight: bold;
}
.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background: #fff;
  box-shadow: none;
}

.review-wrapper {
  background-color: white;
  border: 1px solid #ddd;
  padding: 20px;
}
.review-form {
  background-color: white;
  border: 1px solid #ddd;
  padding: 20px;
}


/*************** Product Detail Image Gallery ***********/
.small-img-column-container {
  height: 100%; /* Use the parent's height */
}

.small-img-column {
  height: 100%; /* Match container height */
  max-height: 100%;
}



.product-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0.9rem;
    background-color: #ffffff;
    /* border-radius: 1rem; */
}

/* Vertical Small Images Column */
.small-img-column-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  width: 80px; /* Adjust the width if needed */
  overflow: hidden;
}

.small-img-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-height: auto; /* Height for visible images */
  /* overflow: hidden; */
}

.small-img-item {
  width: 100%;
  cursor: pointer;
  /* border: 2px solid transparent; */
  /* border-radius: 0.5rem; */
  padding: 2px;
}



.small-img-item img {
  width: 100%;
  height: auto;
  /* border-radius: 0.375rem; */
  transition: transform 0.2s;
}

/* Arrows */
.arrow-top,
.arrow-bottom {
  cursor: pointer;
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  font-size: 15px;
  color: #555;
}

.arrow-top {
  top: -10px;
}

.arrow-bottom {
  bottom: -10px;
}

/* Main Image */
#ProductImg {
  flex: 1;
}

#ProductImg img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 0.75rem;
}


/* General styles for the filter sidebar */

.product__widget {
  /* position: sticky; */
  /* top: 200px;  */
  font-size: 14px;
  background: #fff;
  border: 1px solid #ddd;
  padding: 15px;

  overflow-y: auto;
}
.product__filter #offcanvasHeader {
  display: block !important;
}

/* Adjust styles for tablets */
@media (max-width: 992px) {
  .product__widget-content {
    max-height: 150px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .product__widget-title {
    font-size: 15px;
    padding: 8px;
  }
}

/* Adjust styles for mobile devices */
@media (max-width: 768px) {
  /* .product__widget {
    max-height: 400px;
    padding: 8px;
    font-size: 12px;
  } */

  .product__widget-content {
    max-height: 100px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .product__widget-title {
    font-size: 14px;
    padding: 6px;
  }

  .product__widget-content ul li label {
    padding: 6px;
    font-size: 12px;
  }
}

/* Adjust styles for very small screens */
@media (max-width: 576px) {
  /* .product__widget {
    max-height: 300px;
    padding: 5px;
  } */

  .product__widget-title {
    font-size: 13px;
    padding: 5px;
  }

  .product__widget-content ul li label {
    font-size: 11px;
    padding: 5px;
  }
}

.product__widget-content {
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
  margin-bottom: 15px;
  max-height: 200px;
  overflow-y: auto;
}

.product__widget-title {
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 10px 0;
}
.product__widget-title:hover {
  color: #222;
}

.product__widget-title:focus {
  outline: none;
}

/* Filter options styles */
.product__widget-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product__widget-content ul li {
  margin: 5px 0;
}

.product__widget-content ul li label {
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s;
}

.product__widget-content ul li input[type="checkbox"] {
  margin-right: 10px;
  cursor: pointer;
}

.product__widget-content ul li .filter-title {
  color: #333;
  font-size: 14px;
  flex: 1;
}

.product__widget-content ul li label input[type="checkbox"],
.product__widget-content ul li label .filter-title {
  cursor: pointer;
}

/* Custom Scrollbar Styling */
.product__widget::-webkit-scrollbar,
.product__widget-content::-webkit-scrollbar {
  width: 6px;
}

.product__widget::-webkit-scrollbar-thumb,
.product__widget-content::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 6px;
}

.product__widget::-webkit-scrollbar-thumb:hover,
.product__widget-content::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0; /* Slightly darker gray on hover */
}

.product__widget::-webkit-scrollbar-track,
.product__widget-content::-webkit-scrollbar-track {
  background: #efefef;
  border-radius: 6px;
}

.product__widget-title::after {
  content: "▼";
  font-size: 12px;
  margin-left: 10px;
  transition: transform 0.3s ease, content 0.3s ease;
  position: absolute;
  top: 12px;
  right: 0;
}

.product__widget-title[aria-expanded="false"]::after {
  content: "▲"; /* Up arrow when closed */
}

/* .mobile-filter-btn {
  display: none;
}
@media (max-width: 991px) {
 .mobile-filter-btn {
      display: block;
  }
} */
@media (max-width: 991px) {
  #offcanvasFilter {
    width: 300px !important;
  }
}

/* General styling for size selection */
.product__details-options {
  display: flex;
  gap: 10px;
}

.product__details-options .size-label.stock-out:hover,
.product__details-options .size-label.stock-out:hover .size-option {
  background: none;
}
.product__details-options .size-label.stock-out,
.product__details-options .size-label.stock-out .size-option {
  color: #b1b1b1;
  cursor: default;
}

.size-label.stock-out .size-option {
  text-decoration: line-through; /* adds line through text */
}

/* Styling for size options */
.size-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.size-label:hover,
.size-label:hover .size-option {
  background: #000;
  color: #fff;
}
.size-label:hover .size-option {
  background: #000;
  color: #fff;
  border: none;
}

.size-label input[type="radio"] {
  display: none;
}

/* When the radio input is checked, style the parent label */
.size-label input[type="radio"]:checked + .size-option {
  background-color: #000;
  color: #fff;
  border-color: #000;
  border-radius: 4px;
  width: 100%;
}

/* Fix for size-option text alignment */
.size-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #333;
}

/* **********************
  Topbar offer css
******************************/

.header__top {
  position: relative;
  height: 40px;
  font-size: 14px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
}

.header__top .text-slider {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header__top .text-slide {
  position: absolute;
  width: 100%;
  text-align: center;
  color: white;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.header__top .text-slide.active {
  opacity: 1;
}
.header__top .btn-close {
  padding: 0.79rem 1rem;
}

/* Header User icon style */

.user-icon .dropdown_child {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin: 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1050;
  list-style: none;
  width: 150px;
  border-radius: 4px;
}

.user-icon:hover .dropdown_child,
.user-icon .dropdown_child:hover {
  display: block;
}

.user-icon .dropdown_child li {
  margin: 0;
  padding: 0;
}

.user-icon .dropdown_child li a {
  display: block;
  padding: 8px 12px;
  width: 100%;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

.user-icon .dropdown_child li a:hover {
  color: var(--primary-color);
  background-color: #f9f9f9;
  border-radius: 4px;
}

.user-icon {
  position: relative;
}
.cart__mini-wrapper .cart-plus-minus input {
  height: 30px;
}

.logo img {
  width: 62px;
  margin: 5px 0;
}
.footer__logo img {
  width: 100px;
}
@media (max-width: 768px) {
  .logo img {
    width: 50px;
    margin: 5px 0;
  }
}
.header__action .btn-primary {
  background: var(--primary-color);
  padding: 0 20px;
  margin-right: 10px;
}
.modern-btn {
  background: var(--primary-color);
  border: none;
  color: white;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 25px;
  transition: all 0.3s ease;
  min-width: 120px; /* Prevents text from wrapping */
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap; /* Ensures text stays in one line */
}
.modern-btn:hover {
  color: #fff;
}

.header__action {
  gap: 10px; /* Adds spacing between buttons */
}

/* back to top */

.progress-wrap {
  position: fixed;
  right: 25px;
  bottom: 50px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(95, 58, 252, 0.2);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .progress-wrap {
    right: 12px;
    bottom: 70px;
  }
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.progress-wrap::after {
  position: absolute;
  content: "\f176";
  font-family: "Font Awesome 5 Pro";
  text-align: center;
  line-height: 46px;
  font-size: 20px;
  color: #2c3941;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap svg.progress-circle path {
  stroke: #2c3941;
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

/* Header top css */

.header__info .search-icon {
  width: 40px;
  height: 40px;
  border: 2px solid #ddd;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  margin-right: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header__info .logo-container {
  text-align: center;
}
.header__info .logo-container img {
  max-width: 100%;
}
.offcanvas__logo img {
  width: 60px;
}
.header__info.header-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header__info.header-icon {
  font-size: 20px;
  color: #333;
  cursor: pointer;
  position: relative;
}
.header__info.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #4caf50;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header__info.search-offcanvas .offcanvas-header {
  padding: 1rem 1rem 0.5rem;
}
.header__info.search-offcanvas .search-form {
  padding: 0 1rem;
}
.header__info.search-input {
  border: none;
  border-bottom: 2px solid #ddd;
  border-radius: 0;
  padding: 10px 0;
}
.header__info.search-input:focus {
  box-shadow: none;
  border-color: #4caf50;
}

.search-offcanvas {
  padding: 20px;
  height: 100px;
}
.search-offcanvas .offcanvas-body {
  background: #fff;
  padding: 20px;
  overflow-y: hidden;
}

.search-offcanvas .offcanvas-body .search-form input {
  background-color: #f8f8f8;
  height: 48px;
  margin: 0;
}
.search-offcanvas .offcanvas-body .btn-close {
  margin-left: 20px;
  font-size: 20px;
}

@media (max-width: 768px) {
  .header__info .search-icon {
    width: 40px;
    height: 40px;
    border: none;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
  }
}

/**************** Home Page Catgory style ******************/

.h_category_area {
  position: relative;
}
.h_category_area .centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin-top: 2rem;
}
.h_category_area .centered-text h1 {
  color: #fff;
}
.h_category_area .centered-text p {
  color: #fff;
}
.h_category_area .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.section-bg {
  background-color: #f8f9fa;
}
.image-container {
  position: relative;
}
.image-text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  font-size: 18px;
}
.centered-text {
  text-align: center;
  margin-top: 2rem;
}

.features__item h5 {
  font-size: 30px;
  margin-bottom: 0.5rem;
}
.features__item a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  padding: 10px;
}

/*********** Product Filter icon style **************/

.mobile-filter-btn {
  padding: 5px 30px;
  border-radius: 25px;
}

.accordion-item {
  border: none;
}

/*==== FOOTER FIXED MENU START ====  */
.footer_nav {
  display: none;
  text-align: center;
  padding: 10px 0;
  padding-bottom: 4px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 99;
  border-top: 1px solid #ddd;
}

.footer_nav ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin: 0;
  padding: 0;
}
.footer_nav ul li a {
  line-height: 18px;
  cursor: pointer;
}

.footer_nav ul li a span {
  display: block;
  font-size: 14px;
}
.footer_nav ul li.mobile_home a span i {
  font-size: 20px;
}

.footer_nav ul li {
  position: relative;
  list-style: none;
}

.footer_nav ul li i {
  font-size: 14px;
}

.item_count {
  position: absolute;
  top: -5px;
  right: 25px;
  background: #fe5200;
  width: 15px;
  height: 15px;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  border-radius: 50px;
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .footer_nav {
    display: block;
  }
  li.mobile_home {
    border: 2px solid #ddd;
    margin: -9px auto auto;
    background: var(--primary-color);
    padding-top: 12px;
    border-radius: 50%;
    width: 47px;
    height: 47px;
    color: #fff;
  }
}
/*********** FOOTER FIXED MENU END ************/

/************** Cart Page *************************/

.btn-primary {
  /* background: #b9a89e !important; */
  color: #fff !important;
  border: none;
}

/* ****************************** */

#sidebar-nav .list-group-item.active {
  background-color: var(--primary-color);
  border: none;
}

/************** Login Page *************************/
.login-body {
  background: #fff;
  box-shadow: 0 2px 10px #ddd;
  margin-bottom: 100px;
}
.login-banner {
  background: #efefef;
  width: 100%;
  height: 100%;
  color: #222;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 35px 25px;
}
.login-banner h2 {
  font-size: 30px;
  color: #222 !important;
}
.login-form {
  padding: 35px 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-form-header h3 {
  font-size: 28px;
  margin: 0px 0 40px;
}
.login-form form input {
  border-radius: 50px;
  padding: 20px 35px;
}
.login-form .form-group {
  position: relative;
  margin-bottom: 1rem;
}
.login-form .form-group label {
  position: absolute;
  top: 10px;
  left: 15px;
  color: #022335;
}
.login-form .form-control {
  height: calc(1.5em + 0.75rem + 2px);
}
.login-form form input {
  border-radius: 50px;
  padding: 20px 35px;
}
.login-form input[type="submit"] {
  border-radius: 50px;
  background: #022335;
  border: 0;
  outline: 0;
  border: 1px solid #022335;
  transition: all 0.3s;
  color: #fff;
  padding: 5px;
  font-size: 18px;
}

/* Checkout Css */

.checkout-right-area {
  position: sticky;
  top: 200px;
}
.payment-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.payment-option {
  display: flex;
  margin-bottom: 10px;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.payment-option input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.payment-option img {
  height: 30px;
}

/* Style when selected */
.payment-option input:checked {
  accent-color: #007bff;
}

.payment-option input:checked + img,
.payment-option:has(input:checked) {
  border-color: #007bff;
  background-color: #f8f9fa;
}

.payment-option:hover {
  border-color: #007bff;
  background-color: #f8f9fa;
}

.payment-option label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}