body{
  font-family: poppins;
  font-size: 14px; 
}
/* Top Bar */
.topbar{
  font-size: 14px;
  box-sizing: border-box;

}

/* Top Bar */

/* Navbar */

.navbar{
  font-family: poppins;
  font-size: 16px;

}
.navbar-container{
  box-sizing: border-box;
}

.sticky-navbar {
  position: sticky;
  top: 0;
  color: white;
  transition: top 0.3s;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .navbar-brand img{
    width: 100px;
  }
}


.dropdown-toggle::after {
display: none;
}

.dropdown-content {
  display: none;
  opacity: 90%;

}
.dropdown a {
  display: block;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.search-bar input[type=text]{
  width: 70%;

}

/* Modal custom styles */
#searchModal .modal-dialog {
  margin: 5% auto; /* Center the modal */
}

#searchModal .modal-content {
  border: none;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

#searchModal .modal-body {
  padding: 15px;
}

/* Search input styles */
#searchModal .form-control {
  border: 1px solid #ccc;
  border-radius: 30px;
  padding-right: 40px; /* Padding to make space for the icon */
  font-size: 16px;
  height: 60px;
  transition: all 0.3s ease;
}

/* Search icon inside input */
#searchModal .search-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

/* Placeholder styling */
#searchModal .form-control::placeholder {
  color: #999; /* Default placeholder color */
  transition: all 0.3s ease;
}

/* Placeholder animation */
#searchModal .form-control:focus::placeholder {
  color: #007bff;
  font-size: 12px;
  transform: translateY(-20px);
}

#searchModal .form-group {
  position: relative;
  margin-bottom: 0;
}

/* Add animation effect for the search icon */
#searchModal .form-control:focus + .search-icon {
  color: #007bff;
}

/* Position the close button on the right side of the input */
#searchModal .close-btn {
  position: absolute;
  right: -30px; /* Adjust this value as needed */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: #999;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

#searchModal .close-btn:hover {
  color: #007bff;
}




/* Navbar */

/* Custom Owl Carousel Navigation Styles */
.owl-prev,
.owl-next {
  background-color: #3498db; /* Change this to your preferred color */
  color: #fff;
  font-size: 24px;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s;
  padding: 10px;
}

.owl-prev:hover,
.owl-next:hover {
  background-color: #2980b9; /* Change this to your preferred color on hover */
}

.owl-prev {
  left: 10px;
}

.owl-next {
  right: 10px;
}

/* Optional: Add smooth transition for the carousel items */
.owl-item {
  transition: transform 0.3s ease-in-out;
}

.owl-carousel:hover .owl-nav {
  opacity: 1;
}

.owl-carousel .owl-dots {
  display: none;
}

.owl-carousel .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}

/* Optional: If you want to center the navigation vertically */
.owl-carousel .owl-nav button {
  transform: translateY(-50%);
}

/* Optional: Add shadows for a more dimensional look */
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}




/* filter bar */

.filter-bar form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.filter-bar select, .filter-bar button {
  font-size: 16px;
  padding: 10px;
  border-radius: 10px;
}

.filter-bar button {
  color: white;
  border: none;
  cursor: pointer;
  .filter-bar select, .filter-bar button {
    font-size: 14px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    transition: all 0.3s ease;
}
}

.filter-bar button:hover {
  background-color: #45a049;
}

@media only screen and (max-width: 600px) {
  .filter-bar form {
    display: grid;
    gap: 10px;
  }

}

@media only screen and (max-width: 900px) {
  .filter-bar form {
    display: grid;
    gap: 10px;
  }

}

.breadcrumb {
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin: 20px 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: #6c757d;
}

.breadcrumb-item a {
  color: #007bff;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #6c757d;
}


@keyframes scrolling {
  0% { transform: translateX(10vw); }
  100% { transform: translatex(100vw); }
}

.product{
  border-radius: 10% 10% 0% 0%;
}

.product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Show only 1 line */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* Needed for multiline clamp */
  font-size: 13px;
  line-height: 1.1;
  font-weight: 500;
  color: #000000;
  height: calc(1.1em * 2); /* Set height to fit 1 line */
}


.product-details .product-price {
  font-size: 16px;
  font-weight: 400;       /* Slightly bold (use 700 for bolder) */
}

.product-single-price{
  font-weight: 600;       /* Slightly bold (use 700 for bolder) */
  font-size: 1.8rem;
}

