.Blogs {
}

/* .Blogs .Blogs_banner {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("<?php echo BASE_URL; ?>assets/images/faq/faq-banner.png") no-repeat center/cover;
  color: #fff;
} */

.Blogs .Blogs_banner .blogs_title {
  font-size: 45px;
  font-weight: 800;
}

.Blogs .blogs_card_div {
  margin-top: 50px;
}

.Blogs .blogs_card_div .blog_card {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 0.5px solid #707070;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  cursor: pointer;
}

.Blogs .blogs_card_div .blog_card .blog_img_div {
  height: 300px;
  overflow: hidden;
}

.Blogs .blogs_card_div .blog_card .blog_img_div .blog_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.Blogs .blogs_card_div .blog_card .blog_content_div {
  padding: 10px;
}

.Blogs .blogs_card_div .blog_card .blog_content {
}

.Blogs .blogs_card_div .blog_card .blog_content .blog_title {
  font-size: 20px;
  font-weight: 800;
  font-family: Calibri;
  color: #202020;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Blogs .blogs_card_div .blog_card .blog_content .blog_date {
  font-size: 12px;
  font-weight: 500;
  color: #707070;
}

.Blogs .blogs_card_div .blog_card .blog_content .blog_desc {
  font-size: 15px;
  font-weight: 400;
  color: #202020;

  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Blogs .blogs_card_div .blog_card .reading {
  font-size: 12px;
  font-weight: 500;
  color: #153b89;
  text-align: right;
}

.Blogs .blogs_card_div .pagination_div {
  margin-top: 40px;
}

.Blogs .blogs_card_div a {
  text-decoration: unset !important;
}

/* ========= Hover State =========== */

.Blogs .blogs_card_div .blog_card:hover {
  background: #fff4ef 0% 0% no-repeat padding-box;
  border: 0.5px solid #f16625;
}

.Blogs .blogs_card_div .blog_card:hover .blog_img {
  transform: scale(1.1);
}

.Blogs .blogs_card_div .blog_card:hover .reading {
  color: #f16625;
}





.pagination_container {
    display: flex;
    justify-content: end;
    align-items: end;
    padding: 40px 0;
}

.pagination_custom {
    display: flex;
    gap: 5px;
    list-style: none;
    padding: 0;
}

.pagination_custom li {
    width: 30px;
    height: 30px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    color: #555;
    background: #fff;
    transition: 0.3s;
}

/* Active Page */
.pagination_custom .active {
    background: #1f3c88;
    color: #fff;
    border: 1px solid #1f3c88;
}

/* Disabled Button */
.pagination_custom .disabled {
    color: #bbb;
    cursor: not-allowed;
}

/* Hover */
.pagination_custom li:hover:not(.active):not(.disabled) {
    background: #eee;
}




/* ===================== Media Queries ==================== */

@media (min-width: 0px) and (max-width: 574px) {
  .Blogs {
  }

  .Blogs .Blogs_banner {
    height: 200px;
  }

  .Blogs .Blogs_banner .blogs_title {
    font-size: 30px;
  }

  .Blogs .blogs_card_div .blog_card .blog_img_div {
    height: 200px;
  }

  .Blogs .blogs_card_div .blog_card .blog_content .blog_title {
    font-size: 18px;
  }
}

@media (min-width: 575px) and (max-width: 991px) {
  .Blogs {
  }

  .Blogs .Blogs_banner {
    height: 245px;
  }

  .Blogs .Blogs_banner .blogs_title {
    font-size: 35px;
  }

  .Blogs .blogs_card_div .blog_card .blog_img_div {
    height: 200px;
  }

  .Blogs .blogs_card_div .blog_card .blog_content .blog_title {
    font-size: 18px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .Blogs .blogs_card_div .blog_card .blog_img_div {
    height: 220px;
  }

  .Blogs .blogs_card_div .blog_card .blog_content .blog_title {
    font-size: 18px;
  }
}
