.blog-page {
  --blog-primary-color: #4361ee;
  --blog-secondary-color: #3a0ca3;
  --blog-dark-color: #101828;
  --blog-text-color: #667085;
  --blog-border-color: rgba(16, 24, 40, 0.08);
  --blog-soft-bg: #f8faff;

  position: relative;
  z-index: 1;
  background: #ffffff;
}


/* =====================================================
   BLOG CARD
===================================================== */

.blog-page .blog-card {
  border-radius: 18px !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;

  height: auto !important;
  min-height: 100% !important;

  background: #ffffff !important;

  position: relative !important;
  z-index: 2 !important;

  border: 1px solid var(--blog-border-color) !important;

  box-shadow:
    0 10px 30px rgba(16, 24, 40, 0.07) !important;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease !important;
}


.blog-page .blog-card::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: 18px;

  pointer-events: none;

  border: 1px solid transparent;

  background:
    linear-gradient(
      135deg,
      rgba(67, 97, 238, 0.18),
      rgba(58, 12, 163, 0.12),
      rgba(255, 255, 255, 0)
    ) border-box;

  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0;

  transition:
    opacity 0.28s ease;
}


/* Hover only on real mouse/desktop */

@media (hover: hover) and (pointer: fine) {

  .blog-page .blog-card:hover {
    transform: translateY(-6px) !important;

    border-color:
      rgba(67, 97, 238, 0.18) !important;

    box-shadow:
      0 20px 45px rgba(16, 24, 40, 0.12) !important;
  }

  .blog-page .blog-card:hover::after {
    opacity: 1;
  }
}


/* =====================================================
   BLOG IMAGE
   NO CROP
   NO ZOOM
===================================================== */

.blog-page .blog-image-link {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  text-decoration: none !important;

  overflow: hidden !important;

  background: #f2f4f7 !important;
}


.blog-page .blog-card-img,
.blog-page .no-img-zoom,
.blog-page img.no-img-zoom,
.blog-page .card-img-top.blog-card-img {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: none !important;

  aspect-ratio: auto !important;

  object-fit: contain !important;
  object-position: center !important;

  transform: none !important;
  scale: 1 !important;
  zoom: 1 !important;

  filter: none !important;

  animation: none !important;
  transition: none !important;

  will-change: auto !important;
}


/* Disable image zoom everywhere */

.blog-page .blog-card:hover .blog-card-img,
.blog-page .blog-card:hover img,
.blog-page .card:hover .card-img-top,
.blog-page .card:hover img,
.blog-page .blog-image-link:hover img,
.blog-page .blog-image-link:active img,
.blog-page .blog-image-link:focus img,
.blog-page a:hover img.blog-card-img,
.blog-page img.blog-card-img:hover,
.blog-page img.blog-card-img:active,
.blog-page img.blog-card-img:focus,
.blog-page img.no-img-zoom:hover,
.blog-page img.no-img-zoom:active,
.blog-page img.no-img-zoom:focus,
.blog-page .no-img-zoom:hover {
  transform: none !important;

  scale: 1 !important;
  zoom: 1 !important;

  filter: none !important;

  animation: none !important;
  transition: none !important;
}


/* =====================================================
   BLOG CARD BODY
===================================================== */

.blog-page .blog-card-body {
  display: flex !important;

  flex-direction: column !important;

  flex: 1 1 auto !important;

  padding: 1.25rem !important;

  gap: 10px !important;

  min-height: 300px !important;

  position: relative !important;

  overflow: visible !important;
}


/* =====================================================
   BLOG DATE
===================================================== */

.blog-page .blog-date {
  display: inline-flex !important;

  align-items: center !important;

  width: fit-content !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  color: #667085 !important;

  margin-bottom: 2px !important;

  padding: 5px 9px !important;

  border-radius: 30px !important;

  background: #f8faff !important;

  border:
    1px solid rgba(67, 97, 238, 0.08) !important;
}


/* =====================================================
   BLOG TITLE
===================================================== */

.blog-page .blog-title {
  font-size: 17px !important;

  font-weight: 600 !important;

  line-height: 1.38 !important;

  margin: 0 !important;

  letter-spacing: -0.01em !important;
}


.blog-page .blog-title a {
  color:
    var(--blog-dark-color) !important;

  text-decoration: none !important;

  font-weight: 600 !important;

  transition:
    color 0.25s ease !important;
}


.blog-page .blog-title a:hover {
  color:
    var(--blog-primary-color) !important;
}


/* =====================================================
   BLOG EXCERPT
===================================================== */

