.navbar-nav .resources {
    color: #E42527 !important; /* Red color for active link */
    font-weight:700 !important;
}
.nav-tabs-wrapper {
    background-color: #EEEEEE;
    width: fit-content;
}

.nav-tabs {
    border-bottom: none;
    display: flex;
    /* Keep the tabs inline */
}

.nav-tabs .nav-link {
    color: #333;
    /* Add space between the tabs */
    transition: background-color 0.3s ease, color 0.3s ease;
    border: none;
    background-color: transparent;
}

.nav-tabs .nav-link.active {
    background-color: #e74c3c;
    /* Red background for active tab */
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    /* Adds a slight shadow for depth */
}

.nav-tabs .nav-link:hover {
    background-color: transparent;
    color: #333;
}

/* Persistent active state on hover */
.nav-tabs .nav-link.active:hover {
    background-color: #e74c3c;
    /* Maintain red background for active tab */
    color: #fff;
}
.navbar-nav .resources {
    color: #E42527 !important; /* Red color for active link */
    font-weight:700 !important;
}
.card_trendings {
    background-image: url('../images/resources_rectangle.png');
    background-repeat: round;
    background-size:cover;
}
.card-img-top2{
    height:235px ! important;
    width:100% !important;
}
.trending-title-container {
    overflow: hidden; /* Hide the text that overflows */
}

.trending-title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2; /* Adjust line-height as needed */
    max-height: 90px; /* Limit the height to 3 lines */
    height:calc(22px * 1.2 *3);
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Clamp text to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Ellipsis for overflow */
    white-space: normal;
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}
@media (max-width:765px){
    .trending-title{
        font-size:16px;
        font-weight: 500;
        line-height: 1.2; /* Adjust line-height as needed */
        max-height: 90px; /* Limit the height to 3 lines */
        height:calc(16px * 1.2 *3);
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Clamp text to 3 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* Ellipsis for overflow */
        white-space: normal;
        transition: all 0.3s ease; /* Smooth transition for hover effect */
    }
}
.small_class{
    font-size:10px;
}
@media (min-width:765px){
    .small_class{
        font-size:11px;
    }
}
@media (min-width:968px){
    .small_class{
        font-size:12px;
    }
}
.author-icons {
    display: flex;
    align-items: center;
  }
  
  .author-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #fff; /* Creates a border around each icon */
    margin-left: -8px; /* Controls the overlap */
  }
.author{
    font-size:10px;
    font-weight: 300;
    line-height: 1.2; /* Adjust line-height as needed */
    max-height: 90px; /* Limit the height to 3 lines */
    height:calc(10px * 1.2 *2);
    display: -webkit-box;
    align-content:center;
    -webkit-line-clamp: 2; /* Clamp text to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Ellipsis for overflow */
    white-space: normal;
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}
@media (min-width:765px){
    .author{
        font-size:11px;
        font-weight: 300;
    line-height: 1.2; /* Adjust line-height as needed */
    max-height: 90px; /* Limit the height to 3 lines */
    height:calc(11px * 1.2 *2);
    display: -webkit-box;
    align-content:center;
    -webkit-line-clamp: 2; /* Clamp text to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Ellipsis for overflow */
    white-space: normal;
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    }
}
@media (min-width:968px){
    .author{
        font-size:12px;
        font-weight: 300;
    line-height: 1.2; /* Adjust line-height as needed */
    max-height: 90px; /* Limit the height to 3 lines */
    height:calc(12px * 1.2 *2);
    display: -webkit-box;
    align-content:center;
    -webkit-line-clamp: 2; /* Clamp text to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Ellipsis for overflow */
    white-space: normal;
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    }
}
.category-link{
    background-color: white;
}
.selected-category {
    background-color: #EEEEEE; /* Example: Blue background */
    color: black ! important; /* Example: White text */
  }
  .expand_menu {
    display: block;
  }
  .btn-data {
    color: black;
    /* Set default color */
    transition: margin-left 0.3s ease;
    font-weight:400 !important
    /* Transition for margin */
}
.btn-data:hover {
    color: #E42527 !important;
    font-weight: 500 !important;
    margin-left: 3px;
    /* Apply margin on hover */
}