/* [Master Stylesheet v-1.0.0] */
/* :: :: 1.0 Import Fonts */
@import url(../css/bootstrap.min.css);
@import url(../css/owl.carousel.css);
@import url(../css/animate.css);
@import url(../css/magnific-popup.css);
@import url(../css/jquery-ui.min.css);
@import url(../css/nice-select.css);
@import url(../css/font-awesome.min.css);
@font-face {
font-family: 'helveticaneuebold';
src: url("../fonts/helvetica_neu_bold-webfont.woff2") format("woff2"), url("../fonts/helvetica_neu_bold-webfont.woff") format("woff");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'helveticaneuemedium';
src: url("../fonts/helveticaneue_medium-webfont.woff2") format("woff2"), url("../fonts/helveticaneue_medium-webfont.woff") format("woff");
font-weight: normal;
font-style: normal; }
/* :: 2.0 Import All CSS */
/* :: 3.0 Base CSS */
* {
margin: 0;
padding: 0; }

body {
font-family: "helveticaneuemedium";
font-size: 16px; }

main {
display: block; 
min-height: calc(100vh - 250px); 
}

h1,
h2,
h3,
h4,
h5,
h6 {
color: #fffcfc;
line-height: 1.3;
font-weight: 400; }

p {
color: #6d6d6d;
font-size: 16px;
line-height: 1.9;
font-weight: 400; }

a {
-webkit-transition: all 500ms ease 0s;
transition: all 500ms ease 0s;
text-decoration: none;
outline: 0 solid transparent;
color: #131212;
font-weight: 400;
font-size: 12px; }
a:hover, a:focus {
  -webkit-transition: all 500ms ease 0s;
  transition: all 500ms ease 0s;
  text-decoration: none;
  outline: 0 solid transparent;
  color: #131212;
  font-weight: 400;
  font-size: 12px; }

ul,
ol {
margin: 0; }
ul li,
ol li {
  list-style: none; }

img {
height: auto;
max-width: 100%; }

/* Spacing */
.mt-15 {
margin-top: 15px !important; }

.mt-30 {
margin-top: 30px !important; }

.mt-50 {
margin-top: 50px !important; }

.mt-70 {
margin-top: 70px !important; }

.mt-100 {
margin-top: 100px !important; }

.mb-15 {
margin-bottom: 15px !important; }

.mb-30 {
margin-bottom: 30px !important; }

.mb-50 {
margin-bottom: 50px !important; }

.mb-70 {
margin-bottom: 70px !important; }

.mb-100 {
margin-bottom: 100px !important; 
/* pointer-events: none;  */
}

.ml-15 {
margin-left: 15px !important; }

.ml-30 {
margin-left: 30px !important; }

.ml-50 {
margin-left: 50px !important; }

.mr-15 {
margin-right: 15px !important; }

.mr-30 {
margin-right: 30px !important; }

.mr-50 {
margin-right: 50px !important; }

/* Height */
.height-400 {
height: 400px !important; }

.height-500 {
height: 500px !important; }

.height-600 {
height: 600px !important; }

.height-700 {
height: 700px !important; }

.height-800 {
height: 800px !important; }

/* Section Padding */
.section-padding-100 {
padding-top: 20px;
padding-bottom: 100px; }

.section-padding-100-0 {
padding-top: 100px;
padding-bottom: 0; }

.section-padding-0-100 {
padding-top: 0;
padding-bottom: 100px; }

/* Section Heading */
.section-heading {
margin-bottom: 50px;
position: relative;
z-index: 1; }
.section-heading h2 {
  font-size: 30px;
  margin-bottom: 0;
  text-transform: capitalize;
  font-weight: 600; }
.section-heading.text-left {
  text-align: left !important; }

/* Miscellaneous */
.bg-img {
background-position: center center;
background-size: cover;
background-repeat: no-repeat; }

.bg-white {
background-color: #ffffff !important; }

.bg-dark {
background-color: #000000 !important; }

.bg-transparent {
background-color: transparent !important; }

.font-bold {
font-weight: 700; }

.font-light {
font-weight: 300; }

.bg-overlay,
.bg-overlay-white {
position: relative;
z-index: 2;
background-position: center center;
background-size: cover; }
.bg-overlay:hover,
.bg-overlay-white:hover {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: ""; }

.bg-overlay:hover {
background-color: rgba(0, 0, 0, 0.5); }

.bg-overlay-white:hover {
background-color: rgba(255, 255, 255, 0.9); }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
right: 0;
padding-right: 0;
width: 30px;
height: 30px;
background-color: #fbb710;
line-height: 30px;
text-align: center;
position: absolute;
top: 40px;
right: -30px; }
@media only screen and (max-width: 767px) {
  .mfp-image-holder .mfp-close,
  .mfp-iframe-holder .mfp-close {
    right: 0; } }

.navbar-toggler {
background-color: #fbb710;
border-radius: 0;
margin-bottom: 15px; }
.navbar-toggler i {
  font-size: 12px;
  color: #fff; }

@media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar {
  display: block; } }
@media only screen and (max-width: 767px) {
.navbar {
  display: block; } }

.mobile-nav {
position: relative;
width: 100%;
height: 70px;
background-color: #fff;
z-index: 300;
top: 0;
left: 0;
right: 0;
padding: 0.5em 2em;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
display: none; }

.mobile-nav.visible {
display: flex;
}

.techfit-navbar-toggler .techfit-navbar-items {
  display: none; /* hide navbar items by default */
}

.techfit-navbar-toggler.active .techfit-navbar-items {
  display: block; /* show navbar items when toggle button is active */
}

  /* Mobile view adjustments */
@media only screen and (max-width: 767px) {
  .mobile-nav {
      display: flex; /* Use flexbox for layout */
      align-items: center; /* Vertically align items */
      justify-content: space-between; /* Space out items */
      padding: 10px; /* Adjust padding if necessary */
      background-color: #ffffff; /* Background color for the navbar */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .mobile-nav .techfit-navbar-toggler {
      cursor: pointer;
      display: flex; /* Use flexbox to align spans */
      flex-direction: column; /* Stack spans vertically */
      align-items: center; /* Center align toggler vertically */
      margin-right: 15px; /* Ensure no left margin */
      position: absolute; /* Position it to the left */
      left: 10px; /* Adjust as needed to move it to the left */
  }

  .mobile-nav .techfit-navbar-toggler > span {
    width: 28px;
    height: 3px;
    background-color: #3310fb; /* Color of the hamburger lines */
    display: block;
    margin-bottom: 5px;
    border-radius: 2px; /* Rounded corners for lines */
}


  .mobile-nav .techfit-navbar-toggler span:last-child {
      margin-bottom: 0; /* Remove margin from the last line */
  }

  .mobile-nav .techfit-navbar-brand {
      flex: 1; /* Allow brand to take up remaining space */
      display: flex; /* Use flexbox for logo alignment */
      align-items: center; /* Center align logo vertically */
      max-width: 100px; /* Max width for logo */
      margin-left: 30px;
      margin-bottom: 10px;
  }

  .mobile-nav .techfit-navbar-brand a {
      display: block;
      max-width: 100%; /* Ensure logo scales properly */
  }

  .techfit-navbar-items {
      display: none; /* Hide the items by default */
      position: relative; /* Position the menu absolutely to overlay */
      top: 200px; /* Adjust based on height of navbar */
      left: 0; /* Align with left edge */
      right: 0; /* Align with right edge */
      background-color: #dbdbdb; /* Background color for the menu */
      padding: 15px 0; /* Padding for menu items */
      list-style-type: none; /* Remove bullet points */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add shadow for menu */
      z-index: 1000; /* Ensure it sits above other elements */
      margin-top: 30px;
  }

  .techfit-navbar-items a {
      display: block; /* Make each link a block element */
      text-transform: uppercase; /* Transform text to uppercase */
      font-size: 16px; /* Font size for readability */
      padding: 15px 20px; /* Padding for each link */
      color: #131212; /* Text color */
      text-decoration: none; /* Remove underline */
  }

  .techfit-navbar-items a:hover,
  .techfit-navbar-items a:focus {
      color: #fbb710; /* Hover color */
  }

  

  /* Show the menu items when the toggler is clicked */
  .techfit-navbar-toggler.active + .techfit-navbar-items {
      display: block; /* Show the items */
  }

  /* .navbar-close {
      position: relative;
      top: 3px; 
      right: 60px;
  }*/

  .mobile-nav-close {
      left: 10px; /* Adjust position */
      font-size: 26px; /* Adjust font size */
      position: relative;
      top: 20px;
      margin-bottom: 15px;
  }
}

/* ScrollUp */
#scrollUp {
background-color: #fbb710;
border-radius: 0;
bottom: 60px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
color: #ffffff;
font-size: 24px;
height: 40px;
line-height: 40px;
right: 60px;
text-align: center;
width: 40px;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; }
#scrollUp:hover {
  background-color: #131212; }
