/*=====================================
        BLOG PAGE BANNER
======================================*/

.blog-banner{

    position:relative;

    min-height:430px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:url("../banner.png") center center/cover no-repeat;

}

.blog-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.72),

        rgba(0,0,0,.62)

    );

}

.blog-banner .container{

    position:relative;

    z-index:2;

}

.page-banner-content{

    max-width:850px;

    margin:auto;

    text-align:center;

}

.page-banner-content h1{

    color:#fff;

    font-size:58px;

    font-weight:800;

    margin-bottom:15px;

    text-transform:capitalize;

}

.page-banner-content p{

    color:#fff;

    font-size:19px;

    line-height:1.8;

    margin-bottom:25px;

}

.page-banner-content .breadcrumb{

    background:transparent;

}

.page-banner-content .breadcrumb-item{

    font-size:16px;

    font-weight:500;

}

.page-banner-content .breadcrumb-item a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.page-banner-content .breadcrumb-item a:hover{

    color:#ffc107;

}

.page-banner-content .breadcrumb-item.active{

    color:#ffc107;

}

.page-banner-content .breadcrumb-item+.breadcrumb-item::before{

    color:#fff;

}

/*=========================
Responsive
=========================*/

@media(max-width:991px){

.blog-banner{

min-height:340px;

}

.page-banner-content h1{

font-size:42px;

}

}

@media(max-width:576px){

.blog-banner{

min-height:280px;

padding:60px 0;

}

.page-banner-content h1{

font-size:32px;

}

.page-banner-content p{

font-size:15px;

}

.page-banner-content .breadcrumb-item{

font-size:14px;

}

}
/*=========================
BLOG
=========================*/

.blog-category,
.blog-badge {
  display: inline-block;

  padding: 7px 16px;

  background: #0d6efd;

  color: #fff;

  border-radius: 30px;

  font-size: 14px;

  font-weight: 600;
}

.blog-meta {
  display: flex;

  gap: 20px;

  flex-wrap: wrap;

  margin: 18px 0;

  font-size: 14px;

  color: #777;
}

.blog-meta i {
  color: #0d6efd;

  margin-right: 6px;
}

.blog-card {
  background: #fff;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);

  transition: 0.35s;

  height: 100%;
}

.blog-card:hover {
  transform: translateY(-8px);
}

.blog-image {
  position: relative;

  overflow: hidden;
}

.blog-image img {
  width: 100%;

  height: 240px;

  object-fit: cover;

  transition: 0.4s;
}

.blog-card:hover img {
  transform: scale(1.08);
}

.blog-badge {
  position: absolute;

  top: 20px;

  left: 20px;
}

.blog-content {
  padding: 25px;
}

.blog-content h4 {
  font-size: 22px;

  font-weight: 700;

  margin: 15px 0;
}

.blog-content h4 a {
  color: #222;

  text-decoration: none;
}

.blog-content p {
  color: #666;
}

.read-more {
  color: #0d6efd;

  font-weight: 700;

  text-decoration: none;
}

.read-more i {
  margin-left: 8px;

  transition: 0.3s;
}

.blog-card:hover .read-more i {
  margin-left: 15px;
}

@media (max-width: 768px) {
  .blog-image img {
    height: 220px;
  }

  .blog-content {
    padding: 20px;
  }

  .blog-content h4 {
    font-size: 20px;
  }
}

/*==========================
SIDEBAR
==========================*/

.sidebar-box {
  background: #fff;

  padding: 30px;

  border-radius: 18px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  margin-bottom: 30px;
}

.sidebar-box h4 {
  font-weight: 700;

  margin-bottom: 20px;
}

.sidebar-list {
  list-style: none;

  padding: 0;

  margin: 0;
}

.sidebar-list li {
  border-bottom: 1px solid #eee;

  padding: 12px 0;
}

.sidebar-list li:last-child {
  border: none;
}