.product-single-details img,
.product-single-details video
.product-single-details iframe {
  max-width: 100%;
  height: auto;
}


.product-image img{
  border-radius: 10% 10% 0% 0%;
}

.product-image {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 10% 10% 0% 0%;
}

.overlay a.btn-quick-view {
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(20px); /* Initial position, adjust as needed */
}

.product-image:hover .overlay {
  opacity: 1;
}

.product-image:hover .overlay a.btn-quick-view {
  opacity: 1;
  transform: translateY(0); /* Move to the original position */
}

.product-reviews  .fa {
  color: #facf19; /* Change the color of the stars to your desired color */
}
.product-reviews {
display: flex;
justify-content: center;
align-items: center;
}

.subscribe-newsletter{
  background: #facf19;
}

.mouse {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -30px;
}

.mouse-icon {
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  text-align: center;
  margin: 0 auto;
  display: block; }

  .mouse-wheel {
    height: 30px;
    margin: 2px auto 0;
    display: block;
    width: 30px;
    background: transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: 1.6s ease infinite wheel-up-down;
    -moz-animation: 1.6s ease infinite wheel-up-down;
    animation: 1.6s ease infinite wheel-up-down;
    color: #fff;
    font-size: 20px; }
  
  @-webkit-keyframes wheel-up-down {
    100% {
      margin-top: 2px;
      opacity: 1; }
    30% {
      opacity: 1; }
    0% {
      margin-top: 20px;
      opacity: 0; } }
  
  @-moz-keyframes wheel-up-down {
    100% {
      margin-top: 2px;
      opacity: 1; }
    30% {
      opacity: 1; }
    0% {
      margin-top: 20px;
      opacity: 0; } }
  
  @keyframes wheel-up-down {
    100% {
      margin-top: 2px;
      opacity: 1; }
    30% {
      opacity: 1; }
    0% {
      margin-top: 20px;
      opacity: 0; } }

    footer a {
      color: white;
    }

    /* --- REMOVED ZOOM ON CAROUSEL/MODAL IMAGES --- */
    .carousel-inner {
      position: relative;
      overflow: hidden; /* Ensures the images don't spill over */
    }
    
    .carousel-inner img {
      /* Zoom-related styles removed */
      transition: none;
      transform: none;
      transform-origin: center;
    }
    
    .carousel-inner:hover img {
      /* Zoom-related styles removed */
      transform: none;
      cursor: default;
    }

    .carousel-inner-modal {
      position: relative;
      overflow: hidden; /* Ensures the images don't spill over */
    }
    
    .carousel-inner-modal img {
      /* Zoom-related styles removed */
      transition: none;
      transform: none;
      transform-origin: center;
    }
    
    .carousel-inner-modal:hover img {
      /* Zoom-related styles removed */
      transform: none;
      cursor: default;
    }
    /* --- END REMOVED ZOOM --- */

    .owl-prev-thumb{
      opacity: 0.6;
      width: 40px; 
      height:120px; 
      background-color: white;
      cursor: pointer;
      margin-left:-20px;
    }
    .owl-prev-thumb:hover{
      opacity: 0.9;
    }
    .owl-next-thumb{
      opacity: 0.6;
      width: 40px; 
      height:120px; 
      background-color: white;
      cursor: pointer;
      margin-right:-20px;
    }
    .owl-next-thumb:hover{
      opacity: 0.9;

    }

    .owl-prev-related{
      opacity: 0.6;
      width: 60px; 
      height:400px; 
      background-color: white;
      cursor: pointer;
      margin-left:-20px;
    }
    .owl-prev-related:hover{
      opacity: 0.9;
    }
    .owl-next-related{
      opacity: 0.6;
      width: 60px; 
      height:400px; 
      background-color: white;
      cursor: pointer;
      margin-right:-20px;
    }
    .owl-next-related:hover{
      opacity: 0.9;

    }

    .buy-it-now-btn:hover{
      background-color: #fff;
      color: green;
    }

    .product-single-quantity .btn{
      height: 50px !important;
      text-align: center;
      color: #000000 !important;
      font-size: 14px;
      border-radius: 50%;
    }

   .product-single-quantity .input-number{
      height: 54px !important;
      text-align: center;
      border: 1px solid rgba(0, 0, 0, 0.05) !important;
      color: #000000 !important;
      padding: 0;
      font-size: 18px; }
    


    

