.list.nav-item .nav-link {
   
    color: #ffffff;
    font-size: 16px;
}
.list .navbar-nav .nav-link.active {
    color: #ffffff;
}
.list .nav-item .active {
   
    border-radius: 20px;
    padding: 8px 15px;
    color: #ffffff;
}
.list .nav-item .nav-image{
    width: 20px;
    height: 20px;
    padding: 9.5px 7px 4.5px;
    border: solid 1px #0d0d0d;
}
.profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/*************************************************************** second navbar **********************************************************/

.second-navbar {
    height: 80px;
    padding: 0 24px 0 48px;
  border: solid 1px #ffffff;
  background-color: #ccecfc;
}

.second-navbar .nav-link {
    font-size: 16px;
    color: #000;
    padding: 10px 15px;
    border-radius: 40px;
}

.second-navbar .nav-item {
    position: relative;
    margin: 0 11px 0 11px;
    padding: 0; 
}
.nav-item.dropdown {
    position: relative;
}

/* Show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    transition: opacity 0.3s ease, visibility 0.3s ease;

}

/* Style dropdown items */
.dropdown-item {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    color: #333;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-item:hover {
    color: #fff;
    background-color: #007bff;
}
/* Active & Hover State */
.second-navbar .nav-link.active {
    color: #000;
}

/* Dropdown Styling */
.dropdown-menu {
    background-color: #fff;
    border-radius: 8px;
    min-width: 180px;
}


.custom-link {
    color: #000 !important;  /* Override Bootstrap's default link color */
    text-align: right;        /* Align text to the right */
    /*font-family: Tajawal, sans-serif; /* Use Tajawal font */
    font-size: 18px;          /* Set font size */
    font-style: normal;       
    font-weight: 500;         /* Medium weight */
    line-height: normal;      
    padding: 10px 15px;       /* Apply padding */
    display: block;           /* Ensure block-level display */
  
}

.dropdown-menu a:hover {
    background-color: #f7c276;
}

/*****************************************************************************************************************/
.book-cat {
    color: var(--main, #FFAF1F);
    text-align: justify;
   
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
margin: 20px;
}
.custom-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #f8f6f2;
    color: #e4af69;
    border: none;
    border-radius: 20px;
  /*  padding: 6px 12px;*/
    font-weight: bold;
    margin-top: 17px;
    height: 54px;
}
.custom-btn:hover {
    background-color: #f1ede7;
    color: #d89f5a;
}

/*****************************************************************************************************/


.views-count{
    color: var(--Success-500, #00866B);
text-align: right;
/*font-family: "DIN Next LT Arabic";*/
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: normal;
}

.costum-title {
  color: #000;
  text-align: right;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4; /* better readability */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* show up to 2 lines */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  max-width: 100%;
  height: auto;
  white-space: normal; /* allow wrapping */
}

.costum-author{
    color: var(--Gray-800, #2B323B);
text-align: right;
/*font-family: "DIN Next LT Arabic";*/
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: normal;
 white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
.book-link {
    text-decoration: none;
    display: block; /* Ensures it does not shrink */
}

.book-link img {
    display: block;
    max-width: 100%;
    height: auto;
    border: none;
}


/******************************************** dropdown-menu ************************************/
.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    right: 0; /* Align to the right edge of the parent */
    top: 100%; /* Position below the profile image */
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px;
    min-width: 150px;
    max-width: 200px; /* Optional: Set a max-width to prevent overflow */
    overflow: auto; /* Add scroll if content overflows */
}

.dropdown-menu.show {
    display: block; /* Show when toggled */
}

.dropdown-menu a {
    display: block;
    padding: 8px 0px;
    color: #333;
    text-decoration: none;
}

.dropdown-menu a:hover {
    background-color: #f5f5f5;
}

/* Ensure the dropdown doesn't overflow the viewport */
.dropdown {
    position: relative;
    padding-left: 118px;
}

.dropdown-menu {
    right: 0;
    left: auto; /* Ensure it aligns to the right */
}

/* Adjust for small screens */
@media (max-width: 768px) {
    .dropdown-menu {
        right: auto;
        left: 0; /* Align to the left on small screens */
    }
}
 


#showAllBtn.active {
    background-color: #f0f0f0;
    border-color: #ddd;
}



@media (min-width: 992px) {
    .navbar {
        padding: 10px 0px;
    }
}