p{
  font-size: 15px;
}
h2{
  font-size: clamp(25px, 2.5vw, 45px);
}
h3{
  font-size: 35px;
}
li{
  font-size: 18px;
}
.blogs-banner-section{
    height:300px;
    background-image: url(./banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}



.banner-title{
    color:white;
    font-size: 60px;
    padding-top: 110px;
}
.blog-card {
  
    width: 100%;
    min-height: 100%;
    border-radius: 6px;
    background: #ceefa9;
    box-shadow: 5px 5px 6px #dadada,
               -5px -5px 6px #f6f6f6;
    
    transition: 0.4s;
  }
  
  .blog-card:hover {
    translate: 0 -10px;
  }
  
  .blog-card-title {
    font-size: 22px;
    font-weight: 600;
    color: black;
    margin: 15px 0 0 10px;
  }
  
  .blog-card-image {
    min-height: 170px;
    border-radius: 6px;
    box-shadow: inset 8px 8px 10px #c3c3c3,
              inset -8px -8px 10px #cfcfcf;
  }
  .blog-card-image img{
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
    height:250px;
  }
  
  .blog-card-body {
    margin: 13px 0 0 10px;
    color:black;
    font-size: 15px;
    
  }
  .card-details{
    padding: 20px;
  }
  
  button {
    font-size: 17px;
    padding: 0.5em 2em;
    background-color: #976325;
    color: white;
    border-radius: 6px;
    border: 0px;
   }
   
   button:hover {
    background: #86C342;
    color:white;
   }
   
   button:active {
    transform: translate(0em, 0.2em);
   }




   .blog-cat {
    text-transform: capitalize;
}

.blog-cat.active {
    background: #86c342;
}

.blog-cat.active a {
    color: #fff !important;
}

.blog-cat:hover {
    background: #86c342;
}

.blog-cat:hover a {
    color: #fff !important;
}


   
   



   /* blogs-detail-page */

   .blog-img{
    width: 100%;
    height: clamp(200px, 50vh, 500px);
    object-fit: cover;
    border-radius: 6px;

   }
   .blog-list-img{
    width: 100%;
    object-fit: cover;
    border-radius: 40px;
   }

   .img-fluid{
    width:100%;
    object-fit: cover;
    border-radius: 6px;
   }
   ul{
    list-style-type:circle;
   }


   @media(min-width: 1024px){
    
    .blogs-list{
      position: sticky;
      top:20px;
     }
   }

   @media(max-width:430px) {
    .blog-img{
      height:200px;
    }
    
   }
   @media(max-width:430px) {
    .blog-img{
      height:200px;
    }
    
   }