.journalControls {

  width: 100%;

  padding-block: 25px;

  background-color: #f9f6ed;

}



.journalControlsInner {

  display: flex;

  gap: 20px;

  align-items: center;

  padding: 25px 20px;

  border-radius: 5px;

  background-color: #142927;

}



.controlSelect select {

  background-color: transparent;

  border: 1px solid #ffffff;

  color: #fff;

  padding: 15px 15px;

  border-radius: 6px;

  min-width: 294px;

  font-family: var(--font-mont);

  letter-spacing: var(--ls-mont);

  font-weight: 400;

  font-size: 14px;

  line-height: 100%;

  text-transform: capitalize;

  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg width='13' height='7' viewBox='0 0 13 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 0.5L6.5 6.5L0.5 0.5' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 15px center;

  position: relative;

}



.controlSelect select option {

  color: #000;

  position: absolute;

  z-index: 11;

}



.journalControls .filterItem {

  display: flex;

  align-items: center;

  gap: 20px;

  width: 100%;

}



.journalControls .filterItem .label {

  font-family: var(--font-formaDJR);

  letter-spacing: var(--ls-formaDJR);

  font-weight: 500;

  font-style: Medium;

  font-size: 18px;

  line-height: 20px;

  text-transform: capitalize;

  color: #f0e8df59;

}



.journalControls .custom-select {

  position: relative;

  width: 100%;

  font-size: 14px;

  user-select: none;

}



.journalControls .customSelect .custom-select .selected {

  background-color: transparent;

  color: #fff;

  padding: 11px 15px;

  border-radius: 5px;

  cursor: pointer;

  position: relative;

  border: 1px solid #ffffff;

  font-family: var(--font-mont);

  letter-spacing: var(--ls-mont);

  font-weight: 300;

  font-style: Light;

  font-size: 14px;

  line-height: 16px;

  text-transform: capitalize;

}



.journalControls .customSelect .custom-select .icon {

  position: absolute;

  top: 50%;

  right: 15px;

  transform: translateY(-50%);

  transition: transform 0.3s ease;

}



.journalControls .customSelect .custom-select .options {

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  background-color: #1f2a34;

  border-radius: 8px;

  margin-top: 4px !important;

  display: none;

  max-height: 200px;

  overflow-y: auto;

  z-index: 10;

}



.journalControls .customSelect .custom-select .option {

  padding: 10px 12px;

  color: #fff;

  cursor: pointer;

}



.journalControls .customSelect .custom-select .option:hover {

  background-color: #2a3a48;

}



.journalControls .customSelect .custom-select.open .options {

  display: block;

}



.journalControls .customSelect .custom-select.open .icon {

  transform: translateY(-50%) rotate(180deg);

}



.controlSearch {

  margin-left: auto !important;

  display: flex;

  align-items: center;

  border: 1px solid #b8e460;

  border-radius: 5px;

  padding: 0 10px;

}



.controlSearch input {

  background: transparent;

  border: none;

  outline: none;

  color: #fff;

  padding: 11px 15px;

  border-radius: 6px;

  min-width: 294px;

  font-family: var(--font-mont);

  letter-spacing: var(--ls-mont);

  font-weight: 400;

  font-size: 14px;

  line-height: 16px;

  text-transform: capitalize;

  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.33333' cy='7.33333' r='5.33333' stroke='%23B8E460' stroke-width='1.5'/%3E%3Cpath d='M11.1 11.1L14 14' stroke='%23B8E460' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 15px center;

  background-size: 16px 16px;

}



.journal {

  width: 100%;

  height: 100%;

  background-color: #f4efe7;

  padding-block: 50px;

}



.journal .journalInfo {

  display: flex;

  gap: 50px;

  height: 100%;

}



.journal .journalInfo .leftImg {

  width: 100%;

  max-width: 976px;

  /* height: 100%; */

  object-fit: cover;

}



.journal .journalInfo .rightInfo {

  width: 100%;

  max-width: 314px;

}



