:root {
  --bg-btn-blog: #2f8f1f;
  --color-btn-blog: #f4c542; }

.greenweave-about-us-blog .button {
  color: var(--color-btn-blog);
  background-color: var(--bg-btn-blog); }

.greenweave-about-us-blog .article-loop a {
  color: inherit; }

.greenweave-about-us-blog .article-loop .article-image {
  border-radius: 16px;
  overflow: hidden; }
  .greenweave-about-us-blog .article-loop .article-image img {
    transition: all 0.3s; }

.greenweave-about-us-blog .article-loop .article-detail {
  margin-top: 20px; }
  .greenweave-about-us-blog .article-loop .article-detail .article-author {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px; }
  .greenweave-about-us-blog .article-loop .article-detail .article-title .post-title {
    font-size: 24px;
    margin-bottom: 15px; }
  .greenweave-about-us-blog .article-loop .article-detail .article-post-meta {
    font-size: 14px;
    opacity: 0.6; }
    .greenweave-about-us-blog .article-loop .article-detail .article-post-meta a {
      opacity: 0.6; }
    .greenweave-about-us-blog .article-loop .article-detail .article-post-meta .comment {
      position: relative;
      padding-left: 25px; }
      .greenweave-about-us-blog .article-loop .article-detail .article-post-meta .comment:before {
        content: '\f111';
        font-family: "FontAwesome";
        font-size: 5px;
        position: absolute;
        top: 5px;
        left: 8px;
        color: rgba(17, 25, 21, 0.3); }

.greenweave-about-us-blog .article-loop:hover .article-image img {
  transform: scale(1.1); }

.greenweave-about-us-blog .btn-more {
  margin-top: 40px;
  text-align: center; }

.greenweave-about-us-blog .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 30px; }
  .greenweave-about-us-blog .swiper:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
    flex: 0 0 25%; }

.greenweave-about-us-blog .swiper .swiper-pagination {
  position: relative;
  margin-top: 30px;
  text-align: center; }
  .greenweave-about-us-blog .swiper .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: currentcolor;
    opacity: 0.3; }
    .greenweave-about-us-blog .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
      opacity: 1; }

@media (max-width: 767px) {
  .greenweave-about-us-blog .article-loop .article-detail .article-title .post-title {
    font-size: 20px; } }