/* utility calsses */
/* .knowledge-center#knowledge-center { */
:root {
  --margin-top: 40px;
  --pad-val: 30px;
  --val-05: 8px;
  --val-005: -8px;
  --val-1: 16px;
  --val-1\/5: 24px;
  --val-2: 32px;
  --val-2\/5: 40px;
  --val-3: 48px;
  --val-4: 64px;
  --val-5: 80px;
  --val-13: 13px;
  --val-10: 10px;
  --val-010: -10px;
  --val-20: 20px;
  --val-020: -20px;
  --val-30: 30px;

  /* other widths */
  --maxwidth-container: 1462px;
  --description-maxwidth: 80%;
  --height-searchbar-button: 65px;
  --height-searchbar: 75px;
  --border-radius-1\/4: 20px;
  --left-min-width: 700px;
  --left-max-width: 735px;
  --right-min-width: 235px;
  --slider-container-height: 700px;
  --slider-max-width: 2500px;
  --slider-width: 400px;
  --slider-height: 700px;
  --categories-summary-maxwidth: 405px;
  --category-card-minmax: 350px;
  --recommended-card-minmax: 190px;
  --card-divider-width: 80%;
  --avatar-size: 33px;
  --subscribe-searchbar-width: 455px;

  /* font-weight */
  /* --font-lite: 100;
  --font-regular: 300;
  --font-semibold: 500;
  --font-bold: 600;
  --font-bolder: 700; */
  --font-lite: 300;
  --font-regular: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-bolder: 900;

  /* border radius */
  --border-radius-1: 10px;
  --border-radius-2: 7px;
  --border-radius-3: 20px;

  /* color */
  --color-hero-searchbar-transparent: transparent;
  --color-grey3: #e8e8e8;
  --color-grey4: #d8d8d8;

  /* text color */
  --text-color-white: #fff;
  --text-color-primary: #2687c9;
  --text-color-black1: #151618;
  --text-color-grey1: #333333;
  --text-color-grey2: #666666;
  --text-color-grey3: #999999;
  --text-color-grey4: #777777;
  --text-color-grey5: #efeef0;
  --text-color-grey6: #e6e6ea;

  /* bg color */
  --color-hero-searchbar: #e5e5e5;
  --bg-color-transparent: transparent;
  --bg-color-primary: #2687c9;
  --bg-color-primary-01: rgba(38, 135, 201, 0.1);
  --bg-color-hero: #f8f8f8;
  --bg-color-white: #fff;

  /* icons */
  --right-arrow-icon: url('../../knowledge-center/icons/right_arrow.svg');
  --left-arrow-icon: url('../../knowledge-center/icons/left_arrow.svg');
  --no-image: url('../../knowledge-center/best-stories/no_image.jpg');
  --no-person-image: url('../../../assets/images/default-profile-picture.png');
}
.bg-color-primary-01 {
  background-color: var(--bg-color-primary-01);
}
.border-grey-3 {
  border-top: 1px solid var(--color-grey3);
}
.w-h-24 {
  width: 24px;
  height: 24px;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.w-auto {
  width: auto;
}
.h-auto {
  height: auto;
}
.position-relative {
  position: relative;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
  -webkit-line-clamp: 3;
}
.rotate-180 {
  transform: rotate(180deg);
}

/* flex */
.display--flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-direction__row {
  flex-direction: row;
}
.flex-direction__column {
  flex-direction: column;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.gap-x-0 {
  row-gap: 0;
}
.gap-y-0 {
  column-gap: 0;
}
.gap-x-05 {
  row-gap: 0.5rem;
}
.gap-y-05 {
  column-gap: 0.5rem;
}
.gap-y-07 {
  column-gap: 0.7rem;
}
.gap-x-1 {
  row-gap: var(--val-1);
}
.gap-y-1 {
  column-gap: var(--val-1);
}
.gap-x-1\/5 {
  row-gap: var(--val-1\/5);
}
.gap-y-1\/5 {
  column-gap: var(--val-1\/5);
}
.gap-x-2 {
  row-gap: var(--val-2);
}
.gap-x-3 {
  row-gap: var(--val-3);
}
.gap-y-2 {
  column-gap: var(--val-2);
}
/* end flex */

/* grid */
.display--grid {
  display: grid;
}
.grid-gap-05 {
  grid-gap: var(--val-05);
}
.grid-gap-1\/5 {
  grid-gap: var(--val-1\/5);
}
.grid-gap-1 {
  grid-gap: var(--val-1);
}
.grid-gap-2 {
  grid-gap: var(--val-2);
}
.grid-gap-3 {
  grid-gap: var(--val-3);
}
.items-stretch {
  align-items: stretch;
}

/* end grid */
.text-end {
  text-align: end;
}
.text-center {
  text-align: center;
}
.list-style {
  list-style: disc;
}
.list-style-none {
  list-style: none;
}

.p-05 {
  padding: calc(var(--val-1) * 0.5);
}
.pt-3 {
  padding-top: calc(var(--val-1) * 3);
}
.mt-1 {
  margin-top: calc(var(--val-1) * 1);
}
.mt-2 {
  margin-top: calc(var(--val-1) * 2);
}
.mt-3 {
  margin-top: calc(var(--val-1) * 3);
}
.my-3 {
  margin-top: calc(var(--val-1) * 3);
  margin-bottom: calc(var(--val-1) * 3);
}
.mt-5 {
  margin-top: calc(var(--val-1) * 5);
}
.ml-1 {
  margin-left: calc(var(--val-1) * 1);
}
.ml-2 {
  margin-left: calc(var(--val-1) * 2);
}
.mb-3 {
  margin-top: calc(var(--val-1) * 3);
}
.pt-05 {
  padding-top: calc(var(--val-05));
}
.pt-3 {
  padding-top: calc(var(--val-1) * 3);
}
.pb-3 {
  padding-top: calc(var(--val-1) * 3);
}
.mb-07 {
  margin-bottom: var(--val-05);
}
.mx-auto  {
  margin-left: auto;
  margin-right: auto;
}
.hr-1 {
  height: 1px;
  margin: var(--val-1) 0;
  background-color: var(--color-grey4);
}
.hr-1\/5 {
  height: 1px;
  margin: var(--val-1\/5) 0;
  background-color: var(--color-grey4);
}
.hr-2 {
  height: 1px;
  margin: var(--val-2) 0;
  background-color: var(--color-grey4);
}
.text-truncate{
  overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.cursor-pointer {
  cursor: pointer;
}
.bg-searchbar {
  background-color: var(--color-hero-searchbar);
  border-radius: var(--border-radius-1);
}
.searchbar-button__close{
  position: absolute;
    top: 20%;
    right: 155px;
    cursor: pointer;
}
.subscribe-button__close{
  position: absolute;
    top: 20%;
    right: 140px;
    cursor: pointer;
}
.bg-searchbar input {
  font-size: 18px;
}
/* Ends Utitlity */