/*=================BLOG===================
===========================================*/
.blogSwiper {
  padding-bottom: 70px !important;
  .media {
    background-color: #f0f4f7;
    .media-body {
      font-size: 0.9em;
      padding: 20px;
      .post-cat {
        font-size: 0.75em;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        a {
          color: red;
        }
      }
    }
    h5 {
      font-size: 18px;
      line-height: 1.5;
      margin-bottom: 0;
    }
  }
}

.blog{ border-radius: 18px; overflow: hidden; margin: 13px 0; background:#FFF;;
  /*&__body{ padding:.5rem 1.5rem; display:flex; flex-direction: column; justify-content: center; height: 100%; border: 1px solid #dee2e6!important;
    h5{ font-size:1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
    p{ font-size:.875rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom:0  }
  }*/
  .blog__img{position: relative; display: block; overflow: hidden;
    &:after{ content:''; position:relative; display: block; padding-bottom:62.67% }
    img{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);object-fit: cover; min-height: 100%; min-width:100%} 
    &.col2{
      &:after{ padding-bottom:calc(130% - 7px) }
    }
  }

  .blog__body{ padding:30px;
    .blog__date{ font-size:70%; margin-bottom:15px;
      a{color: #6c757d!important}
      i{ margin-right: 5px}
    }
    h5{ font-size:22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
    p{ font-size:.875rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom:0  }
  }
  .readmore{  font-size: .75rem; margin-top: 25px; display: inline-block;position: relative;
    &:after{ content:"→"; margin-left:10px; transition:.5s ease all; }
    &:before{ content:''; position:absolute; bottom:-5px; width:50px; height:1px; background:#999 }
    &:hover{ text-decoration:none;
      &:after{ margin-left:20px;}
    }
  }
}

.blog__search{ position:relative; width: 50%; margin:0 auto 20px;
  button{ position:absolute; right:0; top:0; }
  .form-group{ width:100% }
}
.top{
  .blog__category{ position: sticky; top: 70px;}
}
.blog__category{ padding: 20px 0;  z-index: 1; background-color: #fff; transition: .5s ease all;
  ul{ list-style: none; margin: auto; padding: 0;
    li{ display: inline-block; margin: 5px;
      a{ display:block; border-radius:30px; border: 1px solid; padding:5px 20px; transition: .35s ease all; font-size: 14px;
        &:hover{ background:#20376A; color:#fff }
      }
    }
  }
  &.fixed{ padding: 5px 0;
    ul li a{font-size: 12px;padding:3px 15px;}
  }
}
.blog-section{
  .sidebar{ margin-top: 13px;
    .card{ margin-bottom:30px;  padding:15px !important;
      .blog__category{ padding:0; border-radius:10px; padding-bottom:20px }
    }
    .blog__body{      
      a{ border-bottom: none; padding:10px;
        h5{ font-size: 13px; margin-bottom: 5px}
        &:hover{
          .text-muted{ color:rgba(255,255,255,.7) !important }
        }
      }
    }
    h3{ font-size:18px; padding:15px 0px 10px ; position:relative;
      &:after{ content:''; position:absolute; bottom:0; left:10px; width:50px; height:3px; background:#fd2e35 }
    }
    ul{ list-style: none; margin: auto; padding: 0;
      li{ display: block; margin: 0;
        a{ display:block; border-radius:0px; border: none; border-bottom: 1px solid #dee2e6; padding:10px 30px 10px 10px; transition: .35s ease all; font-size: 12px; position: relative;
          span{ position:absolute; right:10px; top:10px; text-align:right; }
          &:hover{ background:#20376A; color:#fff }
        }
        &:last-child{
          a{ border-bottom:0 }
        }
      }
    }
  }
  .blog__img{ position:relative;
    img{ width:100%; height:auto; max-width:650px }
    a{position: absolute; left: 20px; top: 0px; background: #fff; padding: 10px; z-index: 1; border-radius: 0 0 4px 4px; text-align: center; font-size: 12px; width: 65px; display: none;
        span{ display:inline-block; width:100%; font-weight:600; font-size:14px }
    }
  }
}

.page{
  .pagination{
    .page-item{ margin: 5px;
      .page-link{ border:none; background: none; text-align: center; width: 30px; height: 30px; border-radius: 100%; color:#333;
        &:focus{ outline:none; box-shadow:none }
        &:hover{ background:#f1f1f1 }
      }
      &.active{
        .page-link{ background:#fd2e35; color:#fff }
      }
      &.disabled{
        .page-link{ color:#ccc }
      }
    }
  }
}
.blog-details{ padding-top: 50px;
  .bg-light {background-color: #e5e5e5 !important; color: #666; padding: 5px 5px; font-size: 12px; margin-left:5px }
  .blog__img{
    &.ractangle{ position:relative; overflow: hidden; margin-bottom: 10px; border-radius: 20px;
      &:after{ content:''; display:block; padding-bottom:40% }
      img{ position: absolute; top: 50%; transform:translateY(-50%); width:100%; height:auto; max-width:none }
    }
  }
  .blog__body{
    .blog__date{ font-size: 80%; margin-bottom: 15px;
      a{color: #6c757d !important;}
    }
    h1 {font-size: 44px; display: -webkit-box; /*-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;*/ }
  }
  .blog__Table-cnt{position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 70px; padding-top: 20px;
    h5{ position:relative; margin: 10px 0;
      span{ background:#f8f8f8; padding-right:10px;position:relative; z-index:1 }
      &:after{ content:''; position:absolute; left:0; right:0; top:50%; height: 2px; background:#dee2e6; }
    }
    ul{ list-style: none; margin-bottom: 30px; margin-left: 0; padding-left: 0;
      li{
        a{ padding:10px 0; display: block; border-bottom: 1px solid #dee2e6!important; position: relative;}
        &.active{
          a{ color:#fd2e35;
            &:after{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; border-bottom:3px solid #fd2e35; }
          }
        }
      }
    }
  }
  .sociallink{ 
    li{ display:inline-block; margin: 10px 10px 10px 0;
      a{ display:block; width:40px; height:40px; line-height:20px; text-align:center; border:  1px solid #dee2e6!important; border-radius: 100%;
        &:hover{color: #fd2e35; border: 1px solid  #fd2e35 !important }
      }
    }
  }
  .blog__category{  position:relative; top:0;}  
}
.blog__content{
  .section{ margin:0 }
}
html {
  scroll-behavior: smooth;
}