.cart button{
  height: 50px !important;
  text-align: center;
  color: #000000 !important;
  font-size: 14px;
  border-radius: 50%;
}


.cart .form-control {
  height: 54px !important;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  color: #000000 !important;
  padding: 0;
  font-size: 14px; }

.cart .form-group {
  position: relative; }
  .cart .form-group .form-control {
    padding-right: 40px; }
  .cart .form-group .select-wrap {
    position: relative; }
    .cart .form-group .select-wrap select {
      font-size: 14px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; }

.cart .info label {
  font-size: 13px;
  color: #000000; }

.cart-list {
  overflow-x: scroll; }

.table {
  width: 100%;
  text-align: center; }

    .table .thead-primary tr th {
      padding: 20px 10px;
      color: #fff !important;
      border: 1px solid transparent !important; }
  .table tbody tr td {
    text-align: center !important;
    vertical-align: middle;
    padding: 40px 10px;
  }
    .table tbody tr td.quantity {
      width: 20%; }
    .table tbody tr td.image-prod .img {
      width: 120px;
      height: 120px;
      margin: 0 auto; }
    .table tbody tr td.product-name {
      width: 20%; }
      .table tbody tr td.product-name h3 {
        font-size: 16px; }
    .table tbody tr td.total, .table tbody tr td.price {
      color: #000000; }

.cart-wrap .btn-primary {
  display: inline-block; }

.cart-total {
  width: 100%;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 20px; }
  .cart-total h3 {
    font-size: 16px;
    margin-bottom: 20px; }
  .cart-total p {
    width: 100%;
    display: block; }
    .cart-total p span {
      display: block;
      width: 50%; }
    .cart-total p.total-price span {
      text-transform: uppercase; }
      .cart-total p.total-price span:last-child {
        color: #000000;
        font-weight: 600; }
  .cart-total hr {
    background: rgba(255, 255, 255, 0.1); }


.cart-detail {
  width: 100%;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.05); }
  .cart-detail.cart-total {
    border: 1px solid rgba(0, 0, 0, 0.05); }
  .cart-detail .btn-primary {
    display: block;
    width: 100%;
   }

         /* Responsive adjustments */
         @media (max-width: 767.98px) {
          .table{
            overflow: hidden;
          }
          .table thead {
            display: none; /* Hide table headers */
          }
        
          .table tbody tr {
            margin: 5% 5%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
          }
        
          .table tbody tr td {
            display: flex;
            justify-content:start;
            text-align: left;
            border: none;
            padding: 10px 10px;
          }
        
          .table tbody tr td.quantity {
            width: 100%;
           }
        
            .table tbody tr td.product-name {
              width: 100%; }  
        
        }
     



   .billing-heading {
    font-size: 24px; }
  
  .billing-form .form-group {
    position: relative; }
  
  .billing-form label {
    color: #000000;
    font-size: 14px; }
  
  .billing-form .icon {
    position: absolute;
    top: 50% !important;
    right: 15px;
    font-size: 14px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
    .billing-form .icon span {
      color: black !important; }
  
  .billing-form .select-wrap, .billing-form .input-wrap {
    position: relative; }
    .billing-form .select-wrap select, .billing-form .input-wrap select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; }
  
  .billing-form .form-control {
    font-weight: 300;
    border: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    height: 58px !important;
    padding-left: 15px;
    padding-right: 15px;
    background: transparent !important;
    color: rgba(0, 0, 0, 0.4) !important;
    font-size: 14px;
    border-radius: 0px; }
    .billing-form .form-control::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: rgba(0, 0, 0, 0.4); }
    .billing-form .form-control::-moz-placeholder {
      /* Firefox 19+ */
      color: rgba(0, 0, 0, 0.4); }
    .billing-form .form-control:-ms-input-placeholder {
      /* IE 10+ */
      color: rgba(0, 0, 0, 0.4); }
    .billing-form .form-control:-moz-placeholder {
      /* Firefox 18- */
      color: rgba(0, 0, 0, 0.4); }
  
  .billing-form textarea.form-control {
    height: inherit !important; }
  
  .cart-detail {
    width: 100%;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.05); }
    .cart-detail.cart-total {
      border: 1px solid rgba(0, 0, 0, 0.05); }
    .cart-detail .btn-primary {
      display: block;
      width: 100%; }

      .copy-btn {
        cursor: pointer;
        color: rgba(0, 0, 0, 0.5); 
        margin-left: 5px;
    }