.blog-page .blog-excerpt {
  margin: 0 !important;

  line-height: 1.65 !important;

  font-size: 14.5px !important;

  color:
    var(--blog-text-color) !important;

  flex: 1 1 auto !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 3 !important;

  -webkit-box-orient: vertical !important;

  overflow: hidden !important;
}


/* =====================================================
   READ MORE BUTTON
===================================================== */

.blog-page .blog-read-more-btn {
  display: flex !important;

  visibility: visible !important;

  opacity: 1 !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;

  min-height: 44px !important;

  height: auto !important;

  margin-top: auto !important;

  padding: 11px 18px !important;

  background:
    linear-gradient(
      135deg,
      var(--blog-primary-color),
      var(--blog-secondary-color)
    ) !important;

  color: #ffffff !important;

  border: none !important;

  border-radius: 50px !important;

  font-size: 14px !important;

  font-weight: 800 !important;

  text-align: center !important;

  text-decoration: none !important;

  letter-spacing: 0.01em !important;

  position: relative !important;

  z-index: 50 !important;

  overflow: hidden !important;

  pointer-events: auto !important;

  cursor: pointer !important;

  box-shadow:
    0 10px 22px rgba(67, 97, 238, 0.24) !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}


.blog-page .blog-read-more-btn::before {
  content: "";

  position: absolute;

  top: 0;

  left: -110%;

  width: 70%;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.35),
      transparent
    );

  transform:
    skewX(-20deg);

  transition:
    left 0.55s ease;
}


.blog-page .blog-read-more-btn:hover::before {
  left: 130%;
}


.blog-page .blog-read-more-btn:hover {
  color: #ffffff !important;

  transform:
    translateY(-2px) !important;

  box-shadow:
    0 14px 28px rgba(67, 97, 238, 0.30) !important;
}


.blog-page .blog-read-more-btn:active {
  transform:
    translateY(1px) !important;

  box-shadow:
    0 7px 16px rgba(67, 97, 238, 0.22) !important;
}


/* =====================================================
   SEO ANCHOR TEXT
===================================================== */

.blog-page .seo-anchor-text {
  position: absolute !important;

  left: -9999px !important;

  top: auto !important;

  width: 1px !important;

  height: 1px !important;

  overflow: hidden !important;

  white-space: nowrap !important;
}


/* =====================================================
   LOAD MORE
===================================================== */

.blog-page .pagination-wrap {
  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  gap: 15px !important;

  margin-top: 60px !important;

  flex-wrap: wrap !important;

  position: relative !important;

  z-index: 5 !important;
}


.blog-page .pagination-wrap .btn {
  border-radius: 50px !important;

  padding: 11px 26px !important;

  min-height: 46px !important;

  background: #ffffff !important;

  color:
    var(--blog-primary-color) !important;

  border:
    1px solid rgba(67, 97, 238, 0.25) !important;

  font-size: 14px !important;

  font-weight: 800 !important;

  transition:
    all 0.25s ease !important;

  transform: none !important;

  box-shadow:
    0 8px 20px rgba(16, 24, 40, 0.06) !important;
}


.blog-page .pagination-wrap .btn-primary {
  background:
    linear-gradient(
      135deg,
      var(--blog-primary-color),
      var(--blog-secondary-color)
    ) !important;

  color: #ffffff !important;

  border: none !important;
}


.blog-page .pagination-wrap .btn:hover {
  background:
    linear-gradient(
      135deg,
      var(--blog-primary-color),
      var(--blog-secondary-color)
    ) !important;

  color: #ffffff !important;

  border-color: transparent !important;

  box-shadow:
    0 12px 26px rgba(67, 97, 238, 0.22) !important;

  transform:
    translateY(-2px) !important;
}


.blog-page .pagination-wrap .btn:active {
  transform:
    translateY(1px) !important;
}


.blog-page #loadMoreBlogs.loading {
  cursor: wait !important;

  opacity: 0.75 !important;
}


/* =====================================================
   TABLET
   SAME DESIGN - ONLY WIDTH
===================================================== */

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

  .blog-page .container {
    width: 100% !important;

    max-width: 100% !important;

    padding-left: 15px !important;

    padding-right: 15px !important;
  }

  .blog-page #blog-container {
    --bs-gutter-x: 16px !important;

    --bs-gutter-y: 16px !important;
  }
}


/* =====================================================
   PHONE
   SAME DESIGN - ONLY WIDTH
===================================================== */

@media (max-width: 576px) {

  .blog-page .container {
    width: 100% !important;

    max-width: 100% !important;

    padding-left: 12px !important;

    padding-right: 12px !important;
  }

  .blog-page #blog-container {
    --bs-gutter-x: 0 !important;

    --bs-gutter-y: 20px !important;
  }
}