/* .fixed-col {
        position: fixed; 
        
        top: 0;
        align-self: flex-start;
        width: 30%;
        height: 100vh;
        overflow-y: auto;
         padding-top: 90px;
    }

@media (max-width: 991px) { 
    .scrollable-col {
        margin: 0 !important; 
        width: 100% !important;
    }
}

.scrollable-col {
    margin-right: 40%; 
   
    width: 59%; 
    overflow-y: auto; 
}*/
.fixed-col {
    position: sticky;
    top: 90px;
    align-self: flex-start;
    width: 100%;
    height: auto;
    padding-top: 20px;
    z-index: 100;
}

.scrollable-col {
    width: 100%;
    overflow-y: auto;
}
/*
@media (min-width: 992px) {
    .fixed-col {
        position: fixed;
        width: 30%;
        height: calc(100vh - 100px); 
        overflow-y: auto;
    }
    
    .scrollable-col {
        margin-right: 32%;
        width: 68%;
    }
}*/
@media (min-width: 992px) {
    .fixed-col {
        position: sticky;
        top: 90px;
        width: 30%;
        height: fit-content;
        overflow-y: visible;
        flex-shrink: 0;  /* Prevent shrinking */
    }
    
    .scrollable-col {
        width: 68%;
        margin-right: 2%;  /* Small gap between columns */
    }
    
    /* Ensure the parent row uses flexbox properly */
    .row.g-0.flex-column.flex-md-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
    }
}
/* Ensure the container allows sticky positioning to work properly */
.row.g-0.flex-column.flex-md-row {
    align-items: flex-start;
}

@media (max-width: 991px) {
    .scrollable-col {
        margin: 0 !important;
        width: 100% !important;
    }
    
    .fixed-col {
        position: static !important; /* Remove fixed positioning on mobile */
        width: 100% !important;
        height: auto !important;
        padding-top: 0 !important;
    }
}





.custom-btn {
    background-color: #E0A458; /* Matching the button color */
    color: white; /* White text */
   /* font-family: Tajawal, sans-serif; /* Arabic-friendly font */
    font-size: 18px; /* Text size */
    font-weight: 500;
    border: none;
    border-radius: 50px; /* Smooth rounded edges */
    padding: 9px 32px; /* Padding for a larger button */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between text and icon */
    min-width: 160px; /* Minimum width */
    text-decoration: none; /* Remove link styling */
    transition: 0.3s ease-in-out;
    flex-direction: row-reverse;
  }
  
  .custom-btn:hover {
    background-color: #d09342; /* Slightly darker on hover */
  }
  
  /* Ensuring icons are sized properly */
  .custom-btn i {
    font-size: 20px;
  }
  .custom-btn2 {
    border: none;
    outline: none;
  display: flex;
  flex-direction: row;
  border-radius: 50px;
  text-decoration: none; /* Remove link styling */
    transition: 0.3s ease-in-out;
    flex-direction: row-reverse;
  background-color: #00866b;
  padding: 9px 0px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  color: var(--Neutral-50, #FFF);
text-align: justify;

/* Body1 */
font-family: Al-Jazeera-Arabic;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 19.2px */

}
.under-stars{
    color: #000;
text-align: center;
/*font-family: "DIN Next LT Arabic";*/
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 120%; /* 16.8px */
}
/*****************************************************************************************************/
.title-book{
    color: #000;
    text-align: right;
    /*font-family: "DIN Next LT Arabic";*/
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.author-book{
    color: var(--Gray-500, #4B5768);
text-align: right;
/*font-family: "DIN Next LT Arabic";*/
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.stars-count{
    display: flex;

flex-direction: column;
justify-content: center;

    color: #000;
text-align: justify;
/*font-family: "DIN Next LT Arabic";*/
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.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;
}

.category{
    color: var(--Gray-500, #4B5768);
    text-align: justify;
    /*font-family: "DIN Next LT Arabic";*/
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;   
}
.category-items {
    color: #000;
    text-align: justify;
    /*font-family: "DIN Next LT Arabic";*/
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: underline; /* Adds underline */
}
.Line-6 {

    
    height: 0.5px;
   
    background-color: #999;
  }
.desc-title{
    color: var(--Success-500, #00866B);
text-align: justify;
/*font-family: "DIN Next LT Arabic";*/
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}


.scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    scroll-behavior: smooth;
}
.overflow-hidden {
    width: 100%;
}
#prevBtn, #nextBtn {
    z-index: 10; /* Ensures buttons appear above books */
}
.costum-title{
    color: #000;
text-align: right;
/*font-family: "DIN Next LT Arabic";*/
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%; /* Ensure it doesn't overflow */
display: block;
}
.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;

}

/******************************************** 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;
}


.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 */
    }
}
 

  .dropdown-share {
    position: relative;
    /* padding-left: 117px; */
}



.dropdown-menu li a {
    cursor: pointer;
}

























@media (max-width: 768px) {
  .fixed-col {
    position: static ;
    width: 100% ;
    height: auto ;
    overflow-y: visible ;
    padding-top: 0  ;
  }
}