@import url("./theme.css");

/* Some Change in Dark Mode */
[data-theme="dark"] {
  .courses-category,
  .list-group,
  .hashtag-item {
    border: 1px solid #00000071 !important;
    box-shadow: none !important;
    color: #000 !important;
  }

  .title-groups {
    color: var(--black3) !important;
  }

  .list-group > *,
  .courses-category h3 {
    color: #000 !important;
  }
}

body {
  overflow: hidden !important;
}

.bg-categories {
  position: absolute !important;
  top: 179px !important;
  left: 50px !important;
  z-index: -1;
  width: 100% !important;
  opacity: 0.2;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 550px) {
  .bg-categories {
    position: absolute !important;
    top: 80px !important;
    left: 0px !important;
    right: 0px !important;
    z-index: -1;
    width: 200% !important;
    opacity: 0.2 !important;
    filter: blur(0px) !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* Intro Start */

@media (max-width: 550px) {
  .con-intro h1 {
    font-size: 25px !important;
    font-family: "rokhb" !important;
    text-align: right !important;
    line-height: 30px !important;
  }
  .con-intro h1 span {
    font-size: 25px !important;
    text-align: right !important;
  }
}

/* Intro End */

/* Boxes Start */
.con-boxes-category {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0px !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 30px !important;
}

.con-boxes-category::-webkit-scrollbar {
  display: none;
}

.side .box {
  flex: 0 0 calc((100% / 3) - (30px * 2 / 3)) !important;
}

@media (max-width: 768px) {
  .con-boxes-category {
    gap: 20px !important;
    padding-top: 10px !important;
  }
  .side .box {
    flex: 0 0 calc((100% / 2) - (20px / 2)) !important;
    padding: 12px !important;
  }
}
/* Boxes END */

/* hashtag Start */
.hashtag-item {
  padding: 5px 15px !important;
  background: var(--black2) !important;
  border-radius: 200px !important;
  font-size: 12px !important;
  margin: 5px !important;
  filter: opacity(0.8);
  cursor: pointer;
}

.hashtag-item:hover {
  transform: scale(1.1) !important;
  background: var(--yellow2) !important;
  color: var(--black1) !important;
  filter: opacity(1);
}

@media (max-width: 550px) {
  .hashtag-item {
    font-size: 10px !important;
    padding: 2.5px 10px !important;
  }
}

/* hashtag ENd */

/* side-right */
.title-groups {
  font-size: 16px !important;
  font-family: "rokhm" !important;
}

.side-right {
  margin-top: 30px !important;
  padding-left: 30px !important;
}

.side-right .groups li {
  text-align: right !important;
  background: linear-gradient(to left, var(--black2), var(--black2)) !important;
  opacity: 0.5 !important;

  cursor: pointer;
}

.side-right .groups li:hover {
  background: linear-gradient(to left, var(--black2), var(--black2)) !important;
  opacity: 1 !important;
}

.side-right .groups .selected {
  text-align: right !important;
  background: linear-gradient(to left, var(--black2), var(--black2)) !important;
  opacity: 1 !important;
}

@media (max-width: 992px) {
  .w-md-100 {
    width: 100% !important;
  }
  .side-right {
    margin: 0px !important;
    padding: 0px !important;
  }
}
@media (max-width: 550px) {
  .title-groups {
    font-size: 14px !important;
  }

  .list-group-item {
    font-size: 14px !important;
  }
}
/* side-right END */

/* courses-category Start */
.courses-category {
  height: 90px !important;
  background-color: var(--black2) !important;
  padding: 10px !important;
  cursor: pointer;
}

.courses-category:hover {
  transform: scale(0.95) !important;
}

.courses-category img {
  height: 100% !important;
}

.courses-category .conimg {
  width: 120px !important;
  height: 100% !important;
  overflow: hidden;
}

.courses-category h3 {
  font-size: 14px !important;
  text-align: right !important;
  line-height: 25px !important;
  margin: 0px !important;
  padding: 0px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.courses-category small {
  font-size: 9px !important;
  color: var(--yellow2) !important;
  margin-top: 5px !important;
}

@media (max-width: 550px) {
  .courses-category h3 {
    font-size: 14px !important;
  }
}

/* courses-category END */