.min-max-h-220{
  max-height: 220px;
  min-height: 220px;
  display: inherit;
  overflow: hidden;
}

.max-h-600{
  max-height: 600px;
  display: inherit;
  overflow: hidden;
}


.gallery img {
    width: 100%;   
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 8px;
    transition: transform 0.3s ease;
    background: rgb(244, 244, 244);
}
.gallery img:hover {
    transform: scale(1.2);
    position: relative;
    z-index: 10;
}

.author-avatar{
    width: 80px;
    margin-top: -40px;
    z-index: 5;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border-radius: 100px;
}
.pr-50{
    padding-right: 50px !important;
}
.alert-success{
    padding: 10px;
}
.author-card-banner-box{
    height: 110px !important;
    overflow: hidden;
    display: flex;
}
.bg-black{
    background-color: #000000 !important ;
}

.w-410{
  width: 410px;
}

.w-100{
  width: 100% !important;
}

.h-100{
  height: 100% !important;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.float-right{
  float: right !important;
}

.font-weight-normal{
    font-weight: normal !important;
}

.font-weight-light{
    font-weight: lighter !important;
}

.flag-box{
  font-size: 24px;
  border-radius: 100px;
  background: #a6a6a63b;
  padding: 4px 8px;
}
.opacity-10{
  opacity: 0.1 !important;
}
.js-collections-sidebar {
  width:390px !important;
}
.card-container {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(135deg, #ffffff26, #ffffff24, #5a21d645, #ffffff78);
  background-size: 300% 300%;
  animation: gradient-animation 6s ease infinite; /* Smooth gradient animation */
  border-radius: 15px; /* Match the card radius */
}
.bg-transparent{
    background-color: hsla(0,0%,100%,.5) !important;
}
.text-justify{
    text-align: justify !important;
}
.justify-content-center{
    justify-content: center !important;
}
.align-items-center{
    align-items: center !important;
}
.line-2{
    
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Change this to the number of lines you want */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

}
@media (max-width: 768px) { /* Adjust 768px as needed for your breakpoint */
  .js-collections-sidebar {
    width: 100% !important;
  }


  [class*="col-"] {
    flex: 0 0 auto;
    width: 100%; /* Make all columns full-width */
  }
}


.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y)* -1);
    margin-right: calc(var(--bs-gutter-x)* -.5);
    margin-left: calc(var(--bs-gutter-x)* -.5);
}

 .col-12 {
        flex: 0 0 auto;
        width: 100%;
 }



@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

     .mx-md-0{
        margin-left: 0px;
        margin-right: 0px;
     }

    .grid-cols-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columns of equal width */
        gap: 1rem; /* Adjust the gap between rows and columns as needed */
    }
    
}

/*.h-fit-content{
  height: fit-content !important;
}*/