.journal .journalInfo .rightInfo img {

  width: 100%;

  max-width: 314px;

  min-height: 376px;

  object-fit: cover;

}



.journal .journalInfo .rightInfo .title {

  font-family: var(--font-moisette);

  font-weight: 500;

  font-size: 26px;

  line-height: 36px;

  color: #142927;

  padding-top: 25px;

  padding-bottom: 10px;

  color: #142927;

}



.journal .journalInfo .rightInfo .title .span {

  font-family: var(--font-formaDJR);

  letter-spacing: var(--ls-formaDJR);

  font-weight: 500;

  font-style: Medium;

  font-size: 26px;

  line-height: 36px;

  margin: 0;

}



.journal .journalInfo .rightInfo .description {

  font-family: var(--font-mont);

  letter-spacing: var(--ls-mont);

  font-weight: 300;

  font-size: 16px;

  line-height: 26px;

  color: #142927;

}



.journal .journalInfo .rightInfo .link {

  font-family: var(--font-formaDJR);

  letter-spacing: var(--ls-formaDJR);

  font-weight: 400;

  font-size: 16px;

  line-height: 36px;

  color: #142927;

  display: flex;

  align-items: center;

  gap: 10px;

  height: 0px;

  padding-top: 36px;

}



.journal .journalInfo .rightInfo .link img {

  width: 10px;

  height: 10px;

  object-fit: contain;

}



.articlesSection {

  width: 100%;

  background-color: #f9f6ed;

  padding-bottom: 90px;

}



.articlesSection .sort {

  text-align: right;

  padding-top: 70px;

  padding-bottom: 50px;

}



.articlesSection .sort select {

  background-color: transparent;

  border: 1px solid #ffffff;

  color: #fff;

  padding: 15px 15px;

  border-radius: 6px;

  min-width: 294px;

  font-family: var(--font-mont);

  letter-spacing: var(--ls-mont);

  font-weight: 300;

  font-style: Light;

  font-size: 14px;

  line-height: 100%;

  text-transform: capitalize;

  color: #142927;

  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg width='13' height='7' viewBox='0 0 13 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 0.5L6.5 6.5L0.5 0.5' stroke='%23142927' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 15px center;

  position: relative;

  border: 1px solid #142927;

}



.articlesSection .articlesGrid {

  border-top: 1px solid #b8e460;

  display: flex;

  flex-wrap: wrap;

  column-gap: 40px;

  padding-top: 50px;

}



.articlesSection .articlesGrid .articleCard {

  width: 100%;

  max-width: 420px;

  padding-bottom: 70px;

}



.articlesSection .articlesGrid .articleCard img {

  width: 100%;

  max-width: 420px;

  height: 484px;

  object-fit: cover;

}



.articlesSection .articlesGrid .articleCard .content .title {

  font-family: var(--font-moisette);

  font-weight: 500;

  font-size: 26px;

  line-height: 36px;

  color: #142927;

  margin: 0;

  padding-top: 20px;

}



.articlesSection .articlesGrid .articleCard .content .title .span {

  font-family: var(--font-formaDJR);

  letter-spacing: var(--ls-formaDJR);

  font-weight: 500;

  font-size: 26px;

  line-height: 36px;

}



.articlesSection .articlesGrid .articleCard .content .description {

  font-family: var(--font-mont);

  letter-spacing: var(--ls-mont);

  font-weight: 300;

  font-size: 16px;

  line-height: 26px;

  color: #142927;

  margin: 0;

  padding-top: 3px;

}



.articlesSection .articlesGrid .articleCard .content .dateInfo {

  display: flex;

  padding-top: 10px;

  gap: 10px;

}



.articlesSection .articlesGrid .articleCard .content .dateInfo .date {

  font-family: var(--font-mont);

  letter-spacing: var(--ls-mont);

  font-weight: 700;

  font-size: 12px;

  line-height: 26px;

  text-transform: uppercase;

  color: #142927;

  position: relative;

}