.sidebar-list a {
  display: flex;

  justify-content: space-between;

  text-decoration: none;

  color: #333;

  font-weight: 600;

  transition: 0.3s;
}

.sidebar-list a:hover {
  color: #0d6efd;

  padding-left: 8px;
}

.recent-post {
  display: flex;

  gap: 15px;

  margin-bottom: 20px;
}

.recent-post:last-child {
  margin-bottom: 0;
}

.recent-post img {
  width: 90px;

  height: 70px;

  border-radius: 10px;

  object-fit: cover;
}

.recent-post a {
  display: block;

  font-weight: 700;

  text-decoration: none;

  color: #222;

  margin-bottom: 5px;
}

.recent-post small {
  color: #777;
}

.tags {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

.tags a {
  padding: 8px 16px;

  background: #f4f6f9;

  border-radius: 30px;

  text-decoration: none;

  color: #333;

  font-size: 14px;

  transition: 0.3s;
}

.tags a:hover {
  background: #0d6efd;

  color: #fff;
}

.sidebar-cta {
  background: linear-gradient(135deg, #0d6efd, #003b80);

  padding: 35px;

  border-radius: 20px;

  color: #fff;

  text-align: center;
}

.sidebar-cta h3 {
  color: #fff;

  font-weight: 700;

  margin-bottom: 15px;
}

.sidebar-cta p {
  color: #fff;

  margin-bottom: 25px;
}

@media (max-width: 991px) {
  .sidebar-box,
  .sidebar-cta {
    margin-top: 30px;
  }
}

/*==========================
PAGINATION
==========================*/

.custom-pagination .page-link {
  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  margin: 0 6px;

  border: none;

  background: #f5f5f5;

  color: #333;

  font-weight: 700;

  transition: 0.3s;
}

.custom-pagination .page-item.active .page-link {
  background: #0d6efd;

  color: #fff;
}

.custom-pagination .page-link:hover {
  background: #0d6efd;

  color: #fff;
}

/*==========================
NEWSLETTER
==========================*/

.newsletter-section {
  padding: 80px 0;

  background: #f8f9fa;
}

.newsletter-section h2 {
  font-size: 42px;

  font-weight: 800;

  margin-bottom: 15px;
}

.newsletter-section p {
  color: #666;

  font-size: 17px;
}

.newsletter-form .form-control {
  height: 60px;

  border-radius: 50px 0 0 50px;

  border: none;

  padding-left: 25px;
}

.newsletter-form .btn {
  border-radius: 0 50px 50px 0;

  padding: 0 35px;

  font-weight: 700;
}

/*==========================
CTA
==========================*/

.blog-cta {
  padding: 90px 0;

  background: linear-gradient(135deg, #0d6efd, #003b80);

  color: #fff;
}

.blog-cta h2 {
  font-size: 44px;

  font-weight: 800;

  color: #fff;

  margin-bottom: 15px;
}

.blog-cta p {
  font-size: 18px;

  color: #fff;
}

.blog-cta .btn {
  padding: 15px 35px;

  border-radius: 50px;

  font-weight: 700;
}

@media (max-width: 991px) {
  .blog-cta {
    text-align: center;
  }

  .blog-cta .text-lg-end {
    margin-top: 25px;
  }

  .newsletter-section {
    text-align: center;
  }

  .newsletter-form {
    margin-top: 25px;
  }
}

@media (max-width: 768px) {
  .newsletter-section {
    padding: 60px 0;
  }

  .newsletter-section h2 {
    font-size: 30px;
  }

  .blog-cta {
    padding: 70px 0;
  }

  .blog-cta h2 {
    font-size: 32px;
  }

  .newsletter-form .input-group {
    display: block;
  }

  .newsletter-form .form-control {
    border-radius: 50px;

    margin-bottom: 15px;
  }

  .newsletter-form .btn {
    border-radius: 50px;

    width: 100%;

    height: 55px;
  }
}