.blog-landing {
  min-height: 30vh;
}
.blog-landing__wrapper {
  background-color: rgba(0, 0, 0, 0.5);
}
.blog-landing__title {
  font-size: var(--font-size-30-responsive);
}
/* landing end */
.blog-tabs {
  min-height: 100vh;
  max-width: 1300px;
}
.blog-tabs .blog-tabs__btn {
  all: unset;
  padding: 0.17rem 0.8rem;
  font-size: var(--font-size-12);
  color: var(--color-gray);
  border: 1px solid var(--border-light);
  transition: all 400ms;
  cursor: pointer;
}
.blog-tabs .blog-tabs__btn.active {
  background-color: #39c3e3;
  border-color: #39c3e3;
  color: white;
}
.blog-tabs__wrapper {
  margin: 5% 0;
}
/* blog cards start */
.blog-tabs--card {
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  cursor: pointer;
  flex-grow: 0;
  flex-shrink: 0;
}
.blog-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  transition: all 300ms;
}

.blog-tabs--card .blog-card__info {
  color: var(--color-gray);
}
.blog-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 100ms linear;
}
.blog-card__text {
  color: var(--color-mid-gray);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-card_body:hover .blog-card_title {
  color: rgb(106, 100, 122);
}
/* adding pagination in card */
.blog-card__pagination {
  bottom: 5%;
  display: none;
  opacity: 0;
  transition: all 100ms;
}
.blog-card__pagination-btn {
  all: unset;
  width: 12px;
  aspect-ratio: 1;
  background-color: var(--color-white);
  opacity: 0.5;
}
.blog-card__pagination-btn.active {
  opacity: 1 !important;
}
.blog-tabs .blog-card_img:hover .blog-card_pagination {
  display: block;
  opacity: 1;
}
/* latest blogs start */
.blog-latest_wrapper {
  container-type: inline-size;
}
.blog-latest-card:not(:last-child) {
  border-bottom: 1px solid #ebebeb;
}
.blog-latest-card {
  padding: 8px 0;
}
.blog-latest__title {
  color: var(--color-mid-gray);
  font-size: var(--font-size-24);
}
.latest-card__img {
  width: 60px;
  height: 60px;
  aspect-ratio: 1;
  background-color: rgb(157, 157, 157);
  flex-shrink: 0;
}
.latest-card__cate {
  font-size: 8px;
  color: var(--color-gray);
  margin-bottom: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.latest-card__cate span:not(:last-child)::after,
.multi-card__cate span:not(:last-child)::after {
  content: ", ";
}
.latest-card__title {
  font-size: var(--font-size-16);
  line-height: 19px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* latest card end */

/* blog multi card section started */
.blog-multi {
  padding: 5%;
}

.blog-multi-row_blur {
  height: 80px;
  background: rgba(
    255,
    255,
    255,
    0.2
  ); 
  backdrop-filter: blur(15px);
  mask-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.blog-multi .blog-multi__header,
.blog-must .blog-must__header {
  font-size: var(--font-size-22-responsive);
  font-family: "EB Garamond", serif;
}
.blog-multi .multi-card {
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
  cursor: pointer;
}
.multi-card__cate {
  font-size: var(--font-size-12);
  color: rgb(154, 135, 222);
  margin-bottom: 0.4rem;
  letter-spacing: 1px;
}
.blog-multi .multi-card-body {
  padding: 1.6rem 0;
}
.blog-multi .multi-card__title {
  font-size: var(--font-size-20);
  color: var(--color-mid-gray);
  line-height: 21px;
  margin-bottom: 0.6rem;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-multi .multi-card__text {
  font-size: var(--font-size-14);
  color: var(--color-gray);
  line-height: 19px;

  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-multi .multi-card__img {
  max-height: 420px;
}
/* must section start */

.blog-must {
  max-width: 1200px;
  min-height: 100vh;
}
.blog-must__view {
  font-size: var(--font-size-16);
  color: var(--color-black);
  cursor: pointer;
  transition: all 200ms;
}
.blog-must__view:hover {
  color: var(--text-color);
}
.blog-must .must-card__cate {
  font-size: 9px;
  color: var(--color-mid-gray);
}
.blog-must .must-card__cate span:not(:last-child)::after {
  content: "";
  height: 80%;
  width: 1px;
  background-color: var(--color-gray);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.blog-must .must-card .must-card__title {
  font-size: var(--font-size-16-responsive);
  font-family: "EB Garamond", serif;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-must .must-card .must-card__text {
  font-size: var(--font-size-12);
  line-height: 15px;
  color: var(--color-mid-gray);

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-must .must-card .must-card__data {
  font-size: 8px;
  color: var(--color-mid-gray);
}
/* must section end */
.social-box .social-box__title {
  font-size: var(--font-size-24);
  font-family: "EB Garamond", serif;
}
.social-box .social-box__icon {
  font-size: var(--font-size-30);
}
.social-box .social-box__count {
  font-size: var(--font-size-22);
  font-family: "EB Garamond", serif;
}
.social-box .social-box__text {
  font-size: var(--font-size-14);
}

.social-box .social-box__icon.facebook {
  color: #1877f2;
}
.social-box .social-box__icon.instagram {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4); /* Instagram gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.social-box .social-box__icon.youtube {
  color: #ff0000;
}
/* blog multi card section ended */
.blog-tabs__cardsWrapper {
  container-type: inline-size;
}
.blog-tabs--card {
  max-width: 255px;
  width: 45%;
}
.blog-tabs--card .blog-card__title {
  font-size: var(--font-size-14);
  margin-bottom: 0.3rem;
}
.blog-card__text {
  font-size: 11px;
  line-height: 13px;
}
.blog-tabs--card .blog-card__info {
  font-size: 8px;
  margin-bottom: 0.4rem;
}
.blog-card__body {
  padding: 6px;
}

@container (min-width: 438px) {
  .blog-card__body {
    padding: 13px;
  }
  .blog-tabs--card .blog-card__title {
    font-size: var(--font-size-18);
    margin-bottom: 0.4rem;
  }
  .blog-card__text {
    font-size: 13px;
    line-height: 18px;
  }
  .blog-tabs--card .blog-card__info {
    font-size: var(--font-size-10);
    margin-bottom: 0.4rem;
  }
  .blog-card__body {
    padding: 10px;
  }
}
@container (min-width: 507px) {
  .blog-card__body {
    padding: 15px;
  }
}
@container (min-width: 547px) {
  .blog-tabs--card {
    width: 260px;
    max-width: 350px;
  }
  .blog-card__body {
    padding: 20px;
  }
}
@container (min-width:653px) {
  .blog-tabs--card {
    width: 300px;
  }
  .blog-tabs--card .blog-card__title {
    font-size: var(--font-size-22);
    margin-bottom: 0.6rem;
  }
  .blog-card__text {
    font-size: var(--font-size-14);
    line-height: 19px;
  }
  .blog-tabs--card .blog-card__info {
    font-size: var(--font-size-12);
    margin-bottom: 0.4rem;
  }
}
/* latest blogs end */
@media screen and (min-width: 576px) {
  .blog-tabs .blog-tabs__btn {
    padding: 0.2rem 1rem;
    font-size: var(--font-size-14);
  }
  .blog-must .must-card .must-card__data {
    font-size: 9px;
  }
  .blog-multi .blog-multi__header,
  .blog-must .blog-must__header {
    font-size: var(--font-size-28-responsive);
  }
}

@media screen and (min-width: 768px) {
  .blog-landing {
    min-height: 45vh;
  }
  .blog-landing__title {
    font-size: var(--font-size-40-responsive);
  }
  .blog-tabs .blog-tabs__btn {
    padding: 0.3rem 1.2rem;
    font-size: var(--font-size-16);
  }
  .blog-must .must-card__cate {
    font-size: 11px;
  }
  .blog-must .must-card .must-card__title {
    font-size: var(--font-size-18-responsive);
  }
  .blog-must .must-card .must-card__text {
    font-size: 13px;
    line-height: 17px;
  }
  .blog-must .must-card .must-card__data {
    font-size: var(--font-size-10);
  }
  .blog-multi .blog-multi__header,
  .blog-must .blog-must__header {
    font-size: var(--font-size-32-responsive);
  }
  .blog-multi .blog-multi__header,
  .blog-must .blog-must__header {
    font-size: var(--font-size-32-responsive);
  }
  .blog-multi-row {
    height: 150vh;
  }
}

@media screen and (min-width: 992px) {
  .blog-landing {
    min-height: 55vh;
  }
  .blog-card-warapper {
    height: 476px;
  }
  .blog-tabs .blog-card__img:hover {
    aspect-ratio: 16/13;
  }
  .blog-landing__title {
    font-size: var(--font-size-48-responsive);
  }
  .blog-latest-card {
    padding: 20px 0;
  }
  .blog-latest__title {
    font-size: var(--font-size-24);
  }
  .latest-card__img {
    width: 70px;
    height: 70px;
  }
  .latest-card__cate {
    font-size: var(--font-size-12);
    margin-bottom: 0.2rem;
  }

  .blog-must .must-card__cate {
    font-size: var(--font-size-12);
  }
  .blog-must .must-card .must-card__title {
    font-size: var(--font-size-20-responsive);
  }
  .blog-must .must-card .must-card__data {
    font-size: 11px;
  }
  .blog-multi .blog-multi__header,
  .blog-must .blog-must__header {
    font-size: var(--font-size-35-responsive);
  }
}

@media screen and (min-width: 1200px) {
  .latest-card__title {
    font-size: var(--font-size-18);
  }
  .blog-must .must-card__cate {
    font-size: 13px;
  }
  .blog-must .must-card .must-card__title {
    font-size: var(--font-size-24-responsive);
  }
  .blog-must .must-card .must-card__text {
    font-size: var(--font-size-16);
    line-height: 20px;
  }
  .blog-must .must-card .must-card__data {
    font-size: var(--font-size-12);
  }
  .blog-multi .blog-multi__header,
  .blog-must .blog-must__header {
    font-size: var(--font-size-40-responsive);
  }
}