.articlesSection .articlesGrid .articleCard .content .dateInfo .date::after {

  content: "";

  border-left: 1px solid #b8e460;

  width: 1px;

  height: 14px;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: 100%;

  margin-left: 10px;

}



.articlesSection .articlesGrid .articleCard .content .dateInfo .category {

  font-family: var(--font-mont);

  letter-spacing: var(--ls-mont);

  font-weight: 700;

  font-size: 12px;

  line-height: 26px;

  text-transform: uppercase;

  color: #142927;

  padding-left: 10px;

}



.articlesSection .articlesGrid .articleCard .content .readMore {

  font-family: var(--font-formaDJR);

  letter-spacing: var(--ls-formaDJR);

  font-weight: 400;

  font-size: 16px;

  line-height: 36px;

  color: #142927;

  display: flex;

  align-items: center;

  gap: 10px;

  height: 0px;

  padding-top: 30px;

}



.articlesSection .articlesGrid .articleCard .content .readMore img {

  width: 10px;

  height: 10px;

  object-fit: contain;

}



.postTitle {

  padding-top: 70px;

  font-family: var(--font-formaDJR);

  letter-spacing: var(--ls-formaDJR);

  font-weight: 400;

  font-size: 50px;

  line-height: 65px;

  text-align: center;

  color: #142927;

}



.postTitle .post {

  font-family: var(--font-moisette);

  font-weight: 500;

  font-size: 50px;

  line-height: 65px;

  text-align: center;

}

@media screen and (max-width: 991px) {



  .articlesSection .articlesGrid .articleCard .content .readMore {

    /* padding: 15px 0px; */
    padding-top: 35px;

  }
    .articlesSection .ajaxPagination {
      margin-top: 70px !important;
    }
  .articlesSection .articlesGrid .articleCard img {
    max-width: 100%;
    height: 415px;
    padding-top: 50px;

  }


}

@media screen and (max-width: 767.9px) {

  .articlesSection .articlesGrid .articleCard .content .title {
    padding-top: 25px;
  }

  .articlesSection .articlesGrid .articleCard .content .description {
    padding-block: 20px;
  }

  .controlSearch {

    width: 100%;

  }

  .journal {
    padding-top: 30px;
    padding-bottom: 50px;
  }


  .journal .journalInfo {

    flex-direction: column;

  }



  .journalControlsInner {

    flex-direction: column;
    padding-block: 15px;
    gap: 10px;
  }




  .journal .journalInfo .rightInfo {

    max-width: unset;

  }

  .controlSearch input {
    min-width: 100%;
  }


  .journal .journalInfo .rightInfo img {

    max-width: unset;

  }



  .mobile-carousel .owl-stage {

    display: flex;

    align-items: stretch;

  }



  .mobile-carousel-wrapper {

    margin-top: calc(-1 * var(--bs-gutter-y)) !important;

    margin-right: calc(-0.5 * var(--bs-gutter-x)) !important;

    margin-left: calc(-0.5 * var(--bs-gutter-x)) !important;

  }



  .mobile-carousel .owl-item {

    height: 100%;

  }



  .mobile-carousel .owl-item img {

    display: block;

    width: 100%;

    object-fit: cover;

    height: 100%;

    aspect-ratio: 390 / 500;

  }



  .mobile-carousel .owl-dots {

    display: flex;

    justify-content: center;

    gap: 10px;

    position: absolute;

    bottom: 15px;

    width: 100%;

  }



  .mobile-carousel .owl-dots .owl-dot {

    width: 6px;

    height: 3px;

    background-color: #b6b2b0;

    border-radius: 20px;

  }



  .mobile-carousel .owl-dots .owl-dot.active {

    width: 20px;
    background-color: #b8e460;

  }



  .journal .journalInfo {

    gap: 0;

  }



  .articlesSection .articlesGrid .articleCard {
    max-width: 100%;
    padding-bottom: 10px;

  }



}