.my-favorite-section {
    top: 120px;
    position: absolute;
    inset-inline-start: 20%;
    width: 80%;
}
.my-favorite-section .container{
     background-color: var(--colorBackgroundMyAccountSection);
     border-radius: 16px;
      margin-bottom: 40px;
}
.my-favorite-section h3{
    font-weight: var(--fontWeight600);
}
/************************************************/
.active-btn{
    background-color: var(--colorShowAllLink) !important;
    color: var(--colorBackgroundRowOdd) !important;
    border-radius: 100px !important;
}
.services-btn,
.providers-btn{
    background-color: var(--colorBackgroundMyAccountSection);
    border: 1px solid var(--colorShowAllLink);
    color: var(--colorShowAllLink);
    font-weight: var(--fontWeight500);
    border-radius: 100px;
}
/************************************************/
/*cards my favorite section*/
.my-favorite-section .my-favorite-cards{
  gap: 16px;
}
.my-favorite-section .my-favorite-cards .cards{
  flex: 0 0 calc(25% - 16px);
  box-sizing: border-box;
  background-color: var(--colorBackgroundCards);
  border-radius: 16px;
}
.my-favorite-cards h5{
    font-weight: var(--fontWeight600);
    font-size: clamp(14px, 1.2vw, 1.25rem); /* 14px → 20px */
    display: -webkit-box;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-favorite-cards span{
    font-weight: var(--fontWeight700);
    color: var(--colorMyfavorite);
    display: -webkit-box;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorite-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.favorite-icon.active {
  transform: scale(1.1);
}

.Services-section span{
    color: var(--colorShowAllLink);
}
.my-favorite-section .card-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 16px; 
}
.my-favorite-section .my-favorite-cards .cards img{
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;   
  object-position: center; 
  display: block;
}
.my-favorite-section .my-favorite-cards .cards button{
  padding: 0;
  border-radius: 8px;
}
.my-favorite-section .my-favorite-cards .cards .favorite-icon{
  background-color: var(--colorBackgroundRowOdd);
}
.my-favorite-section .my-favorite-cards .cards .favorite-icon{
  padding: 6px;
  border-radius: 8px;
  width: 30px;
}
/*Place buttons favorite over the image*/
.my-favorite-section .content-card {
    position: absolute;
    top: 25px;
    inset-inline-end: 25px;
}
.my-favorite-section .location-icon{
    width: clamp(15px, 1.2vw, 1.25rem);
    height: 18px;
    margin-top: 2px;
   
}
.my-favorite-section .book-now{
    border: 1px solid var(--colorShowAllLink);
    border-radius: 100px;
    width: fit-content;
    height: 36px;
}
.my-favorite-section .book-now:hover {
    background-color: var( --colorShowAllLink);
}
.my-favorite-section .book-now button:hover {
    color: var(--whiteColor);
}
.my-favorite-section .book-now button {
    font-size: 12px;
    background: none;
    color: var(--colorShowAllLink);
    font-weight: var(--fontWeight700);
    padding: 14px 24px !important;
}
.my-favorite-section .star-icon{
    width: 18px;
    height: 18px;
}
/************************************************/
/*pagination style*/
.page{
  margin: 16px;
   
}
.page .pagination .page-link {
  border-radius: 500px;
  width: 40px;
  height: 40px;
  color: var(--colorHeadTableNewOrder);
  border: none;
}
.page .pagination .link{
  background: none;
}
.page .pagination .page-link:hover,
.page .pagination .link:focus{
    border: 1px solid var(--colorShowAllLink);
    background-color: rgba(233, 225, 255, 1);
    color: var(--colorShowAllLink);
    outline: none !important;
    box-shadow: none !important;
}
.active-page{
    border: 1px solid var(--colorShowAllLink) !important;
    background-color: rgba(233, 225, 255, 1) !important;
}

/***************************************/
@media screen and (max-width:990px){
    .my-favorite-section {
        width: 100%;
        inset-inline-start: 0;
        top: 180px;
    }
    .search-box {
        width: 100%;
    }
    .my-favorite-section .container{
        margin-bottom: 0;
    }
    .my-favorite-section .my-favorite-cards .cards{
        flex: 0 0 calc(50% - 16px);   
    }
    .my-favorite-section .heading{
        flex-direction: column;
        gap: 16px;
        align-items: start !important;
    }
    .providers-section,
    .Services-section{
        padding-top: 0 !important;
    }
    .my-favorite-cards,
    .Services-section{
        padding-top: 0 !important;
    }
}

@media screen and (max-width:520px){
    .my-favorite-section .my-favorite-cards .cards{
     flex: 0 0  100%;
      
    }

}