.carousel-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.carousel {
  position: relative;
  width: 90%; /* Adjusted to make it smaller */
  max-width: 1200px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.carousel img {
  width: 100%;
  display: block;
  transition: opacity 0.5s ease-in-out; /* Smooth transition for sliding */
}

.dots-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.dots-container span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.dots-container .active {
  background-color: rgba(0, 0, 0, 1);
}

.promo-buttons {
  text-align: center;
  margin: 20px 0;
}
.promo-buttons button {
  padding: 10px 20px;
  background: #6a1b9a;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 10px;
}
.info-section {
  display: flex;
  justify-content: center; /* Center the items */
  align-items: center;
  background-color: #f9f9f9; /* Light background */
  padding: 20px;
  border-radius: 10px;
  gap: 100px; /* Adjust spacing between items */
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 150px;
}

.info-item img {
  width: 80px;
  height: 80px;
  margin-bottom: 5px; /* Reduce spacing between icon and text */
}

.info-item p {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin: 0; /* Remove extra margins */
}

/* cards container */
.cards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px;
}

.card-m {
  width: 450px;
  height: 230px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;

  /* Center text */
  display: flex;
  justify-content: center;
  align-items: center;
}
.popular {
  margin-top: 50px;
  margin-left: 150px;
}
.electro {
  width: 85%;
  height: auto;
  /* background-color: #ff5722; */
  border-radius: 20px;
  text-align: center;
  align-items: center;
  margin: 0 auto; /* Centers horizontally */
  display: flex; /* Ensures proper alignment */
  justify-content: center; /* Centers the content inside */
}

.electro a img {
  border-radius: 20px;
  width: 100%;
  height: 550px;
}

.card h3 {
  font-size: 20px;
  margin: 0;
}

.small-cards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px;
  flex-wrap: wrap;
}

.small-card {
  width: 150px;
  height: 100px;
  background-color: #041e42;
  color: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}
.small-card img {
  border-radius: 10px;
  opacity: 0.8;
}
.small-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease; /* Smooth transition */
}

.small-card:hover .overlay {
  opacity: 1; /* Show overlay on hover */
}
.small-card:hover {
  transform: scale(1.1);
}

.small-card:nth-child(1) {
  background-color: #ff5722;
} /* Women's Clothes */
.small-card:nth-child(2) {
  background-color: #d53300;
} /* Men's Clothes */
.small-card:nth-child(3) {
  background-color: #d56800;
} /* Kids' Clothes */
.small-card:nth-child(4) {
  background-color: #d54400;
} /* Cosmetics */
.small-card:nth-child(5) {
  background-color: #ff6a24;
} /* Bags */
.small-card:nth-child(6) {
  background-color: #ff7c24;
} /* Bags */
.small-card:nth-child(7) {
  background-color: #ff4524;
} /* Bags */

.discount_price {
  background-color: #f5f5f5;
  display: flex;
  justify-content: center; /* Center items */
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping */
  max-width: 1200px; /* Set a maximum width for the row */
  width: 100%; /* Full width */
  margin: 0 auto; /* Center the row horizontally */
  border-radius: 20px;
  padding: 20px; /* Optional: Add some padding */
}
.row-discount {
  display: flex;
  justify-content: center; /* Center items */
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping */
  width: 85%; /* Adjust the grid width */
  border-radius: 20px;
}

.discount-text {
  display: flex;
  justify-content: space-between; /* Distribute items to the left and right */
  align-items: center; /* Align vertically in the middle */
  margin-top: 50px; /* Optional: Add top margin for spacing */
}

.discount-header {
  font-size: 20px;
  text-transform: uppercase;
  text-align: start;
  margin-left: 10%; /* Remove left margin for alignment */
  margin-bottom: 15px;
}

.discount-desc {
  text-align: end;
  margin-right: 10%; /* Remove right margin for alignment */
}

/* Adjust the card container spacing */
.card {
  margin-top: 10px;
  width: 100%; /* Make the card take full width of its column */
  max-width: 250px; /* Set a maximum width for the card */
  height: auto; /* Let the height adjust based on content */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Maintain a subtle shadow */
  border-radius: 8px; /* Rounded corners */
  text-align: center;
}

.card-img-top {
  width: 100%; /* Set the width to fill the card */
  height: 100%; /* Set a fixed height for the image */
  object-fit: cover; /* Ensure the image covers the area */
}

/* Adjust the spacing for card items (like the title, price) */

.card-title {
  font-size: 16px; /* Smaller font size for title */
  margin-bottom: 5px;
}

.card-text {
  font-size: 12px; /* Smaller font size for description */
  margin-bottom: 8px;
}

.card .btn {
  font-size: 12px; /* Smaller button size */
  padding: 5px 10px; /* Reduced padding for buttons */
}

/* Reduce spacing for the card text and button */
.card-text {
  font-size: 14px;
  margin-bottom: 10px; /* Reduce space between description and button */
}
.row {
  background-color: #f5f5f5;
  border-radius: 20px;
  width: 90%;

  text-align: center;
  align-items: center;
}
.latest-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 auto;
}

.card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn-primary {
  background-color: #ff5722;
  border: none;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  width: 60%;
  height: 40px;
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background-color: #e89c1e;
}

.card-title {
  color: gray;
}
.latest-added {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 0 auto; /* Ensures it centers within parent */

  padding: 20px;
}
/* Each item within the flexbox */
.latest-item {
  flex: 1 1 calc(20% - 20px); /* 5 items per row */
  display: flex;
  align-items: center;
  justify-content: center; /* Optional: Centers content inside each item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 8px;
  margin: 10px; /* Spacing between items */
}

/* Image size */
.latest-item img {
  width: 150px; /* Adjusted width for responsiveness */
  height: auto;
  object-fit: cover;
  margin-right: 15px;
}
.section-title {
  font-size: 2rem;
  font-weight: bold;
  margin: 20px 0;
  color: #041e42;
  text-align: left;
}

/* Adjust the margin between cards */

.latest-added h2 {
  text-transform: uppercase;
  font-size: 25px;
  text-align: start;
  color: #293546;
}
/* Circle container styling */
.circle {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.circle img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
}

.circle:hover {
  transform: scale(1.1);
  background-color: #ffe4c4;
}