/*  */
.upper-section {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 30px;
   // padding: 0 10px;
}

ul.blog-tags {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0px;
    flex-wrap: wrap;
    justify-content: space-between;
}
ul.blog-tags li {
    padding: 0px 10px;
}
.social-icon {
    //flex: 0 20%;
}
ul.blog-tags li a{
    font-weight: 600;
font-size: 12px;
line-height: 15px;
color: #444444;
    position:relative;
}
ul.blog-tags li:first-child a:before{
    display:none;
}
ul.blog-tags li a:before{
    position:absolute;
    top:50%;
    left:-10px;
    transform:translate(-50%,-50%);
    width:5px;
    height:5px;
    border-radius:50%;
    background-color:#444444;
    content:'';
    
}
.social-icon ul{
    display:flex;
    list-style:none;
    gap:30px;
    margin: 0;
}


/*  */
.banner-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 8px;
    padding:10px;
}

.top-details {
    display:
    flex;
    gap:15px;
    align-items: center;
    margin: 0 0 10px;
}
.top-details .tags a,
.top-details p.post-date{
    font-weight: 600;
 font-size: 11px;
    line-height: 1;
 color: #444444;
}

 .top-details p.post-date{
    color: #828282;
    margin: 0;
}

.tags {display: flex;align-items: center;gap: 5px;}

.banner-details h2 a{
 font-weight: 700;
font-size: 20px;
line-height: 1;
color: #444444;
}
.banner-details .blog-index__post-summary p{
 font-weight: 400;
font-size: 14px;
line-height: 17px;

color: #444444;
}

a.more-link.button {
 font-weight: 600;
font-size: 12px;
line-height: 15px;
text-align: center;
color: #10B8ED;
 background:none;
 border:none;
 display:inline-block;
 padding:0;
}

.blog-index__post-summary .button-section{
 text-align:right;
  padding: 0 20px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.blog-index__post-summary .button-section span.arrow-icon:after{
  display:none
}
.blog-index__post-summary {
    min-height: 100px;
}
.banner-card .img-container {
    width:100%;
    height:100%;

}
.banner-card .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 250px;
}


.button-section span.arrow-icon {
    position: absolute;
    top: 14px;
    right: 0px;
    padding: 0 !Important;
}


@media(max-width:767px){
  ul.blog-tags {
      justify-content: flex-start;
  }
  .heading-and-button {
    padding: 60px 0 40px;
  }
}
@media(max-width:568px){
  .upper-section {
      display: block;
  }
  .upper-section {
   
  flex-wrap:wrap;
  }
  .upper-section .social-icon ul{
    padding-left:0;
    
  }
}