.banner {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.banner-container {
    text-align: center;
}

.sticky-left, .sticky-right {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #ffffff;
    z-index: 2;
    padding: 10px;
    height: calc(100vh - 200px); /* Adjust height based on banner height */
}

.sticky-left {
    border-right: 1px solid #ddd;
    overflow-y: auto; /* Allow scrolling if content overflows */
}

.sticky-right {
    border-left: 1px solid #ddd;
    overflow-y: auto; /* Allow scrolling if content overflows */
}

.tab-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nav-pills .nav-link {
    border-radius: 0;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    display: block;
    background-color: #f8f9fa;
    color: #007bff;
    transition: border 0.3s ease, transform 0.3s ease;
}

.nav-pills .nav-link img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 5px;
}

.nav-pills .nav-link.active {
    background-color: #007bff;
    color: #ffffff;
    border: 2px solid #0056b3;
    transform: scale(1.05);
    font-family: "Poppins", sans-serif;
}

.nav-link-text {
    display: block;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    color:black;
}




.main_sticky .card-img {
    width: 80px;
    height: 80px!important;
    object-fit: cover;
}

.full-width-card {
    width: 100%;
}

.center-right-container {
    display: flex;
    gap: 1rem;
    font-family: "Poppins", sans-serif;
}

.center-section {
    flex: 1;
    max-height: calc(100vh - 200px); /* Adjust based on banner height */
    overflow-y: auto;
    padding: 10px;
}

.right-section {
    max-width: 300px;
    overflow: hidden;
    padding: 10px;
}

.card-header {
    background-color: #007bff;
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
}

.card-footer {
    background-color: #f8f9fa;
    font-size: 12px;
}

.card-text li {
    font-size: 12px;
}

.card-meta {
    font-size: 12px;
    color: #6c757d;
}

@media (max-width: 992px) {
    .sticky-left, .sticky-right {
        position: static;
        width: 100%;
        margin-bottom: 1rem;
    }

    .center-right-container {
        flex-direction: column;
    }

    .right-section {
        max-width: 100%;
        margin-top: 1rem;
    }
}
@media (max-width: 798px) {
.sticky-left, .sticky-right {

height: calc(59vh - 200px);
}
}
/* Ensures the target card is positioned correctly when scrolled to */
.scroll-offset {
scroll-margin-top: 160px; /* Adjust this value based on the height of your sticky elements */
}


.main_sticky .card-container {
opacity: 0;
transform: translateY(30px) scale(0.95);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
border-radius: 8px;
}

.card-container.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
span.nav-link-text.btn_pre {
background: #000000bf;
padding: 10px;
border-radius: 10px;
color: #fff;
text-align:center;
}
.main_sticky ul.card-text li {
list-style: initial;
font-family: "Poppins", sans-serif;
}
.sticky-right strong {
font-size: 15px;
}
a.btn.btn-secondary.cart-btn-transform.m-3 {
font-size: 11px;
text-transform: capitalize;
}
.add_btn {
position: absolute;
right: 34px;
margin-top: 136px;
}
/* Cart Container Styles */
#cartContent {
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}

/* Cart Item Styles */
.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}

.cart-item:last-child {
border-bottom: none;
}

.cart-item h6 {
margin: 0;
flex: 1;
}

/* Quantity Controls Styles */
.quantity-controls {
display: flex;
align-items: center;
}

.quantity-controls button {
width: 30px;
height: 30px;
border-radius: 3px;
border: 1px solid #ddd;
background-color: #fff;
color: #333;
font-size: 18px;
cursor: pointer;
}

.quantity-input {
width: 50px;
height: 30px;
text-align: center;
border: 1px solid #ddd;
border-radius: 3px;
margin: 0 5px;
}

/* Remove Button Styles */
.remove-btn {
background-color: #dc3545;
color: #fff;
border: none;
border-radius: 3px;
padding: 5px 10px;
cursor: pointer;
}
/* Cart Item Styles */
.cart-item {

background-color: #f9f9f9;
display: flex;
flex-direction: column;
align-items: center;
}

/* Service Title Styles */
.service-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}

/* Quantity Controls Styles */
.quantity-controls {
display: flex;
align-items: center;
margin-top: 10px;
}

.quantity-controls button {
width: 30px;
height: 30px;
border-radius: 3px;
border: 1px solid #ddd;
background-color: #fff;
color: #333;
font-size: 18px;
cursor: pointer;
}

.quantity-input {
width: 50px;
height: 30px;
text-align: center;
border: 1px solid #ddd;
border-radius: 3px;
margin: 0 5px;
}

.position-relative {
position: relative;
display: inline-block;
}

.card-img {
display: block;
max-width: 100%;
height: auto;
}

.economy-btn, .premium-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
padding: 4px 8px;
border-radius: 15px;
z-index: 10;
white-space: nowrap;
max-width: 80px;
text-overflow: ellipsis;
overflow: hidden;
}

.premium-btn {
background-color: #ffc107; /* Gold/Yellow color for premium */
color: #000;
border: none;
}

/* Style for Premium button */
.premium-btn, .economy-btn {
position: absolute;
top: 10px; /* Distance from top */
left: 10px; /* Distance from left */
padding: 5px 10px;
border-radius: 5px;
color: #fff; /* Text color */
border: none;
z-index: 2; /* Ensure buttons are on top */
}

/* Premium button specific styles */
.premium-btn {
background-color: #ffcc00; /* Background color */
}

/* Economy button specific styles */
.economy-btn {
background-color: #28a745; /* Background color */
}
.view-more-btn {
background: #f47b00;
border: none;
}
.add-btn {
border: 2px solid #f47b00;
}
.view-more-btn ,.add-btn{
position: relative;
top: 12px;
}
.view-more-btn:hover 
{
background: #f47b00;
border: none;
}

.add-btn:hover

{
color:black;
background:#fff;
border: 2px solid #f47b00;
}
.tab-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}

.tab-link {
flex: 1 1 calc(50% - 20px); /* Two tabs per row */
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
text-decoration: none;
color: #333;
border: 2px solid transparent;
border-radius: 5px;
transition: border 0.3s ease, transform 0.3s ease;
background-color: #fff;
}

.tab-link img {
width: 64px;
height: 64px;
margin-right: 10px;
border-radius: 50%;
transition: transform 0.3s ease;
}

.tab-link .tab-text {
font-size: 14px;
font-weight: bold;
}

.tab-link:hover {
border-color: #007bff;
background-color: #e9ecef;
}

.tab-link.active {
border-color: #007bff;
background-color: #e2e6ea;
transform: scale(1.05);
}

.tab-link.active img {
transform: scale(1.1);
}
h5.card-title.flat_font {
    font-size: 12px;
}
h5.text-primary {
    color: blue;
    font-size: 13px;
}
button.btn.btn-outline-secondary.add-btn.plus {
    height: 29px;
    position: relative;
    padding: 2px 6px 7px 2px;
    font-size: 16px;
    margin-bottom: 10px;
}
.sidebar-card {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 50px;
    border-radius: 10px;

}

.sidebar-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.sidebar-card ul {
    list-style-type: none;
    padding: 0;
}

.sidebar-card ul li {
    margin-bottom: 10px;
    font-size: 14px;
}
.counter-area .counter-item .title
{
    line-height:29px;
}