@media only screen and (max-width: 767px) {
  #scrollUp {
    bottom: 30px;
    right: 30px; } }

/* Essence Button */
.techfit-btn {
display: inline-block;
min-width: 160px;
height: 55px;
color: #ffffff;
border: none;
border-radius: 0;
padding: 0 7px;
font-size: 18px;
line-height: 56px;
background-color: #fbb710;
font-weight: 400; }
.techfit-btn.active, .techfit-btn:hover, .techfit-btn:focus {
  font-size: 18px;
  color: #ffffff;
  background-color: #131212; }

/* :: 5.0 Welcome Area CSS */
.main-content-wrapper {
padding-top: 0;
padding-bottom: 0; /* Remove any top and bottom padding */
position: relative;
z-index: 1;
justify-content: space-between;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .main-content-wrapper {
    margin-top: -10px;
    z-index: 100; 
    overflow-x: hidden; 
    } }
    
.main-content-wrapper .header-area {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  position: relative;
  z-index: 9999;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 320px;
  flex: 0 0 320px;
  width: 320px;
  max-width: 320px;
  background-color: #fff;
  padding: 10px 20px; 
  }

  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-content-wrapper .header-area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 280px;
      flex: 0 0 280px;
      width: 280px;
      max-width: 280px;
      padding: 50px; } }
  @media only screen and (max-width: 767px) {
    .main-content-wrapper .header-area {
      -webkit-transition-duration: 500ms;
      transition-duration: 500ms;
      -webkit-box-flex: 0;
      -ms-flex: 0 0 320px;
      flex: 0 0 320px;
      width: 320px;
      max-width: 320px;
      position: fixed;
      z-index: 4000;
      top: 0;
      left: -350px;
      height: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
      display: block; } }
  .main-content-wrapper .header-area.bp-xs-on {
    left: 0; }
  .main-content-wrapper .header-area .nav-close {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 15px;
    background-color: red;
    text-align: center;
    color: #fff;
    line-height: 40px;
    font-size: 12px;
    cursor: pointer;
    background-color: #fbb710;
    display: none; }
    /* @media only screen and (max-width: 767px) {
      .main-content-wrapper .header-area .nav-close {
        display: block; } }
    .main-content-wrapper .header-area .nav-close:hover {
      background-color: #131212; } */
  .main-content-wrapper .header-area .logo {
    margin-bottom: 5px;
    display: block;
    justify-content: center;
    align-items: center }
  .main-content-wrapper .header-area .techfit-nav li a {
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    padding: 20px 0;
    display: block;
    line-height: 0.9;
    color: #131212;
    font-weight: normal; }
    .main-content-wrapper .header-area .techfit-nav li a::after {
      -webkit-transition-duration: 500ms;
      transition-duration: 500ms;
      width: 30px;
      height: 3px;
      position: absolute;
      top: 50%;
      margin-top: -1.5px;
      left: -150px;
      background-color: #fbb710;
      z-index: 10;
      content: ''; }
    .main-content-wrapper .header-area .techfit-nav li a:hover, .main-content-wrapper .header-area .techfit-nav li a:focus {
      color: #fbb710; }
  .main-content-wrapper .header-area .techfit-nav li:hover a::after, .main-content-wrapper .header-area .techfit-nav li:focus a::after {
    left: -75px; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .main-content-wrapper .header-area .techfit-nav li:hover a::after, .main-content-wrapper .header-area .techfit-nav li:focus a::after {
        left: -50px; } }
  .main-content-wrapper .header-area .techfit-nav li.active a::after {
    left: -75px; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .main-content-wrapper .header-area .techfit-nav li.active a::after {
        left: -50px; } }

  .main-content-wrapper .header-area .techfit-btn-group .techfit-btn {
    width: 160px;
    display: block; }

    @media (max-width: 767px) {
  .logo {
      text-align: center; /* Center logo if needed */
      margin-bottom: 10px; /* Space between logo and navigation */
  }

  .main-content-wrapper .header-area .techfit-btn-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px; /* Adjust margin */
  }

  .main-content-wrapper .header-area .techfit-btn-group a {
      margin-bottom: 10px; /* Space between buttons */
      padding: 10px 20px; /* Adjust padding */
      font-size: 14px; /* Adjust font size */
  }
}

  .main-content-wrapper .header-area .cart-fav-search a {
    display: block;
    text-transform: uppercase;
    font-size: 16px;
    padding: 15px 0;
    color: #131212;
    line-height: 1; 
    }
    
    .main-content-wrapper .header-area .cart-fav-search a span {
      color: #b42424; }
    .main-content-wrapper .header-area .cart-fav-search a img {
      margin-right: 5px; }
    .main-content-wrapper .header-area .cart-fav-search a:hover, .main-content-wrapper .header-area .cart-fav-search a:focus {
      color: #fbb710; }
    .main-content-wrapper .header-area .social-info a {
    color: #000000;
    display: inline-block; }
    .main-content-wrapper .header-area .social-info a i {
      font-size: 25px; }
    .main-content-wrapper .header-area .social-info a:hover, .main-content-wrapper .header-area .social-info a:focus {
      color: #fbb710; }

  @media only screen and (max-width: 767px) {
    .main-content-wrapper .header-area .social-info {
      margin-bottom: 75px; } }

.main-content-wrapper .products-categories-area {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(100% - 320px);
  flex: 0 0 calc(100% - 320px);
  width: calc(100% - 320px);
  max-width: calc(100% - 320px); 
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
}
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-content-wrapper .products-categories-area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(100% - 280px);
      flex: 0 0 calc(100% - 280px);
      width: calc(100% - 280px);
      max-width: calc(100% - 280px);
      margin-left: 20px; 
      } }
  @media only screen and (max-width: 767px) {
    .main-content-wrapper .products-categories-area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%; 
      margin-left: 10px;
      } }
.main-content-wrapper .shop_sidebar_area {
  position: relative;
  z-index: 3;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 230px;
  flex: 0 0 230px;
  width: 230px;
  max-width: 230px;
  background-color: #000000;
  padding: 50px 40px; /* Adjusted padding to reduce height */
  height: auto; /* Ensure the height is auto */
  max-height: 650px; /* Set a max-height if needed */
  transform: translateY(-50%); /* Center the sidebar vertically */
  left: 8%; /* Center the sidebar horizontally */
  transform: translateX(-50%); /* Center the sidebar horizontally */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .main-content-wrapper .shop_sidebar_area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 180px;
      flex: 0 0 180px;
      width: 180px;
      max-width: 180px;
      padding: 50px 15px; /* Adjusted padding to reduce height */
      height: auto; /* Ensure the height is auto */
      max-height: 400px; /* Set a max-height if needed */
  }
}
@media only screen and (max-width: 767px) {
  .main-content-wrapper .shop_sidebar_area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      padding: 30px 15px; /* Adjusted padding to reduce height */
      height: auto; /* Ensure the height is auto */
      max-height: 300px; /* Set a max-height if needed */
  }
}

.main-content-wrapper .techfit_product_area {
  position: relative;
  z-index: 1;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(95% - 550px);
  flex: 0 0 calc(95% - 550px);
  width: calc(95% - 550px);
  max-width: calc(95% - 550px); 
  margin: auto;
  }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-content-wrapper .techfit_product_area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(100% - 550px);
      flex: 0 0 calc(100% - 550px);
      width: calc(100% - 550px);
      max-width: calc(100% - 550px); } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-content-wrapper .techfit_product_area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(100% - 460px);
      flex: 0 0 calc(100% - 460px);
      width: calc(100% - 460px);
      max-width: calc(100% - 460px); } }
  @media only screen and (max-width: 767px) {
    .main-content-wrapper .techfit_product_area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      padding-top: 50px; } }
