

.post-card{
	padding: 20px;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	background-image: linear-gradient( 130deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 1.0));
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
    overflow: hidden;
    cursor: pointer;
}

.post-card-one{
	height: 409px !important;
	widows: 100%;
}

.post-card-two{
	height: 208px;
	widows: 100%;
}

.post-card-two .post-card-title{
   font-size: 14px;
}

.post-card-three{
	height: 210px;
	widows: 100%;
}

.post-card-three .post-card-title{
   font-size: 14px;
}

.post-card-four{
	height: 210px;
	widows: 100%;
}

.post-card-four .post-card-title{
   font-size: 14px;
}

.post-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    z-index: 1;
}

/* Scale background only */
.post-card:hover .post-card-bg {
    transform: scale(1.1);
}

/* Content above background */
.post-card .post-content {
    position: absolute;
    left: 0px;
    bottom: -18px;
    z-index: 2;
    text-decoration: none;
    padding: 10px 10px 25px 10px;
    box-sizing: border-box;
    background-image: repeating-linear-gradient(to top, black 15%, transparent 100%);
    width: 100%;
}

/* Category label */
.post-card .post-category a {
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    padding: 2px 6px;
    transition: background-color 0.3s ease;
    color: #fff!important;
    font-size: 10px!important;
    text-transform: uppercase;
}

.post-card:hover .post-category a {
    background-color: #4db2ec;
    color: #fff!important;
}

.post-card .post-card-title {
    margin: 0px;
    color: #fff;
}

.post-card .post-card-title-one {
    font-size: 30px;
}

.post-card .post-card-meta {
    font-size: 12px;
    color: #fff;
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .post-card { height: 200px; }
}
@media (min-width: 992px) {
    .post-card-one { height: 420px; }
    .post-card-two { height: 200px; }
    .post-card-three, .post-card-four { height: 200px; }
}

/*#############################################################################################
 Start css for the second section 
 ############################################################################################ */

:root {
  --theme-accent: #ffc107;
}

/* =========================
   CATEGORY TABS SECTION
========================= */
.categoryTabsMain {
  border-bottom: 1px solid var(--theme-accent);
}

.dont-miss { 
  background-color: var(--theme-accent);
  color: #000;
  padding: 9px 10px 5px 10px;
  font-size: 14px;
  font-weight: 500;
}

#categoryTabs .nav-link {
  color: #000;
  font-weight: 400;
  border: none;
  text-transform: capitalize!important;
  border-bottom: 1px solid var(--theme-accent) !important;
  font-size: 14px;
}

#categoryTabs .nav-link:hover {
  color: var(--theme-accent);
}

#categoryTabs .nav-link.active {
  color: var(--theme-accent);
  font-weight: 400;
  border-bottom: 1px solid var(--theme-accent);
}

#categoryTabs .dropdown-menu a {
  color: #000;
}

#categoryTabs .dropdown-menu a:hover {
  background-color: #f8f9fa;
}

/* =========================
   POST CARD
========================= */
.cs-post-card-header {
  height: 250px;
  width: 100%;
  overflow: hidden;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  position: relative;
}

.cs-post-card-header a img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
  object-position: center;
}

.cs-post-card-header-category {
  position: absolute;
  left: 0;
  bottom: 0;
}

.category-badge {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.6);
  padding: 3px 6px;
  text-transform: capitalize;
  transition: 0.3s ease;
}

.category-badge:hover {
  color: #000;
  background-color: var(--theme-accent);
}

.cs-post-card-title a {
  font-size: 20px;
  font-weight: 500;
}

.cs-post-card-title a:hover {
  color: var(--theme-accent) !important;
}

.cs-post-card-meta {
  font-size: 11px;
  margin-top: 3px;
}

.cs-post-card-meta .post-author {
  font-weight: bold;
  color: #000 !important;
  margin-right: 5px;
}

/* =========================
   COMMENT COUNT
========================= */
.comment-count a {
  color: #fff;
  background-color: #000;
  display: inline-block;
  min-width: 17px;
  padding: 1px 2px 0 6px;
  position: relative;
  font-size: 11px;
}

.comment-count a:hover {
  color: #fff !important;
}

.comment-count a:after { 
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 3px 0 0;
  border-color: #000 transparent transparent transparent;
}

/* =========================
   EXCERPT & RIGHT CARD
========================= */
.post-excerpt {
  font-size: 13px;
  color: #767676;
}

.cs-post-card-right-img {
  height: 70px;
  width: 100%;
  overflow: hidden;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.cs-post-card-right-img a img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
  object-position: center;
}

.cs-post-card-right-content a {
  font-size: 14px;
  color: #000;
}

.cs-post-card-right-content a:hover {
  color: var(--theme-accent) !important;
}

.cs-post-card-right-content small {
  font-size: 12px;
  color: #767676;
}

.stay-connected {
  border-bottom: 1px solid #000;
}

.stay-connected-title { 
  background-color: #000;
  color: #fff;
  padding: 9px 10px 5px 10px;
  font-size: 14px;
  font-weight: 500;
  width:121px;
}

.stay-connected-row{
    padding: 0px 0px 10px 0px;
}

.stay-connected-row .icon-btn-facebook{
    height: 40px;
    width: 40px;
    background-color: #516eab;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.stay-connected-row .icon-btn-twitter{
    height: 40px;
    width: 40px;
    background-color: #29c5f6;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.stay-connected-row .icon-btn-youtube{
    height: 40px;
    width: 40px;
    background-color: #e14e42;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.stay-connected-row .icon-btn-instagram{
    height: 40px;
    width: 40px;
    background-color: #e14075;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.stay-connected-row .icon-btn-facebook i{
    color: #fff!important;
}

.stay-connected-row .icon-btn-twitter i{
    color: #fff!important;
}

.stay-connected-row .icon-btn-youtube i{
    color: #fff!important;
}

.stay-connected-row .icon-btn-instagram i{
    color: #fff!important;
}

.stay-connected-meta{
    font-size: 12px;
    font-weight: 500;
}

.stay-connected-meta-a a{
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.9);
}

.stay-connected-meta-a a:hover{
    color:  rgba(0, 0, 0, 0.7)!important;
}

.latestArticles-main {
  border-bottom: 1px solid #000;
}

.latestArticles-title { 
  background-color:#000;
  color: #fff;
  padding: 9px 10px 5px 10px;
  font-size: 14px;
  font-weight: 500;
  width:112px;
}

.mostPopularPosts-main {
  border-bottom: 1px solid #000;
}

.mostPopularPosts-title { 
  background-color:#000;
  color: #fff;
  padding: 9px 10px 5px 10px;
  font-size: 14px;
  font-weight: 500;
  width:106px;
}

.cs-post-card-header-2{
  height: 180px!important;
}