/*-----------------HOME PAGE STYLES---------------------*/

/*-----HERO SLIDING POSTS STARTS HERE-----------*/
.recent-posts-slide {
  height: 80vh;
  margin: 0 auto;
  max-width: 100% !important;
  overflow: hidden;
  position: relative;
  padding-top: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1650px) {
  .recent-posts-slide {
    height: 60vh;
    padding-top: 0px;
  }
}
@media (max-width: 1024px) {
  .recent-posts-slide {
    padding-top: 50px;
  }
}
@media (min-width: 1024px) {
  .recent-posts-slide {
    padding-top: 60px;
  }
}

/* Single post card */
.recent-posts-slide .swiper-slide {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
  gap: 2rem;
}

.recent-posts-slide .swiper-slide .swiper-content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.recent-posts-slide .swiper-slide .swiper-content .swiper-content__heading h2,
.recent-posts-slide
  .swiper-slide
  .swiper-content
  .swiper-content__heading
  .excerpt,
.recent-posts-slide .swiper-slide .swiper-content .post-meta {
  width: 90%;
  max-width: 80%;
  margin: 0 auto;
  font-family: var(--wp--preset--font-family--body) !important;
  font-weight: 400;
  color: var(--wp--preset--color--hwb-white);
  position: relative;
  text-align: center;
}

.recent-posts-slide .swiper-slide .swiper-content__heading h2 {
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 500 !important;
  margin-bottom: 1rem;
}

.recent-posts-slide .swiper-slide .swiper-content__heading h2 a {
  transition: color 0.35s ease-in-out;
}

.recent-posts-slide .swiper-slide:hover .swiper-content__heading h2 a,
.recent-posts-slide .swiper-slide:focus .swiper-content__heading h2 a {
  opacity: 0.6;
}

.recent-posts-slide .swiper-slide .swiper-content__heading .excerpt {
  width: 75% !important;
  max-width: 60% !important;
}

@media (max-width: 1024px) {
  .recent-posts-slide .swiper-slide .swiper-content__heading h2 {
    font-size: 2rem !important;
  }
  .recent-posts-slide .swiper-slide .swiper-content .swiper-content__heading h2,
  .recent-posts-slide
    .swiper-slide
    .swiper-content
    .swiper-content__heading
    .excerpt,
  .recent-posts-slide .swiper-slide .swiper-content .post-meta {
    width: 95% !important;
    max-width: 100% !important;
  }
}

.recent-posts-slide .swiper-slide .swiper-content .post-meta {
  position: absolute;
  top: 0;
  text-align: center;
}

.recent-posts-slide .navigator {
  position: absolute;
  top: 50%;
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.recent-posts-slide .swiper-button-next,
.recent-posts-slide .swiper-button-prev {
  margin: 0 2rem;
  padding: 4px;
  height: 50px;
  width: 50px;
  transition: background-color 0.35s ease-in-out;
}

@media (width <= 767px) {
  .recent-posts-slide .swiper-button-next,
  .recent-posts-slide .swiper-button-prev,
  .recent-posts-slide .swiper-button-next::after,
  .recent-posts-slide .swiper-button-prev::after {
    height: 30px !important;
    width: 30px !important;
    font-size: 1rem;
  }
  .recent-posts-slide .swiper-button-prev {
    left: -25px !important;
  }
  .recent-posts-slide .swiper-button-next {
    right: -25px !important;
  }
}

.recent-posts-slide .swiper-button-next::after,
.recent-posts-slide .swiper-button-prev::after {
  background-color: var(--wp--preset--color--hwb-secondary-dark);
  color: var(--wp--preset--color--hwb-white);
  border-radius: 50%;
  padding: 4px;
  height: 50px;
  width: 50px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
}

.recent-posts-slide:hover .swiper-button-next::after,
.recent-posts-slide:hover .swiper-button-prev::after {
  opacity: 1;
  transition: background-color 0.35s ease-in-out;
}

.recent-posts-slide .swiper-button-next:hover::after,
.recent-posts-slide .swiper-button-prev:hover::after {
  color: var(--wp--preset--color--hwb-dark);
  background-color: var(--wp--preset--color--hwb-white);
}

/*--------------- POST CATEGORY ONE--------------------*/
.category-one .wp-block-columns .right .loop .wp-block-columns .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between !important;
}