.main-content-wrapper .cart-table-area {
  position: relative;
  z-index: 1;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(95% - 320px);
  flex: 0 0 calc(95% - 320px);
  width: calc(95% - 320px);
  max-width: calc(95% - 320px); 
  }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-content-wrapper .cart-table-area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(100% - 320px);
      flex: 0 0 calc(100% - 320px);
      width: calc(100% - 320px);
      max-width: calc(100% - 320px); } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-content-wrapper .cart-table-area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(100% - 280px);
      flex: 0 0 calc(100% - 280px);
      width: calc(100% - 280px);
      max-width: calc(100% - 280px); } }
  @media only screen and (max-width: 767px) {
    .main-content-wrapper .cart-table-area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
      padding-top: 0; } }
  .main-content-wrapper .cart-table-area .cart-title h2 {
    font-size: 30px;
    margin-bottom: 30px;
    color: #242424; }
  .main-content-wrapper .cart-table-area table thead {
    width: 100%;
    display: block; }
    .main-content-wrapper .cart-table-area table thead tr {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      height: 40px;
      background-color: #f5f7fa; }
      .main-content-wrapper .cart-table-area table thead tr th {
        border-top: none;
        border-bottom: none;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        width: 25%;
        max-width: 25%;
        font-size: 12px;
        color: #242424;
        text-transform: capitalize;
        font-weight: 400; }
  .main-content-wrapper .cart-table-area table tbody {
    width: 100%;
    display: block; }
  .main-content-wrapper .cart-table-area table tbody tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    width: 100%; }
    .main-content-wrapper .cart-table-area table tbody tr td {
      border: none;
      -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      width: 25%;
      max-width: 25%; }
      .main-content-wrapper .cart-table-area table tbody tr td h5 {
        font-size: 15px;
        color: #252525; }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          .main-content-wrapper .cart-table-area table tbody tr td h5 {
            font-size: 14px; } }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .main-content-wrapper .cart-table-area table tbody tr td h5 {
            font-size: 14px; } }
        @media only screen and (max-width: 767px) {
          .main-content-wrapper .cart-table-area table tbody tr td h5 {
            font-size: 12px; } }
        @media only screen and (max-width: 767px) {
    .single-product-wrapper .product-description a h6,
    .main-content-wrapper .cart-table-area table tbody tr td:first-child span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word;
        max-width: 100%;
        display: inline-block;
    }
}

.main-content-wrapper .cart-table-area table tbody tr td:nth-child(2),
.main-content-wrapper .cart-table-area table tbody tr td:nth-child(4) {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    font-family: 'Roboto', 'Arial', sans-serif;
    font-variant-numeric: tabular-nums;
}

.main-content-wrapper .cart-table-area table tbody tr td:first-child span {
    display: block;
    white-space: nowrap; 
    overflow: hidden;  
    text-overflow: ellipsis;  
    max-width: 150px; 
}

.single-product-wrapper .product-description a h6 {
    white-space: nowrap;       
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;    
    display: inline-block;
}

  .main-content-wrapper .cart-table-area .cart-summary {
    background-color: #f5f7fa;
    margin-top: 118px;
    position: relative;
    z-index: 1;
    padding: 30px 20px; }
    .main-content-wrapper .cart-table-area .cart-summary h5 {
      font-size: 18px;
      margin-bottom: 0; }
    .main-content-wrapper .cart-table-area .cart-summary .summary-table {
      margin-top: 30px; }
    .main-content-wrapper .cart-table-area .cart-summary .summary-table li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 30px;
        text-transform: capitalize; }
    .main-content-wrapper .cart-table-area .cart-summary .summary-table li span {
      color: #6b6b6b;
      font-size: 14px; }
    .main-content-wrapper .cart-table-area .cart-summary .payment-method label {
      font-size: 14px;
      color: #6b6b6b;
      font-weight: 400;
      margin-bottom: 15px; }
      .main-content-wrapper .cart-table-area .checkout-summary {
        background-color: #f5f7fa;
        margin-top: 118px;
        position: relative;
        z-index: 1;
        padding: 30px 20px; }
        .main-content-wrapper .cart-table-area .checkout-summary h5 {
          font-size: 18px;
          margin-bottom: 0; }
        .main-content-wrapper .cart-table-area .checkout-summary .summary-table {
          margin-top: 30px; }
          .main-content-wrapper .cart-table-area .checkout-summary .summary-table li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            margin-bottom: 30px;
            text-transform: capitalize; }
            .main-content-wrapper .cart-table-area .checkout-summary .summary-table li span {
              color: #6b6b6b;
              font-size: 14px; }
        .main-content-wrapper .cart-table-area .checkout-summary .payment-method label {
          font-size: 14px;
          color: #6b6b6b;
          font-weight: 400;
          margin-bottom: 15px; }

.cart-table-wrapper {
max-height: 400px; 
overflow-y: auto;
}

.cart .add-to-cart {
cursor: pointer; 
background-color: #fff; 
border: none;
font-size: 12px; 
color: #333;
position: relative;
bottom: 50px; 
} 

