:root {
  --main-color: #131921;
  --main-link: #fff;
  --hover-link: #fc6767;
  --secondary-color: #232f3e;
  --main-font: "Inter", sans-serif;
  --body-background-color: #ffffff;
  --dark-element: #f0f0f0;
  --black: #000;
  --white: #fff;
  --boxShadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  --mainBlue: #2a55e5;
  --light-blue: #2874f0;
  --search-icon: #828282;
  --placeholder-back: #e8f0fe;
  --primary: #0170b4;
  --bg-blue: rgba(1, 112, 180, 0.08);
}
.Hero-container {
  width: 81% !important;
  margin: auto;
}

.hero-section {
  display: flex;
}

.categories {
  position: relative;
  display: block;
  width: 20%;
  margin-top: 20px;
  padding: 10px;
}

.categories .category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
}
.category-title h4 {
  font-size: 16px;
}

.category-list .list {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #a09b9b6e;
  padding: 10px;
}
.category-list .list:hover {
  background: #a09b9b6e;
}
.list .cate-name h4 {
  font-size: 12px;
  font-weight: 400;
}
.category-list .cate-img img {
  height: 25px;
  width: 25px;
  border-radius: 50%;
}
.arrow {
  position: absolute;
  font-size: 14px !important;
  right: 30px;
  margin-top: -6px;
}

/* slider start */

.hero-slider {
  position: relative;
  top: 40px;
  width: 950px;
  height: 390px;
  overflow: hidden;
}
.slides {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}
.slides .slider-img {
  flex: 0 0 950px;
  height: 390px;
}

.navigate {
  position: relative;
}

.next {
  position: absolute;
  margin-bottom: 40px;
  right: 20px;
}
.prev {
  position: absolute;
  right: 70px;
  margin-bottom: 40px;
}
.navigate .next,
.prev {
  bottom: 0;
  padding: 5px 15px;
  border: none;
  background: var(--main-color);
  color: var(--body-background-color);
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}
.navigate .next:hover,
.navigate .prev:hover {
  background: #ccc;
  color: #000;
}

/* slider end */

.mobi-categories {
  display: none;
}