@media (width <= 840px) {
  .category-one .wp-block-columns .right .loop {
    margin-top: 2rem;
  }
  .category-one .wp-block-columns .right .loop .loop-col .left {
    flex-basis: 30% !important;
  }

  .category-one .wp-block-columns .right .loop .loop-col .right {
    flex-basis: 70% !important;
  }

  .category-one
    .wp-block-columns
    .right
    .loop
    .loop-col
    .right
    .wp-block-post-title {
    font-size: 1.25rem !important;
  }
}

/*---------------------- POST CATEGORY TWO ----------------*/
.category-two
  .loop
  .wp-block-cover
  .wp-block-cover__inner-container
  .title-row {
  min-height: 400px !important;

  color: var(--wp--preset--color--hwb-white);
}

@media screen and (max-width: 1024px) {
  .category-two .loop .wp-block-cover {
    min-height: 340px;
  }
  .category-two .loop .wp-block-cover .title-row {
    min-height: 320px;
  }
  .category-two .loop .wp-block-cover .wp-block-cover__inner-container h3 {
    font-size: 1.675rem !important;
  }
}

.category-two .loop .wp-block-cover .title-row .wp-block-post-date,
.category-two .loop .wp-block-cover .title-row .wp-block-post-author-name {
  color: var(--wp--preset--color--hwb-secondary-white) !important;
}

/*------------------ POST CATEGORY THREE -----------------*/
.category-three .top-loop {
  position: relative;
}
.category-three .top-loop .wp-block-cover {
  align-items: flex-start !important;
}

.category-three .top-loop .wp-block-cover .wp-block-post-excerpt {
  max-width: 50%;
}

@media (width <= 840px) {
  .category-three .top-loop .wp-block-cover {
    min-height: 360px !important;
  }
  .category-three .top-loop .wp-block-cover .wp-block-post-excerpt {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .category-three .bottom-loop {
    background-color: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(3px);
    position: relative;
    margin-top: -190px;
    padding: 1rem 1rem 1rem 1rem;
    z-index: 10;
    color: var(--wp--preset--color--hwb-white);
  }
}

@media (max-width: 1024px) {
  .category-three .top-loop .wp-block-cover {
    height: 65vh;
  }
  .category-three .bottom-loop {
    margin-top: 1rem;
  }

  .category-three .bottom-loop .wp-block-columns .right .wp-block-post-title {
    font-size: 1.25rem !important;
  }

  .category-three
    .bottom-loop
    .wp-block-columns
    .right
    .wp-block-post-author-name,
  .category-three .bottom-loop .wp-block-columns .right .wp-block-post-date {
    color: var(--wp--preset--color--hwb-dark) !important;
  }
}

.category-three .bottom-loop .wp-block-columns .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between !important;
}

.category-three .bottom-loop .wp-block-post-date,
.category-three .bottom-loop .wp-block-post-author-name {
  color: var(--wp--preset--color--hwb-white) !important;
}

/*-------------------------- POST CATEGORY FOUR -----------------------*/
.category-four
  .wp-block-columns
  .left
  .wp-block-cover
  .wp-block-cover__inner-container {
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
}

.category-four
  .wp-block-columns
  .left
  .wp-block-cover__inner-container
  .wp-block-post-date,
.category-four
  .wp-block-columns
  .left
  .wp-block-cover__inner-container
  .wp-block-post-author-name {
  color: var(--wp--preset--color--hwb-white) !important;
}

@media (max-width: 840px) {
  .category-four .left .wp-block-cover {
    min-height: 360px !important;
  }
  .category-four .left .wp-block-cover__inner-container {
    height: 360px !important;
  }
  .category-four .wp-block-columns .right .wp-block-post-title {
    font-size: 1.25rem !important;
  }
}