.main-content-wrapper .single-product-area {
  position: relative;
  z-index: 2;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(95% - 320px);
  flex: 0 0 calc(95% - 320px);
  width: calc(95% - 320px);
  max-width: calc(95% - 320px); }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-content-wrapper .single-product-area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(100% - 320px);
      flex: 0 0 calc(100% - 320px);
      width: calc(100% - 320px);
      max-width: calc(100% - 320px); } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-content-wrapper .single-product-area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(100% - 280px);
      flex: 0 0 calc(100% - 280px);
      width: calc(100% - 280px);
      max-width: calc(100% - 280px); } }
  @media only screen and (max-width: 767px) {
    .main-content-wrapper .single-product-area {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
      padding-top: 0; } }
  .main-content-wrapper .single-product-area .breadcrumb {
    background-color: transparent; }
    .main-content-wrapper .single-product-area .breadcrumb .breadcrumb-item {
      font-size: 14px;
      text-transform: uppercase; }
      .main-content-wrapper .single-product-area .breadcrumb .breadcrumb-item a {
        color: #242424;
        font-size: 14px;
        text-transform: uppercase; }
        .main-content-wrapper .single-product-area .breadcrumb .breadcrumb-item a:hover {
          color: #fbb710; }
    .main-content-wrapper .single-product-area .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
      content: ">"; }
  .main-content-wrapper .single-product-area .single_product_thumb {
    position: relative;
    z-index: 1;
    margin-bottom: 170px; }
    .main-content-wrapper .single-product-area .single_product_thumb .carousel-indicators {
      margin: 0 7.5px;
      bottom: -165px; }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .main-content-wrapper .single-product-area .single_product_thumb .carousel-indicators {
          bottom: -105px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .main-content-wrapper .single-product-area .single_product_thumb .carousel-indicators {
          bottom: -105px; } }
      @media only screen and (max-width: 767px) {
        .main-content-wrapper .single-product-area .single_product_thumb .carousel-indicators {
          bottom: -95px; } }
      .main-content-wrapper .single-product-area .single_product_thumb .carousel-indicators li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        width: 25%;
        min-width: 25%;
        height: 140px;
        background-position: center center;
        background-size: cover;
        border: 2px solid transparent;
        cursor: pointer; }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          .main-content-wrapper .single-product-area .single_product_thumb .carousel-indicators li {
            height: 80px; } }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .main-content-wrapper .single-product-area .single_product_thumb .carousel-indicators li {
            height: 80px; } }
        @media only screen and (max-width: 767px) {
          .main-content-wrapper .single-product-area .single_product_thumb .carousel-indicators li {
            height: 70px; } }
        .main-content-wrapper .single-product-area .single_product_thumb .carousel-indicators li.active {
          border: 2px solid #fbb710; }
    .main-content-wrapper .single-product-area .single_product_thumb .carousel-item a {
      cursor: zoom-in; }
  .main-content-wrapper .single-product-area .single_product_desc {
    position: relative;
    z-index: 1; }
    .main-content-wrapper .single-product-area .single_product_desc .product-meta-data .line {
      width: 80px;
      height: 3px;
      background-color: #fbb710;
      margin-bottom: 15px;
      display: block; }
    .main-content-wrapper .single-product-area .single_product_desc .product-meta-data .product-price {
      font-size: 24px;
      font-weight: 400;
      color: #fbb710;
      line-height: 1;
      margin-bottom: 10px; }
    .main-content-wrapper .single-product-area .single_product_desc .product-meta-data a {
      display: block; }
      .main-content-wrapper .single-product-area .single_product_desc .product-meta-data a h6 {
        font-size: 30px;
        margin-bottom: 5px; }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          .main-content-wrapper .single-product-area .single_product_desc .product-meta-data a h6 {
            font-size: 20px; } }
    .main-content-wrapper .single-product-area .single_product_desc .product-meta-data .ratings-review .ratings i {
      font-size: 10px;
      color: #fbb710; }
    .main-content-wrapper .single-product-area .single_product_desc .product-meta-data .ratings-review .review a {
      display: inline-block;
      color: #6b6b6b;
      font-size: 14px; }
    .main-content-wrapper .single-product-area .single_product_desc .product-meta-data .avaibility {
      margin-bottom: 0;
      font-size: 12px;
      color: #6b6b6b;
      line-height: 1; }
      .main-content-wrapper .single-product-area .single_product_desc .product-meta-data .avaibility i {
        color: #20d34a;
        font-size: 12px; }
    .main-content-wrapper .single-product-area .single_product_desc .short_overview p {
      line-height: 2.1;
      color: #6b6b6b; }
    .main-content-wrapper .single-product-area .single_product_desc .cart p {
      margin-bottom: 0;
      line-height: 40px;
      height: 40px;
      padding: 0 15px;
      background-color: #f5f7fa; }
  
    .main-content-wrapper .single-product-area .single_product_desc .cart .techfit-btn {
      width: 310px;
      height: 80px;
      line-height: 80px; }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .main-content-wrapper .single-product-area .single_product_desc .cart .techfit-btn {
          width: 250px; } }
      @media only screen and (max-width: 767px) {
        .main-content-wrapper .single-product-area .single_product_desc .cart .techfit-btn {
          width: 280px; } }

.products-grid {
  display: flex;
  flex-wrap: wrap; 
  gap: 20px; 
  justify-content: flex-start; 
}

/* Single product category item */
.single-products-category {
  flex: 1 1 auto; 
  box-sizing: border-box; 
  border: 0px solid #ddd;
  padding: 10px;
  background-color: #fff;
  transition: box-shadow 0.15s ease;
  margin-bottom: 20px; 
  max-width: calc(33.333% - 20px); 
}
.single-products-category:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Adjust for smaller screens */
@media (min-width: 768px) and (max-width: 991px) {
.single-products-category {
  flex: 1 1 calc(50% - 20px); 
  max-width: calc(50% - 20px);
}
}

@media (max-width: 767px) {
.single-products-category {
  flex: 1 1 calc(50% - 20px); 
  max-width: calc(50% - 20px);
}
}

@media (min-width: 576px) and (max-width: 767px) {
.single-products-category {
  flex: 1 1 calc(50% - 20px); 
  max-width: calc(50% - 20px);
}
}

.single-products-category a {
display: block;
width: 100%;
height: auto;
position: relative;
text-decoration: none;
}

.single-products-category a img {
width: 100%;
height: auto;
display: block;
transition: transform 0.15s ease;
}

.single-products-category:hover a img {
transform: scale(1.05);
}

.single-products-category .hover-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.3s ease;
}

.single-products-category:hover .hover-content {
opacity: 1;
visibility: visible;
}

.single-products-category .hover-content .line {
width: 80px;
height: 3px;
background-color: #020202;
margin-bottom: 15px;
}

.single-products-category .hover-content p {
font-size: 16px;
color: #ff7403;
margin-bottom: 5px;
transition: color 0.15s ease;
}

.single-products-category .hover-content h5 {
font-size: 20px;
color: hsl(0, 100%, 99%);
transition: color 0.15s ease;
}

.single-products-category:hover .hover-content p,
.single-products-category:hover .hover-content h5 {
color: #000000;
}

.single-products-category .item-name {
text-align: center;
font-size: 17px;
margin-top: 10px;
color: #1b1b1b;
font-weight: bold;
transition: color 0.15s ease;
display: block;
font-weight: normal;
}

.single-products-category .item-price {
text-align: center;
font-size: 14px;
color: #ff7403;
margin-top: 5px;
}

/* :: 6.0 Newsletter Area CSS */
.newsletter-area {
position: relative;
z-index: 1;
background-color: #3c3c3c; 
/* pointer-events: none;  */
}
.newsletter-area .newsletter-text {
  position: relative;
  /* pointer-events: none; */
  z-index: 1; }
  .newsletter-area .newsletter-text h2 {
    font-size: 25px;
    margin-bottom: 10px;
    /* pointer-events: none;  */
    color: #fff; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .newsletter-area .newsletter-text h2 {
        /* pointer-events: none; */
        font-size: 30px; } }
        
    @media only screen and (max-width: 767px) {
      .newsletter-area .newsletter-text h2 {
        font-size: 30px; } }
        
    .newsletter-area .newsletter-text h2 span {
      color: #fbb710; }

  .newsletter-area .newsletter-text p {
    color: #7c2727;
    margin-bottom: 0; }

.newsletter-area .newsletter-form form {
  position: relative;
  z-index: 1000; }

  .newsletter-area .newsletter-form form input[type="email"] {
    width: 100%;
    height: 50px;
    background-color: #fff;
    color: #afafaf;
    font-size: 14px;
    font-style: italic;
    border: none;
    padding:0 20px; }

  .newsletter-area .newsletter-form form input[type="submit"] {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    height: 50px;
    background-color: #fbb710;
    color: #fff;
    font-size: 14px;
    padding: 0 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    /* pointer-events: none; */
    border: none; }
    .newsletter-area .newsletter-form form input[type="submit"]:hover, .newsletter-area .newsletter-form form input[type="submit"]:focus {
      background-color: #fbb710;
      /* pointer-events: none;  */
      color: #fff; }

.newsletter-area .newsletter-form form {
  position: relative;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-start;
}

.newsletter-area .newsletter-form form input[type="email"] {
  width: 100%;
  height: 50px;
  background-color: #fff;
  color: #afafaf;
  font-size: 14px;
  font-style: italic;
  border: none;
  padding: 0 20px;
  flex: 1 1 100%;
  min-width: 0;
}

.newsletter-area .newsletter-form form .cf-turnstile {
  margin: 0;
  flex: 0 0 auto;
}

.newsletter-area .newsletter-form form input[type="submit"] {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  height: 50px;
  background-color: #fbb710;
  color: #fff;
  font-size: 14px;
  padding: 0 30px;
  cursor: pointer;
  position: static;
  border: none;
  flex: 0 0 auto;
}

/* Responsive */
@media only screen and (max-width: 767px) {
  .newsletter-area .newsletter-form form {
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter-area .newsletter-form form input[type="email"] {
    width: 100%;
    flex: 1 1 auto;
  }

  .newsletter-area .newsletter-form form .cf-turnstile {
    transform: scale(0.95);
    transform-origin: left;
  }

  .newsletter-area .newsletter-form form input[type="submit"] {
    width: 100%;
  }
}

/* :: 7.0 Popular Products Area CSS */
.single-product-wrapper {
position: relative;
z-index: 1;
margin-bottom: 50px;
overflow: hidden;
background-color: #ffffff;
width: 100%;
display: block;
overflow: visible;
}
.single-product-wrapper .product-img {
position: relative;
z-index: 1;
overflow: hidden;
}
.single-product-wrapper .product-img img {
width: 100%;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
}
.single-product-wrapper .product-img .hover-img {
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
opacity: 0;
visibility: hidden;
}
.single-product-wrapper .product-description {
position: relative;
z-index: 2;
margin-top: 10px;
text-align: center; /* Center align the text */
flex-direction: row;
}
.single-product-wrapper .product-description .product-name {
font-size: 18px; /* Font size for the product name */
font-weight: bold; /* Bold font for emphasis */
color: #333; /* Text color */
margin-top: 10px; /* Margin above the product name */
display: inline-block;
}

.single-product-wrapper .product-description .product-meta-data .line {
width: 80px;
height: 3px;
background-color: #fbb710;
margin-bottom: 15px;
display: block;
bottom: 60px;
position: relative;
}
.single-product-wrapper .product-description .product-meta-data .product-price {
line-height: 1;
color: #fbb710;
font-size: 21px;
margin-bottom: 10px;
bottom: 70px;
position: relative;
}
.single-product-wrapper .product-description .product-meta-data a {
display: block;
}
.single-product-wrapper .product-description .product-meta-data a h6 {
  margin: 0;
  font-size: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.single-product-wrapper .product-description .ratings-cart .ratings i {
font-size: 10px;
color: #fbb710;
bottom: 46px;
position: relative;

}
.single-product-wrapper .product-description .ratings-cart .cart {
display: block;
}
.single-product-wrapper:hover .product-img .hover-img {
opacity: 1;
visibility: visible;
}
.single-product-wrapper:hover .product-img .product-favourite a {
opacity: 1;
visibility: visible;
}

.col-12.col-sm-6.col-md-12.col-xl-6 {
  margin-right: 0; /* Reset any existing margins */
  transform: translateX(70px); /* Move the product card to the left by 20px */
  float: right; /* Float to the left */
}

/* Mobile adjustments for the product column */
@media (max-width: 768px) {
.col-12.col-sm-6.col-md-12.col-xl-6 {
  margin-right: 0; /* Reset margin for mobile */
  transform: translateX(0); /* Remove horizontal translation for mobile */
  float: none; /* Reset float for mobile */
  margin-bottom: 15px; /* Add margin between product cards */
}
}

.pagination {
position: relative;
z-index: 1; }
.pagination .page-item .page-link {
  width: 40px;
  height: 40px;
  border: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
  padding: 0;
  text-align: center;
  color: #242424;
  left: 100px;
    }
  .pagination .page-item .page-link:hover, .pagination .page-item .page-link:focus {
    color: #fff;
    box-shadow: none;
    background-color: #fbb710; }
.pagination .page-item.active .page-link {
  color: #fff;
  box-shadow: none;
  background-color: #fbb710; }
.pagination .page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }
.pagination .page-item:last-child .page-link {
  margin-left: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

/* :: 8.0 Footer Area CSS */
.footer_area {
position: relative;
z-index: 1;
background-color: #252525;
padding: 5px 10px; }
.footer_area .single_widget_area .copywrite {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 10px; }
  .footer_area .single_widget_area .copywrite a {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4); }
    .footer_area .single_widget_area .copywrite a:hover {
      color: #fff; }
.footer_area .single_widget_area .footer_menu {
  position: relative;
  z-index: 1;
  margin-left: auto; }
  .footer_area .single_widget_area .footer_menu .navbar {
    padding: 0; }
  .footer_area .single_widget_area .footer_menu .navbar-nav .nav-item .nav-link {
    padding: 10px 30px;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .footer_area .single_widget_area .footer_menu .navbar-nav .nav-item .nav-link {
        padding: 10px 0; } }
    @media only screen and (max-width: 767px) {
      .footer_area .single_widget_area .footer_menu .navbar-nav .nav-item .nav-link {
        padding: 10px 0; } }
    .footer_area .single_widget_area .footer_menu .navbar-nav .nav-item .nav-link:hover, .footer_area .single_widget_area .footer_menu .navbar-nav .nav-item .nav-link:focus {
      color: #fbb710; }
  .footer_area .single_widget_area .footer_menu .navbar-nav .nav-item.active .nav-link {
    color: #f7a709; }
  .footer_area .single_widget_area .footer_menu .navbar-nav .nav-item:last-child .nav-link {
    padding-right: 0; }

/* :: 9.0 Product Sidebar Area CSS */
.widget {
position: relative;
z-index: 1; 
}
.widget .widget-title {
  font-size: 18px;
  text-transform: capitalize;
  color: #ffffff; }
.widget .categories-menu li a {
  text-transform: capitalize;
  font-size: 15px;
  padding: 15px 0 15px 20px;
  display: block;
  font-weight: 400;
  color: #ddd8d8;
  text-align: justify; /* align text */
  line-height: 0.5; /* reduce line height to make text more compact */ 
  }
  .widget .categories-menu li a:hover, .widget .categories-menu li a:focus {
    color: #fbb710; }
.widget .categories-menu li.active a {
  color: #fbb710; }
.widget.price .slider-range-price {
  background-color: #c7d2d8 !important;
  height: 2px;
  border: none; }
.widget.price .ui-slider-handle {
  background-color: #fff;
  top: -7px;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #fbb710;
  border-radius: 50%; }
.widget.price .ui-slider-range.ui-corner-all.ui-widget-header {
  background-color: #fbb710; }
.widget.price .ui-slider-horizontal {
  height: 2px;
  background-color: #fbb710; }
.widget.price .range-price {
  font-size: 16px;
  font-weight: 400;
  margin-top: 20px;
  text-transform: uppercase;
  color: #ffffff; }
.widget.color .widget-desc ul {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .widget.color .widget-desc ul li {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    width: 25%;
    margin-bottom: 15px; }
    .widget.color .widget-desc ul li a {
      width: 30px;
      height: 30px;
      display: block;
      border-radius: 50%;
      background-color: #ffffff;
      position: relative;
      z-index: 1;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); }
      .widget.color .widget-desc ul li a.color1 {
        background-color: #ffffff; }
      .widget.color .widget-desc ul li a.color2 {
        background-color: #969696; }
      .widget.color .widget-desc ul li a.color3 {
        background-color: #030303; }
      .widget.color .widget-desc ul li a.color4 {
        background-color: #0315ff; }
      .widget.color .widget-desc ul li a.color5 {
        background-color: #dc0647; }
      .widget.color .widget-desc ul li a.color6 {
        background-color: #fff56a; }
      .widget.color .widget-desc ul li a.color7 {
        background-color: #f26e51; }
      .widget.color .widget-desc ul li a.color8 {
        background-color: #9a8777; }
.widget.brands .form-check {
  margin-bottom: 25px; }
  .widget.brands .form-check label {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    font-size: 16px;
    color: #959595;
    font-weight: 400;
    cursor: pointer; }
    .widget.brands .form-check label:hover {
      color: #fbb710; }
  .widget.brands .form-check:last-child {
    margin-bottom: 0; }

.product-topbar {
position: relative;
z-index: 100;
margin-bottom: 40px;}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .product-topbar .total-products {
    margin-bottom: 30px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .product-topbar .total-products {
    margin-bottom: 30px; } }
@media only screen and (max-width: 767px) {
  .product-topbar .total-products {
    margin-bottom: 30px; 
    } }

.product-topbar .total-products p {
  margin: 0; /* Remove extra margin */
  font-size: 14px;
  color: #242424;
  text-transform: uppercase;
  }

  .product-topbar .total-products {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap on smaller screens */
  justify-content: space-between; /* Space items evenly */
  align-items: center; /* Vertically center the items */
  margin-bottom: 20px; /* Add some space below */
}

.product-topbar .total-products .view a {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background-color: #131212;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 44px; }

.product-topbar .total-products .view a:first-child {
  background-color: #fbb710; }

.product-topbar .nice-select {
  border: none;
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  padding-left: 0;
  line-height: 40px;
  margin: 0;
  background-color: #f5f7fa;
  border-radius: 0;
  text-align: center !important;
  min-width: 100px; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .product-topbar .nice-select {
      min-width: 60px;
      font-size: 12px; } }
  @media only screen and (max-width: 767px) {
    .product-topbar .nice-select {
      min-width: 60px;
      font-size: 12px; } }
  .product-topbar .nice-select .list {
    background-color: #f6f6f6;
    border-radius: 0;
    border: none; }
    .product-topbar .nice-select .list .option.selected {
      color: #fbb710; }

.dropdown-parent {
position: relative;
}

.dropdown {
position: relative;
display: inline-block;
left: 450px;
bottom: 5px;
}

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none; /* Hidden by default */
margin: 0;
padding: 0;
list-style: none;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 70%;
}

.dropdown-menu.show {
display: block; /* Visible when the button is clicked */
}

.dropdown-menu form {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
border-radius: 0;
background-color: transparent; /* Transparent background */
box-shadow: none; /* No shadow */
}

.dropdown-menu select {
position: relative;
z-index: 1; /* Bring the select element to the front */
width: 100%;
height: 38px;
padding: 6px 12px;
font-size: 13px;
line-height: 1;
color: #000000;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

/* Media query for mobile screens */
@media (max-width: 768px) {
.dropdown {
  width: 100%; /* Full width dropdown on smaller screens */
  left: 0; /* Reset left positioning */
  bottom: auto; /* Reset bottom positioning */
}

.dropdown-menu {
  position: relative; /* Change from absolute to relative */
  width: 100%; /* Full width for dropdown */
  max-width: none; /* Remove max width if previously set */
  }
}

/* :: 10.0 Checkout Area CSS */
.checkout_details_area form .form-control {
height: 60px;
border: none;
border-radius: 0;
background-color: #f5f7fa;
padding: 30px;
color: #6b6b6b;
font-size: 14px; 
}
.checkout_details_area form textarea.form-control {
height: 210px;
resize: none;
}
.checkout_details_area form .custom-control label {
font-size: 14px;
color: #6b6b6b; 
}
.checkout_details_area form .nice-select {
border-radius: 0;
height: 60px;
line-height: 60px;
background-color: #f5f7fa;
border: none;
color: #6b6b6b;
font-size: 14px; 
}
.checkout_details_area form .nice-select .list {
  width: 100%;
  border-radius: 0;
  background-color: #f5f7fa; 
}
  #phone_number::-webkit-outer-spin-button,
  #phone_number::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  
body.light-mode {
  background-color: #ffffff;
  color: #000000;
}

body.dark-mode {
  background-color: #000000;
  color: #ffffff;
}

.single-products-category .item-name:hover {
color: #fbb710;
}

.footer-social-info {
padding: 0px; /* Adjust padding as needed */
background-color: #252525; /* Example background color */
border-top: 0px solid #252525; /* Optional border at the top */
}

.footer-social-info .follow-us-text {
font-size: 20px;
color: #ffffff;
margin-right: 10px;
margin-left: 120px;
vertical-align: middle;
}

.footer-social-info a {
margin: 0 10px 0 15px; /* Adjust spacing between icons */
color: #fffdfd; /* Icon color */
transition: color 0.3s ease; /* Transition for hover effect */
font-size: 19px;
}

.footer-social-info a:hover {
color: #ff7403; /* Color on hover */
}

/* Mobile view */
@media (max-width: 768px) {
  .footer-social-info {
      flex-direction: row; /* Stack text and icons vertically */
      text-align: center; /* Center text */
      margin: 0 auto !important; /* Center the container */
      display: flex; /* Enable flexbox */
      align-items: flex-start; /* Align items to the left */
      justify-content: flex-start; /* Align content to the left */
      padding: 10px; /* Add padding around */
      width: 100%; /* Ensure full width */
  }

  .follow-us-text { 
      text-align: center !important; /* Force text to center */
      display: block !important; /* Ensure it's treated as a block element */
      padding: 0 !important; /* Remove any extra padding */
      white-space: nowrap;
      width: 35% !important;
      margin-left: 65px !important;
  }

  .footer-social-info a {
      margin: 5px !important; /* Force space between icons */
      display: inline-block !important; /* Prevent shrinking of icons */
      align-self: flex-start !important; /* Move the icons to the left */
      font-size: 16px; 
  }
}

html {
scroll-behavior: smooth;
}

.categories-menu ul {
list-style-type: none;
pointer-events: none; /* Disable pointer events */
}

.categories-menu ul li {
display: inline;
margin-right: 10px;
pointer-events: none; /* Disable pointer events */
}

.categories-menu ul li a {
text-decoration: none;
color: #000;
pointer-events: none; /* Disable pointer events */
}

.categories-menu ul li.active a {
font-weight: bold;
pointer-events: none; /* Disable pointer events */
}

.sort-by-date {
display: flex;
align-items: center;
position: relative;
left: 480px;
font-size: 15px;
}

.sort-by-date p {
color: #000;
font-weight: bold;
margin-right: 10px !important;
font-size: 15px !important;
}

.sort-by-date select {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}

/* Media query for mobile screens */
@media (max-width: 768px) {
.sort-by-date {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: flex-start; /* Align items to the start */
  margin: 0; /* Remove margin if needed */
  left: 0px;
}

.sort-by-date p {
  margin-right: 0; /* Ensure no margin on mobile */
  margin-bottom: 10px; /* Add margin below the text for spacing */
}

.sort-by-date select {
  width: 100%; /* Ensure the select element takes full width */
}
}

.items {
margin-top: 50px;
}

.login-container {
  background-color: white;
  padding: 40px 20px;
  border-radius: 8px;
  width: 100%;
  max-width: 350px;
  text-align: center;
  box-sizing: border-box;
  margin: auto;
  justify-content: center;
}

.login-form h2 {
  margin-bottom: 20px;
  color: #333;
}

.logo {
  margin-bottom: 20px;
  text-align: center;
  align-items: center;
  
}

.logo h4,h2,h3,h5,h1{
color: #333;
text-align: center;
}

.logo h5{
color: #333;
text-align: center;
font-size: 16px;
}

.logo-image {
  max-width: 250px;
  margin-bottom: 10px;
}

.input-group {
  margin-bottom: 15px;
}

.input-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #4e4e4e;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

#username {
  font-size: 14px; /* Ensure font size matches other fields */
  padding: 12px;   /* Ensure padding is consistent */
  margin: 0;       /* Reset any extra margins */
  border: 1px solid #4e4e4e; /* Ensure border is consistent */
  border-radius: 4px; /* Ensure border radius matches */
}

button {
  width: 100%;
  padding: 12px;
  background-color: #ff7403;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

button:hover {
  background-color: #00478f;
}

.forgot-password {
  margin-top: 15px;
  font-size: 14px;
}

.forgot-password a {
  color: #ff7403;
  text-decoration: none;
}

.forgot-password a:hover {
  text-decoration: underline;
}

.google-signin {
  margin-top: 20px;
  margin-bottom: 20px;
}

#registerBtn:disabled {
    background-color: #ccc;
    color: #000000;
    cursor: not-allowed;
    opacity: 0.7;
}

#customBtn:disabled {
    cursor: not-allowed;
}

.google-button {
  width: 100%;
  padding: 12px;
  background-color: #e0e0e0;
  border: 1px solid #d1d0d0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
}

.google-button img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.google-button:hover {
  background-color: #dddada
}

.register-link {
  margin-top: 15px;
  text-align: center;
  font-size: 18px;
}

.register-link a {
  font-weight: bold; /* Make it stand out */
  text-decoration: none;
  color: #ff7403; /* Match the button color */
  font-size: 18px;
}

.login-link {
  margin-top: 15px;
  text-align: center;
  font-size: 16px; /* Adjust the size as needed */
  display: block;
  color: #000;
}

.login-link a {
  font-weight: bold; /* Make it stand out */
  text-decoration: none;
  color: #ff7403; /* Match the button color */
  font-size: 16px;
  display: inline-block;
}

/* notification-style.css */

.notification {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: none;
  color: #000;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 1000;
  display: none; /* Hidden by default */
  animation: slideInOut 3s forwards; /* Animation */
}

@keyframes slideInOut {
  0% {
      opacity: 0;
      transform: translateX(-50%) translateY(-20px); /* Start hidden */
  }
  10% {
      opacity: 1;
      transform: translateX(-50%) translateY(0); /* Fully visible */
  }
  90% {
      opacity: 1;
      transform: translateX(-50%) translateY(0); /* Fully visible */
  }
  100% {
      opacity: 0;
      transform: translateX(-50%) translateY(-20px); /* End hidden */
  }
}

.otp-container {
  max-width: 300px;
  text-align: center;
  padding: 10px;
  border: none;
  border-radius: 5px;
  margin: auto;
  justify-content: center;
  margin-top: 40px;
}

.otp-container h3 {
  margin: 0;
  margin-bottom: 10px;
  color: #333;
  font-size: 22px;
}

.otp-container h4 {
  color: #666;
  font-size: 16px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #4e4e4e;
}

button {
  padding: 10px 20px;
  background-color:  #ff5a00;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.message {
  margin-top: 10px;
  color: rgb(0, 0, 0);
}

.login-link, .resend-link {
  margin-top: 15px;
  font-size: 18px;
  color: #555;
  padding: 5px 0; /* Add padding to maintain size */
}

.login-link a, .resend-link a {
  color: #ff5a00;
  text-decoration: none;
  font-size: 18px;
}

.login-link a:hover, .resend-link a:hover, .register-link a:hover {
  text-decoration: underline;
  font-size: 18px;
  color: #0056b3;
}

.forgot-password-container {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  max-width: 300px;
  text-align: center;
  margin: auto;
  justify-content: center;
  margin-top:  40px;
}

.forgot-password-container h2 {
  margin-bottom: 20px;
  color: #333;
}

.forgot-password-container input[type="email"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #4e4e4e;
  border-radius: 4px;
  font-size: 16px;
}

.forgot-password-container button {
  width: 100%;
  padding: 10px;
  background-color: #ff5a00;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin-top: -50px;
}

.forgot-password-container button:hover {
  background-color: #00478f;
}

.forgot-password-link {
  text-align: center; /* Center-align the paragraph */
  margin-top: 20px; /* Add some space above the paragraph */
}

.forgot-password-link a {
  color: #ff7403; /* Set the color of the link */
  text-decoration: none; /* Remove underline from the link */
  font-weight: bold; /* Make the link text bold */
  font-size: 16px; /* Set the font size */
}

.forgot-password-link a:hover {
  text-decoration: underline; /* Underline the link on hover */
  color: #0056b3; /* Change color on hover */
}

.reset-password-container {
background-color: white;
  padding: 40px 20px;
  border-radius: 8px;
  width: 100%;
  max-width: 350px;
  text-align: center;
  box-sizing: border-box;
  margin: auto;
  justify-content: center;
}

h2 {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #4e4e4e;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-group .error {
  color: red;
  font-size: 0.875em;
  margin-top: 5px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #ff5a00;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}

.message {
  text-align: center;
  margin-top: 10px;
}

table {
  width: 105%;
  border-collapse: collapse; /* Collapse borders into single lines */
}

td {
  padding: 10px; /* Space inside cells */
  border-bottom: 1px solid #111111; /* Light border between rows */
}

th, td {
  text-align: left; /* Align text to the left */
}

td:first-child {
  font-weight: bold; /* Bold label text */
}

table tbody tr:last-child td {
  border-bottom: none; /* Remove border for the last row */
}

#details-container {
  margin-top: 20px;
}

h3 {
  margin-top: 0; /* Remove default top margin */
  margin-bottom: 10px; /* Space below the heading */
  font-size: 25px;
}

#details-container p {
  font-size: 16px;
  margin-bottom: 10px;
}

#details-container strong {
  font-weight: bold;
}

/* Active link style */
accountnav ul li a.active {
  background-color: #555;
}

accountnav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
  width: 100%; /* Ensure full width */
  overflow-x: auto; /* Allow horizontal scrolling if needed */
}

accountnav ul li {
  display: inline;
  margin-right: 15px;
  white-space: nowrap; /* Prevent items from wrapping to new lines */
}

accountnav ul li a {
  display: inline-block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  font-size: 13px;
}

accountnav ul li a:hover {
  background-color: #555;
}


header-acct {
  display: flex;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

#logo {
  height: 50px; /* Adjust height as needed */
  margin-right: 20px; /* Space between logo and nav */
}

#account-details {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  max-width: 600px;
  margin: auto;
  overflow-y: auto; /* add this to make the content scrollable */
  max-height: 100vh; /* set the max height to the viewport height */
  margin-bottom: 80px;
  margin-top: 80px;
}


#account-details h3 {
  margin-bottom: 20px;
  font-size: 22px;
  color: #333;
  font-weight: 600;
}

.account-info {
  display: flex;
  flex-direction: column;
}

.info-item {
  margin-bottom: 15px;
  padding: 10px;
  border-bottom: 1px solid #1b1a1a;
  height: 45%;
}

.info-item strong {
  display: block;
  color: #333;
  font-size: 16px;
}

.info-item span {
  display: block;
  color: #666;
  font-size: 14px;
}

.edit-fields {
height: 40px;
padding: 100px;
}

.accountdetailsnotification {
  position: fixed;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  background-color: none;
  color: #000;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 1000;
  display: none; /* Hidden by default */
  animation: slideInOut 3s forwards; /* Animation */
}

.inboxheader {
display: flex;
align-items: center;
background-color: #333;
color: #fff;
justify-content: space-between; /* Space between items */
padding: 10px;
}

/* Mobile-specific styling */
@media (max-width: 768px) {
  accountnav ul {
      justify-content: flex-start; /* Align items to the left */
      overflow-x: scroll; /* Allow horizontal scrolling */
      white-space: nowrap;
  }

  accountnav ul li {
      font-size: 14px; /* Adjust font size for mobile */
      margin-right: 10px;
  }

  #inboxlogo {
      max-height: 30px; /* Adjust logo size for mobile */
  }
}

/* Styling for very small screens */
@media (max-width: 576px) {
  accountnav ul {
      justify-content: flex-start; /* Align items to the left */
      overflow-x: scroll; /* Allow scrolling if the items overflow */
      white-space: nowrap;
  }

  accountnav ul li a {
      font-size: 12px; /* Smaller font for smaller screens */
  }

  #inboxlogo {
      max-height: 30px; /* Adjust logo size */
  }
}


#inboxlogo {
  height: 50px;
  margin-right: 20px;
}

.inboxheader nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}

.inboxheader nav li {
margin-right: 20px;
}

.inboxheader nav a {
color: #fff;
text-decoration: none;
}

.inboxheader nav a:hover {
color: #ccc;
}

.inboxheader nav a.active {
color: #fff;
font-weight: bold;
}

.message-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}

.sender {
font-weight: bold;
}

.date {
color: #666;
font-size: 0.8em;
}

.message-body {
padding: 10px;
}

.btn-compose {
background-color: #ff5a00;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

.btn-compose:hover {
background-color: #00478f;
}

.btn-refresh {
background-color: #ff5a00;
color: #fffefe;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

.btn-refresh:hover {
background-color: #00478f;
}

.parent-container {
display: flex;
justify-content: center;
align-items: center;
}

.add-to-fav {
font-size: 25px;
color: #000000;
transition: color 0.3s ease;
cursor: pointer;
position: relative;
z-index: 5;
padding: 0px; /* Add padding */
}

.add-to-fav:hover {
color: #ff5a00;
}

.add-to-fav.active {
color: #ff5a00;
}

.add-to-fav.active i {
color: #ff5a00;
}

.search-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: #ffffff;
  display: none; /* Initially hidden */
  padding: 20px 0; /* Adjust padding for the section */
  margin-top: 0;
}

.search-wrapper .search-content form {
  position: relative;
  z-index: 2;
  text-align: center;
}

.search-wrapper .search-content form input {
  width: 50%;
  height: 45px;
  border: 1px solid #ccc;
  padding-left: 20px;
  font-size: 14px;
  color: #000000;
  margin: 15px auto 0;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.search-wrapper .search-content form button {
  position: absolute;
  top: 10px;
  right: 180px;
  border: 0;
  width: 50px;
  height: 40px;
  z-index: 10;
  cursor: pointer;
  background-color: transparent;
  color: #000;
  font-size: 15px;
}

.search-wrapper .search-close {
  transition-duration: 500ms;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 49px;
  right: 220px;
  background-color: transparent;
  text-align: center;
  color: #000000;
  line-height: 20px;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
}

.search-wrapper .search-close:hover {
  background-color: #f31515;
}

/* Mobile styles */
@media (max-width: 767px) {
  .search-wrapper {
      padding: 15px; /* Adjust padding for mobile */
  }

  .search-wrapper .search-content form input {
      width: 75%; /* Full width for mobile */
      margin: 0 auto; /* Center horizontally */
  }

  .search-wrapper .search-content form button {
      position: relative;
      top: auto;
      right: auto;
      width: 40px;
      height: 40px;
      font-size: 16px; /* Adjust font size */
      margin-left: 10px; /* Space between input and button */
  }

  .search-wrapper .search-close {
      top: 34px;
      right: 10px; /* Adjust position */
      font-size: 22px; /* Adjust font size */
  }
}

.carousel-inner .carousel-item img {
width: 800px;  /* Set the width to 800px */
height: 400px; /* Set the height to 400px */
object-fit: cover; /* Ensure the image covers the entire item without distortion */
display: block; /* Ensure the image is displayed as a block element */
}

.suggestion-box {
  display: none;
  background-color: white;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  width: 40%;
  z-index: 1000;
  margin-top: 5px;
  left: 50%;
  transform: translateX(-50%);
}

.suggestion-item {
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
}

.suggestion-item a {
  text-decoration: none;
  color: black;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}

/* Mobile view */
@media only screen and (max-width: 768px) {
  .suggestion-box {
      width: 70%; /* Adjust the width for mobile view */
      left: 7%; /* Adjust the left position for mobile view */
      transform: translateX(0); /* Remove the horizontal translation */
  }
}

/* Quantity selector styles */
.quantity-selector {
  display: flex;
  align-items: center;
  margin: 10px 0;
  position: relative;
  bottom: 50px;
}

.quantity-selector button {
  background-color: #ff5a00;
  padding: 7px 8px;
  font-size: 20px;
  cursor: pointer; 
  margin: 0; /* Ensure no extra margins */
  line-height: 0; 
  height: 28px;
  width: 30px;
}

.quantity-selector button:hover {
  background-color: #00478f;
}

.quantity-selector .quantity-input {
  width: 40px;
  text-align: center;
  border-radius: 4px;
  margin: 0 5px;
  font-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: textfield; 
  appearance: textfield;
  height: 30px;
}

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

.product-variations {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 68px;
margin-bottom: 50px;
position: relative;
z-index: 1;
padding: 10px;
}

/* Large screens */
@media (min-width: 1800px) {
.product-variations {
  gap: 160px;
}
}

.color-selection,
.quality-selection,
.size-selection {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
position: static;
  white-space: nowrap;
}

.color-selection label,
.quality-selection label,
.size-selection label {
display: block;
font-size: 14px;
font-weight: bold;
margin: 0 0 5px 0;
}

.color-selection select,
.quality-selection select,
.size-selection select {
width: 90px;
padding: 5px;
font-size: 14px;
border: 1px solid #000000;
border-radius: 5px;
height: 32px;
margin: 0;
cursor: pointer;
}

/* Styles for Size Selection */
.size-selection {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
position: static;
  white-space: nowrap;
}

.color-selection label,
.quality-selection label,
.size-selection label {
display: block;
font-size: 14px;
font-weight: bold;
margin: 0 0 5px 0;
}

.color-selection select,
.quality-selection select,
.size-selection select {
width: 90px;
padding: 5px;
font-size: 14px;
border: 1px solid #000000;
border-radius: 5px;
height: 32px;
margin: 0;
cursor: pointer;
}

/* Mobile adjustments */
@media (max-width: 768px) {
.product-variations {
  flex-direction: column;
  gap: 10px;
}

.color-selection,
.quality-selection,
.size-selection {
  width: 100%;
  align-items: center;
}

.color-selection select,
.quality-selection select,
.size-selection select {
  width: 120px;
}
}

@media (min-width: 1024px) and (max-width: 1440px) {
  .product-variations {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
  }

@media (min-width: 1024px) and (max-width: 1440px) {

  .color-selection {
    transform: translateX(-11px);
  }

  .size-selection {
    transform: translateX(30px);
  }

  .quality-selection {
    transform: translateX(12px);
  }
}

.quality-selection label {
    display: block;
    text-align: center;
    transform: translateX(-5px);
  }
}

  .color-selection,
  .quality-selection,
  .size-selection {
    width: 32%; 

  .color-selection select,
  .quality-selection select,
  .size-selection select {
    width: 100px;
  }

  @media (min-width: 1024px) and (max-width: 1440px) {

  .color-selection {
    transform: translateX(-11px); 
  }

  .size-selection {
    transform: translateX(20px);
  }

  .quality-selection {
    transform: translateX(5px);
  }

}
}


#cartItems .remove-item-btn {
  all: unset;
  color: rgb(0, 0, 0);
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 15px;
  position: relative;
  background-color: #ff7403;
}

#cartItems .remove-item-btn i {
  margin-right: 8px; 
}

#cartItems .remove-item-btn:hover {
  background-color: #ff7403;
}

#cartItems .remove-text {
  vertical-align: middle;
  top: 2px;
  position: relative;
}

@media (max-width: 768px) {
  #cartItems .remove-item-btn {
    white-space: nowrap !important; 
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 14px;
    background-color: #ff7403;
    border-radius: 5px;
    width: max-content; 
    min-width: unset; 
  }

  #cartItems td {
    text-align: center !important;
    overflow: visible !important;
  }

  #cartItems td[colspan="4"] {
    display: flex;
    justify-content: center;
    padding: 0 !important;
    align-items: center;
  }
}

/* For very small screens */
@media (max-width: 480px) {
  #cartItems .remove-item-btn {
    padding: 4px 8px; /* slightly tighter */
    font-size: 13px; /* smaller font to fit */
    border-radius: 6px;
  }

  #cartItems td[colspan="4"] {
    flex-direction: column;
    gap: 5px;
  }
}

/* Extra small screens */
@media (max-width: 360px) {
  #cartItems .remove-item-btn {
    padding: 3px 6px;
    font-size: 12px;
    gap: 4px;
    border-radius: 6px;
  }

  #cartItems .remove-item-btn i {
    margin-right: 5px;
  }

  #cartItems td[colspan="4"] {
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 768px) {
  body, html {
    overflow-x: hidden;
    overflow-y: auto;
  }

  #cartItems {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 80vh;
    -webkit-overflow-scrolling: touch;
  }

  #cartItems table {
    width: 100%;
    table-layout: fixed;
  }

  #cartItems td[colspan="4"] {
    flex-wrap: wrap;
  }
}


.fixed {
  position: fixed;
  top: 0;
  width: 100%; 
  z-index: 1000;
}

#scrollToTopBtn {
  all: unset;
  position: fixed;
  top: 500px;
  right: 1px;
  color:  #fbb710;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000; 
  font-size: 32px;
}

#ordersContainer {
width: 80%;
margin: 0 auto;
padding: 20px;
}

