.blogMainDiv {
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 150px;
}
.blogRightDiv {
  width: 100%;
}
.blogMainHeader {
  width: 100%;
  flex-direction: column;
  margin-top: 20px;
}
.blogMobileVisit {
  display: none;
}
.blogMainTitle {
  font-weight: 700;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0px;
  text-align: right;
  color: var(--clr1C);
}
.blogMainImg {
  width: 100%;
  height: 368px;
  border-radius: 16px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.blogContent {
  margin-top: 15px;
  gap: 15px;
}
.blogSimpleText {
  font-weight: 400;
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: justify;
  text-transform: lowercase;
  color: var(--clr5A);
}
.blogSimpleTitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: right;
  color: var(--clr31);
}
.blogGridImgDiv {
  gap: 15px;
}
.blogGridImg {
  width: 100%;
  height: auto;
  aspect-ratio: 3.2/1.8;
  border-radius: 16px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.blogMainFooter {
  flex-direction: column;
  gap: 25px;
  margin-top: 25px;
}
.blogInfoDiv {
  align-items: center;
  justify-content: center;
  gap: 15px;
  background-color: var(--clrFA);
  padding: 25px 0;
  border-radius: 12px;
}
.blogInfoText {
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #9b9999;
}
.blogInfoText:last-child {
  color: var(--orangeClr);
}
.blogInfoDivider {
  height: 100%;
  width: 1px;
  background-color: #9d9ea2;
  opacity: 0.8;
}
.blogActionDiv {
  align-items: center;
  justify-content: space-between;
}
.copyLinkBtn {
  align-items: center;
  gap: 7px;
  font-weight: 400;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: center;
  text-transform: capitalize;
  color: var(--clr65);
  padding: 7px 15px;
  transition: background-color 0.4s;
  border-radius: 8px;
}
.copyLinkBtn:hover {
  background-color: var(--blackOp08);
}
.blogShareBtn {
  background-color: var(--colorPrimiary2);
  color: var(--white);
  font-weight: 400;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: center;
  text-transform: capitalize;
  align-items: center;
  gap: 7px;
  border-radius: 12px;
  padding: 7px 15px;
  transition: box-shadow 0.4s;
}
.blogShareBtn:hover {
  box-shadow: 0 0 15px var(--blackOp45);
}
.blogLeftDiv {
  width: 100%;
}
.relativeTitle {
  font-weight: 600;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0px;
  text-align: right;
  color: var(--clr1C);
}
.blogRelativeList {
  margin-top: 20px;
  gap: 15px;
}
.blogRelativeItem {
  flex-wrap: wrap;
  gap: 15px;
  background-color: var(--clrFA);
  border-radius: 12px;
  overflow: hidden;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 3fr;
}
.blogRelativeImgLink {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1.1;
}
.blogRelativeImg {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.blogRelativeInfoDiv {
  width: 100%;
  padding: 5px 0 5px 20px;
  height: fit-content;
  gap: 7px;
}
.blogRelativeTitle {
  font-weight: 500;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: right;
  text-transform: capitalize;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--clr31);
}
.blogRelativeText {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 400;
  font-size: 12px;
  line-height: 180%;
  letter-spacing: 0%;
  text-align: right;
  color: var(--grey72);
}
.excerptBlogDiv,
.tagsDiv {
  margin-top: 80px;
  gap: 20px;
}
.excerptTitle,
.tagsTitle {
  font-weight: 600;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0px;
  text-align: right;
  vertical-align: middle;
  color: var(--clr1C);
}
.excerptList {
  gap: 15px;
}
.excerptItem {
  padding: 30px 20px;
  background-color: var(--clrFA);
  border-radius: 16px;
  gap: 10px;
}
.excerptTitleDiv {
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.excerptTitleText {
  align-items: center;
  gap: 7px;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: var(--clr5A);
}
.excerptTitleLink {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: right;
  color: var(--clr31);
  margin-top: 12px;
}
.excerptBody {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 400;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: justify;
  text-transform: capitalize;
  color: var(--grey72);
}
.excerptSeeMore {
  align-items: center;
  gap: 7px;
  font-weight: 400;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: center;
  text-transform: capitalize;
  color: var(--clr31);
  margin-top: 5px;
  transition: gap 0.4s;
}
.excerptSeeMore:hover {
  gap: 12px;
}
.tagsList {
  flex-wrap: wrap;
  gap: 12px;
}
.tagItem {
  padding: 7px 15px;
  font-weight: 400;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: right;
  text-transform: capitalize;
  border-radius: 8px;
  border: 1px solid #ddd;
  color: var(--clr1C);
  transition: background-color 0.3s;
}
.tagItem:hover {
  background-color: var(--blackOp08);
}
@media screen and (min-width: 768px) {
  .blogGridImgDiv {
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
  }
}
@media screen and (min-width: 968px) {
  .blogMainDiv {
    gap: 30px;
  }
  .blogRightDiv {
    width: calc(100% / 3 * 2 - 15px);
  }
  .blogLeftDiv {
    width: calc(100% / 3 - 15px);
    height: fit-content;
  }
  .blogMainImg {
    height: 352px;
    border-radius: 16px;
  }
  .blogMainHeader {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-top: 30px;
  }
  .blogMainTitle {
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    letter-spacing: 0px;
    text-align: right;
    width: 100%;
  }
  .blogMobileVisit {
    display: block;
    font-weight: 400;
    font-size: 18px;
    line-height: 180%;
    letter-spacing: 0px;
    color: var(--orangeClr);
    white-space: nowrap;
  }
  .blogSimpleText {
    font-weight: 400;
    font-size: 16px;
    line-height: 180%;
    letter-spacing: 0px;
    text-align: justify;
  }
  .blogSimpleTitle {
    font-weight: 600;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: 0px;
    text-align: right;
  }
  .blogMainFooter {
    padding: 25px;
    background-color: var(--clrFA);
    border-radius: 24px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .blogInfoDiv {
    padding: 0;
  }
  .blogInfoText:last-child,
  .secondDivider {
    display: none;
  }
  .blogInfoText {
    font-weight: 400;
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0px;
    text-align: right;
  }
  .blogInfoDivider {
    height: 15px;
  }
  .blogActionDiv {
    gap: 15px;
  }
  .excerptTitleLink {
    font-weight: 500;
    font-size: 18px;
    line-height: 180%;
    letter-spacing: 0px;
    text-align: right;
  }
}
/* commentsSection */
.commentsSection {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  margin: 80px auto 0;
}
.latestBlogsTitle {
  width: calc(100% - 55px);
  font-weight: 600;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0px;
  text-align: right;
  color: var(--clr1C);
}
.latestBlogsTitle span {
  display: none;
}
.showFiltersBtn {
  height: 40px;
  width: 40px;
  border-radius: 8px;
  transition: box-shadow 0.3s;
  border: 1px solid var(--grey72);
}
.showFiltersBtn:hover {
  box-shadow: 0 0 5px var(--blackOp08);
}
.filterCloserBtn {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  background-color: #000;
  z-index: 980;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.filterCloserBtn.showFilterCloseBtn {
  opacity: 0.5;
  pointer-events: unset;
}
.filtersMainDiv {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--white);
  border-radius: 16px 16px 0 0;
  padding: 30px 24px;
  z-index: 982;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s, opacity 0s 0.3s;
  transform: translateY(100%);
}
.filtersMainDiv.showFiltersMainDiv {
  transform: translateY(0);
  opacity: 1;
  pointer-events: unset;
  transition: transform 0.3s;
}
.filtersHeaderDiv {
  border-bottom: 1px solid #ddd;
  padding-bottom: 16px;
}
.filtersTitleText {
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: right;
  color: var(--clr1C);
}
.filtersCloseBtn {
  height: 25px;
  width: 25px;
}
.commentsContent {
  width: 100%;
}
@media screen and (min-width: 968px) {
  .latestBlogsSection {
    margin-top: 100px;
    align-items: flex-start;
  }
  .latestBlogsTitle {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: right;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .latestBlogsTitle span {
    display: block;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: right;
    color: var(--clr1C);
  }
  .showFiltersBtn,
  .filterCloserBtn,
  .filtersHeaderDiv {
    display: none;
  }
  .filtersMainDiv {
    position: unset;
    left: unset;
    bottom: unset;
    z-index: unset;
    width: 35%;
    max-width: 380px;
    opacity: 1;
    pointer-events: unset;
    transform: none;
    margin: 10px auto 0 0;
    border-radius: 16px;
    padding: 20px 15px;
  }
}
/* insertComment */
.cmForm {
  margin-top: 100px;
  gap: 15px;
}
.cmFromTitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 180%;
  letter-spacing: 0%;
  color: var(--clr31);
}
.cmFormGrid {
  gap: 15px;
}
.cmInput {
  height: 48px;
  border-radius: 10px;
  padding: 0 16px;
  background-color: transparent;
  outline: none;
  transition: border 0.4s;
  font-weight: 400;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: right;
  text-transform: capitalize;
  color: var(--clrBA);
  background-color: var(--clrFA);
  border: none;
  width: 100%;
}
.cmTextArea {
  padding: 16px;
  border-radius: 10px;
  background-color: transparent;
  resize: none;
  height: 150px;
  outline: none;
  transition: border 0.4s;
  font-weight: 400;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: right;
  text-transform: capitalize;
  color: #9b9999;
  width: 100%;
  background-color: var(--clrFA);
  border: none;
  width: 100%;
}
.cmInput::placeholder,
.cmTextArea::placeholder {
  color: #9d9ea2;
}
.cmInput:focus,
.cmTextArea:focus {
  border: 1px solid var(--clr65);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
.submitCmBtn {
  height: 48px;
  border-radius: 10px;
  padding: 0 25px;
  background-color: var(--colorPrimiary2);
  color: var(--white);
  font-weight: 400;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  width: 100%;
}
.textCounter {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #9b9999;
  pointer-events: none;
}
@media screen and (min-width: 968px) {
  .cmFromTitle {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
  }
  .cmFormGrid {
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
  }
  .cmInput {
    font-weight: 400;
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0px;
    height: 64px;
  }
  .cmTextArea {
    font-weight: 400;
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0px;
    text-align: right;
    text-transform: capitalize;
    height: 250px;
  }
  .textCounter {
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
  }
  .submitCmBtn {
    font-weight: 400;
    font-size: 16px;
    line-height: 180%;
    letter-spacing: 0px;
    max-width: 250px;
    margin-right: auto;
  }
}
/* latestBlog */
.latestBlog {
  margin: 120px auto 150px;
  position: relative;
}
.latestBlogTitle {
  font-weight: 600;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0px;
  text-align: right;
  color: var(--clr1C);
}
.latestBlogBody {
  font-weight: 400;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: right;
  color: var(--grey72);
  margin-top: 5px;
}
.latestBlogGrid {
  gap: 20px;
  margin-top: 20px;
}
.latestBlogImg {
  width: 100%;
  height: auto;
  aspect-ratio: 2/1.2;
  border-radius: 12px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.latestBlogItemHeader {
  margin-top: 15px;
  justify-content: space-between;
  align-items: center;
}
.latestBlogName {
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: right;
  color: #454342;
  max-width: 70%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.latestBlogVisit {
  font-weight: 600;
  font-size: 12px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: right;
  color: #fca120;
}
.latestBlogDesc {
  font-weight: 400;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: right;
  color: var(--grey72);
  margin-top: 5px;
}
.blogItemInfoDiv {
  margin-top: 10px;
  gap: 4px;
}
.blogItemAuthorName {
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #9b9999;
}
.blogItemDivider {
  height: 100%;
  width: 1px;
  background-color: #9d9ea2;
}
.blogItemDate {
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: right;
  color: #aaa8a8;
}
.blogItemTagList {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}
.blogTagItem {
  font-weight: 500;
  font-size: 10px;
  line-height: 180%;
  letter-spacing: 0px;
  text-align: right;
  color: var(--grey72);
  padding: 4px 16px;
  background-color: var(--neutral);
  border-radius: 6px;
}
.latestBlogSeeMoreLink {
  height: 49px;
  background-color: var(--colorPrimiary2);
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  color: var(--white);
  width: 70%;
  margin: 40px auto 0;
  max-width: 250px;
}
.latestBlogSeeMoreLink svg {
  display: none;
}
@media screen and (min-width: 649px) {
  .latestBlogGrid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 968px) {
  .latestBlogGrid {
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 30px;
  }
  .latestBlogTitle {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    width: 90%;
  }
  .latestBlogBody {
    font-weight: 400;
    font-size: 18px;
    line-height: 180%;
    letter-spacing: 0px;
    width: 90%;
  }
  .latestBlogSeeMoreLink {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 22px;
    width: fit-content;
    background-color: transparent;
    color: #31302f;
    gap: 5px;
  }
  .latestBlogSeeMoreLink svg {
    display: block;
    color: var(--colorPrimiary2);
    transform: translateY(-2px);
  }
}
@media screen and (min-width: 1150px) {
  .latestBlogName {
    font-weight: 600;
    font-size: 18px;
    line-height: 180%;
  }
  .latestBlogVisit {
    font-weight: 600;
    font-size: 12px;
    line-height: 180%;
  }
  .latestBlogDesc {
    font-weight: 400;
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0px;
  }
  .blogItemAuthorName {
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
  }
  .blogItemDate {
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
  }
  .blogTagItem {
    font-weight: 500;
    font-size: 12px;
    line-height: 180%;
  }
}
@media screen and (min-width: 1350px) {
  .latestBlogGrid {
    margin-top: 40px;
  }
}