#ordersTable {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

#ordersTable th, #ordersTable td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

#ordersTable th {
background-color: #f2f2f2;
font-weight: bold;
}

#ordersTable tr:nth-child(even) {
background-color: #f9f9f9;
}

#ordersTable tr:hover {
background-color: #f1f1f1;
}

#ordersTable th, #ordersTable td {
text-align: left;
padding: 12px;
}

#ordersTable th {
background-color: #0056b3;
color: white;
}

/* Mobile styles */
@media (max-width: 768px) {
#ordersContainer {
  width: 100%;
  padding: 5px;
  overflow-x: auto; 
}

#ordersTable {
  width: 100%;
  font-size: 11px; 
  border-collapse: collapse;
}

#ordersTable th, #ordersTable td {
  padding: 5px; 
  word-wrap: break-word; 
  white-space: normal; 
  overflow-wrap: break-word;
  border: 1px solid #ddd; 
}

#ordersTable th {
  font-size: 14px;
  background-color: #0056b3;
  color: white;
  text-align: left; /* Ensure text is aligned to the left */
}

#ordersTable tr:nth-child(even) {
  background-color: #f9f9f9;
}

#ordersTable tr:hover {
  background-color: #f1f1f1;
}

#ordersTable tr {
  white-space: normal; 
}
}

/* === Favorites Section Styling === */
.favorite-items-wrapper {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.favorite-items-wrapper h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #333;
}

/* === Favorite Item Card === */
#favorites-container .single-product-wrapper {
  background: #fafafa;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 25px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 15px;
  text-align: center;
  border: 1px solid #eee;
}

#favorites-container .single-product-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* === Product Image === */
#favorites-container .product-img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* === Product Name === */
#favorites-container .product-description h6 {
  margin: 15px 0;
  font-size: 18px;
  font-weight: 600;
  color: #444;
}

/* === Remove Button === */
.remove-fav-btn {
  background: #ff4d4d;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.remove-fav-btn:hover {
  background: #00478f;
}

/* Responsive grid for favorites */
#favorites-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* Heart orange state */
.add-to-fav.favorited {
  color: orange !important;
}