@font-face {
    font-family: 'Poppins';
    src: url('https://backbenchersindia.in/assets/fonts/poppins.ttf') format('truetype');
}

/* General Styles */
body, p, h5, h2, tr, td, th, li, b, .cart-item-price, .billing-form label {
    font-family: 'Poppins', sans-serif;
    color: #505050;
    font-size: 14px;
}

h5 {
    font-size: 16px;
}

h2 {
    font-size: 26px;
    color: #282728;
    font-weight: 700;
}


p {
    font-size: 16px;
}

.heading-font, .cart-item-name {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #333;
}

td {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #4F5052;
}

.product-card p {
    line-height: 18px;
}

.mt-8{
    margin-top: 80px;
}

th {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #282728;
}


.btn {
    font-family: 'Poppins', sans-serif;
}

.text-vanilla {
    color: #f2e7dd;
}

.display-4 {
    font-size: 64px;
    line-height: 1;
}


/* Navbar Styles */
.navbar {
    height: 100px;
    background-color: #282728; /* Raisin Black color */
    font-family: 'Poppins', sans-serif;
    z-index: 10; /* Add this to make sure the navbar stays above the hero section */
    position: relative; /* Make sure the z-index takes effect */
    font-size: 9pt;
}

.navbar-brand, .navbar-nav .nav-link {
    color: #282728 !important; /* Ensure all text is black */
    padding-left: 40px;
}

.navbar-nav .nav-link {
    margin-right: 6px;
}

.navbar-toggler-icon {
    color: white;
}

.navbar .dropdown-menu {
    z-index: 1000; /* Ensures dropdown menus are above other content */
    position: absolute; /* Ensures the dropdown doesn't affect the layout */
    background-color: #FFF4D7F2 ;

}

.dropdown-item {
    font-size: 12px;
}


/* Hero Section */
.hero-section {
    position: relative;
    background: url('https://backbenchersindia.in/assets/img/path-to-background-image.jpg') no-repeat center center;
    background-size: cover;
    color: #fff;
    height: 75vh; /* 75% of the viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
    z-index: -1; /* Places the overlay behind the content */
}


/* Price Styling */
.price {
    font-weight: bold;
    color: #ff5722;
}

/* Search Container */
.search-container {
    position: relative;
}

.search-box {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    width: 250px;
    z-index: 1000;
    padding: 10px;
}

/* .search-container:hover .search-box {
    display: block;
} */

/* Cart Container */
.cart-container {
    position: relative;
}

.cart-box {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    width: 300px;
    z-index: 1000;
    padding: 10px;
}

.cart-container:hover .cart-box {
    display: block;
}

#navbar-logo {
    height: 80px; /* Adjust based on how you want it to fit within the navbar height */
    max-height: 100%; /* Ensures the logo fits within the navbar */
    width: auto; /* Keeps the aspect ratio of the logo */
}

/* Increase space between product items */
.owl-carousel .item {
    margin-right: 20px; /* Adjust the spacing between items */
}



.arrow-icon {
    background-color: #282728; /* Black background for the circle */
    color: #fff; /* White arrow color */
    border-radius: 50%; /* Circle shape */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; /* Size of the circle */
    height: 36px;
    margin-left: 16px; /* Space between text and circle */
}

.arrow-icon i {
    font-size: 14px; /* Size of the arrow icon */
}

.choose-us-card {
    background-color: #f8f9fa; /* Light grey background similar to the image */
    border-radius: 15px; /* Rounded corners */
    padding: 20px;
    text-align: center;
}

.choose-us-icon {
    font-size: 38px; /* Size of the icon */
    color: #333; /* Dark grey icon color */
}

.choose-us-icon img {
    height: 70px;
}

.choose-us-card h5 {
    color: #333; /* Dark grey text color */
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 900;
}

.choose-us-card p {
    color: #959697; /* Slightly lighter grey for the paragraph text */
    font-size: 14px;
}

/* Product Carousel Section */
.product-carousel {
    background-color: transparent; /* No background color */
    padding: 0; /* Remove any extra padding */
}

/* Product Card Styling */
.product-card {
    padding: 0; /* Remove padding */
    text-align: left; /* Align text to the left */
}

.product-card a {
    text-decoration: none;
}

/* Product Image Styling */
.product-card img {
    width: 100%; /* Ensures the image takes the full width of its container */
    height: auto; /* Maintains aspect ratio */
    aspect-ratio: 325 / 525; /* Ensures the image is always square */
    object-fit: cover; /* Ensures the image covers the container while staying square */
}


.product-card img {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    object-fit: cover; /* Ensures the image fills the square */
}

.product-detail {
    padding: 16px;
}

.product-item {
    position: relative;
}

.product-image-container {
    position: relative;
    overflow: hidden;
}

.product-image-container img {
    transition: opacity 0.3s ease;
}

.primary-img {
    opacity: 1;
}

.secondary-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-item:hover .primary-img {
    opacity: 0;
}

.product-item:hover .secondary-img {
    opacity: 1;
}

.product-cart img {
    aspect-ratio: 325/365;
    border-radius: 0px;
}

/* Product Name */
.product-card h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #282728;
    font-weight: 400;
    text-align: left;
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden; /* Hides any text that exceeds the container */
    text-overflow: ellipsis; /* Adds "..." for text that overflows */

}


/* Product Description */
.product-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #959697; /* Adjust the color if needed */
    margin: 10px 0;
    text-align: left;
}


/* Product Card Flex Container for Price and Arrow */
.product-card .price-arrow-container {
    display: flex;
    align-items: center; /* Vertically centers the content */
    justify-content: space-between; /* Places the price on the left and the arrow on the right */
    margin-top: 15px;
}

/* Adjust the Price Styling */
.product-card .price {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #282728; /* Adjust the color if needed */
    margin: 0; /* Remove any margin to ensure proper alignment */
    text-align: left; /* Left-aligned */
}

/* Adjust the Product Arrow */
.product-arrow {
    display: inline-flex; /* Flexbox for the arrow */
    align-items: center;
    justify-content: center;
    background-color: #282728;
    color: #fff;
    border-radius: 50%;
    width: 49px;
    height: 49px;
    margin-left: auto; /* Ensure it is positioned to the right */
}


.product-arrow {
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    z-index: 1;
    text-decoration: none;
}

.product-arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
    text-decoration: none;
    color: #fff;
}

.product-arrow-2 {
    top: 10px;
    right: 10px;
    background: transparent;
    border: 2px solid #7A958F;
    color: #7A958F;
    width: 65px;
    height: 65px;
    font-size: 25px;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #282728;
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.owl-nav .owl-prev {
    left: -20px;
}

.owl-nav .owl-next {
    right: -20px;
}

/* Corporate Gifting Section */
.video-thumbnail {
    position: relative;
    max-width: 100%;
}

.video-thumbnail img {
    border-radius: 15px;
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 50%;
    width: 60px; /* Adjust width to ensure perfect circle */
    height: 60px; /* Height should match the width */
    display: flex; /* Use flexbox to center the icon */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    font-size: 20px;
    text-align: center;
}

.video-play-button i {
    font-size: 20px;
}

/* Partners Section */
.partners-section h2 {
    margin-bottom: 30px;
}

.partners-section img {
    max-width: 100%;
    height: auto;
}

/* Corporate Gifting Solutions Section */
.subheading {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #959697;
    margin-bottom: 0;
}

.corporate-gifting-solutions h2 {
    margin-bottom: 30px;
}

.product-card {
    position: relative;
    /* border-radius: 15px; */
    overflow: hidden;
    /* border: 1.49px solid #E3E3E3;     */
}

.product-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
}


/* Perfectly Personalized Hampers Section with Overlay */
.personalized-hampers-section {
    position: relative;
    background: url('https://backbenchersindia.in/assets/img/hampers-background.png') no-repeat center center;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 100px 0; /* Adjust padding for the height you want */
    z-index: 1;
    padding: 100px 0px !important;
}

.personalized-hampers-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
    z-index: -1; /* Places the overlay behind the content */
}

.personalized-hampers-section h2 {
    color: #fff;
}

.personalized-hampers-section p {
    font-size: 20px;
    color: #fff;
    margin-bottom: 30px;
}

.custom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #282728;
    color: #f2e7dd;
    font-family: 'Poppins', sans-serif; /* Updated font */
    font-size: 15px;
    font-weight: 500;
    padding: 6px 10px 6px 24px;
    border-radius: 50px;
    text-decoration: none;
    text-decoration: none !important; /* Ensure no underline */
}

.custom-button .arrow-icon {
    background-color: #f2e7dd;
    color: #282728;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 16px;
}

/* This will prevent any hover styling */
.custom-button:hover, 
.custom-button:focus, 
.custom-button:active {
    color: #f2e7dd !important;
    background-color: #282728 !important;
}

.custom-button i {
    color: inherit;
}

.custom-button-2 {
    background-color: #f2e7dd;
    color: #282728;
}

.custom-button-2 .arrow-icon {
    background-color: #282728;
    color: #f2e7dd;
}

/* This will prevent any hover styling */
.custom-button-2:hover, 
.custom-button-2:focus, 
.custom-button-2:active {
    color: #282728 !important;
    background-color: #f2e7dd !important;
}

/* Bulk of Joy Section */
.bulk-of-joy-section img {
    border-radius: 15px;
}

.bulk-of-joy-section h2 {
    color: #333;
}

.bulk-of-joy-section p {
    font-size: 20px;
    color: #959697;
    margin-bottom: 20px;
}

/* Trending Section */
.trending-section h2 {
    margin-bottom: 30px;
}

.trending-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 650px; /* Set fixed height for the product card */
    margin-bottom: 10px;
}

.trending-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container */
    border-radius: 15px 15px 0 0; /* Rounded corners for top */
}

/* Text Overlay */
.product-text {
    position: absolute;
    bottom: 80px; /* Adjust to position the text above the button */
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    padding: 0px;
    text-align: center;
    margin: 0px 20px;
    border-radius: 10px;

}


.corporate-gifting-solutions .product-text {
    bottom: 20px !important;
}

.product-text h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    color: #333;
    white-space: nowrap;       /* Ensures the text does not wrap to a new line */
    overflow: hidden;          /* Hides the text that overflows the container */
    text-overflow: ellipsis;   /* Adds an ellipsis (...) for any overflowed text */
    display: block;            /* Ensures the element behaves as a block-level element */
    width: 100%;               /* Set width based on the parent container, adjust as needed */
}

.product-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #959697;
}

/* Button Overlay */
.product-button {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* background-color: #f5efe8; */
    text-align: center;
    padding: 20px;
}

.product-text h5, .product-text p{
    text-align: left;
    padding-left: 20px;
    padding-bottom: 3px;
    font-weight: bold;
}


.trending-section .product-text {
    background-color: #F1E7DDB2;
}

.trending-section .product-text p, .trending-section .product-text h5 {
    text-align: center;
    padding-left: 0px;
    color: #282728;
}

/* Reviews Section */
.reviews-section h2 {
    margin-bottom: 30px;
}

.review-card {
    background-color: #f8f9fa; /* Light grey background */
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    transition: transform 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px); /* Lift on hover */
}

.company-logo {
    width: 80px;
    height: auto;
    margin-bottom: 15px;
}

.review-card h5 {
    font-size: 15px;
    color: #333;
    margin-bottom: 10px;
}

.stars {
    color: #ffc107; /* Gold color for stars */
    margin-bottom: 10px;
}

.stars i {
    margin-right: 5px;
}

.review-card p {
    font-size: 14px;
    color: #959697;
    margin: 0;
}

.footer {
    background-color: #282728; /* Raisin Black color */
    color: #fff;
}

.footer h5 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
}

.footer p, .footer li {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 10px;
}

.footer a {
    color: #fff;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer .list-unstyled li {
    margin-bottom: 8px;
}

.footer .form-group {
    position: relative;
}

.footer .form-control {
    border-radius: 0px;
    padding-left: 20px;
    padding-right: 50px;
}

.footer .social-icons a {
    margin-right: 10px;
    font-size: 20px;
    color: #fff;
}


.footer .social-icons {
    margin-top: 10px;
}

.footer .text-center p {
    margin-top: 20px;
    font-size: 14px;
    color: #ccc;
}


/* Category Header */
.category-header-section {
    background-color: #f8f9fa;
}

.category-title {
    font-family: 'Poppins', sans-serif;
    font-size: 60px;
    color: white;
    margin-bottom: 15px;
}

.category-description-top {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: white;
    margin-bottom: 30px;
}

.category-description-bottom {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #959697;
}

/* Products Section */
.product-info h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #333;
}

.product-info .price {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #282728;
}

/* Pagination */
.pagination .page-link {
    color: #282728;
}

.pagination .page-link:hover {
    background-color: #f5efe8;
    color: #282728;
}

.pagination .page-item.active .page-link {
    background-color: #282728;
    border-color: #282728;
}


/* General Styles */
.product-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #333;
}

.product-price {
    font-size: 22px;
    color: #ff5722;
    margin-bottom: 20px;
}

.product-description {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #959697;
}


.product-thumbnails {
    max-width: 100px; /* Adjust as needed */
    text-align: center;
}

.thumbnail-container img {
    border-radius: 10px;
    width: 80px; /* Set fixed width for thumbnails */
    height: 80px; /* Ensure the height matches width */
    object-fit: cover;
    cursor: pointer;
    transition: border 0.3s ease;
}

.thumbnail-container img:hover {
    border: 2px solid #000; /* Highlight the thumbnail on hover */
}

/* Main Image Container */
.main-image-container {
    text-align: center;
    border-radius: 15px;
    /* max-width: 500px; */
    margin: auto;
    margin-bottom: 20px; /* Add space below the main image to avoid overlap */
}

.main-image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
}

/* Thumbnails Container */
.thumbnails-wrapper {
    display: flex;
    justify-content: center; /* Align thumbnails to center */
    gap: 10px; /* Add space between each thumbnail */
    margin-top: 10px; /* Space between main image and thumbnails */
}

.product-thumbnails {
    display: flex;
    flex-wrap: wrap; /* Allow thumbnails to wrap if there are many */
}

/* Thumbnail Styling */
.thumbnail-container {
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.thumbnail-container img {
    width: 60px; /* Set consistent thumbnail width */
    height: auto;
    object-fit: cover;
}

.thumbnail-container:hover {
    transform: scale(1.1); /* Slight enlargement on hover */
}

/* Scroll Arrow for Hidden Thumbnails */
.scroll-arrow {
    cursor: pointer;
    color: #000;
    margin-top: 10px; /* Add some space above the scroll arrow */
    text-align: center;
}

.hidden-thumbnail {
    display: none; /* Initially hiding thumbnails beyond the 4th one */
}

.cloud-zoom-container {
    margin-left: 20px; /* Reducing the space between the thumbnails and main image */
}

.price-section {
    display: flex;
    align-items: center;
    gap: 4px; /* Adjusts the space between sale price and MRP */
}


.mrp s {
    color: #959697; /* Strike-through color for MRP */
}

.mrp-text {
    font-size: 12px;
    color: #959697;
    margin-left: 5px; /* Space between MRP and the text "MRP Inclusive of all taxes" */
}

/* Full-width Add to Cart Button */
.btn-block {
    display: block;
    width: 100%;
    padding: 12px;

    background-color: #282728; /* Dark background color */
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 5px;
    text-align: center;
}

.btn-block:hover {
    background-color: #000;
}

/* Additional Sections Styling */
.additional-options {
    margin-top: 30px;
}


.gift-option {
    font-size: 14px;
    color: #282728;
}

.check-delivery input {
    flex-grow: 1;
    border-radius: 5px;
    display: inline-block;
    width: calc(100% - 100px); /* Makes room for button */
}

.check-delivery button {
    width: 100px;
    border-radius: 5px;
}

/* Service Icons Styling */
.services-icons .service-icon {
    background-color: #f8f8f8;
    border-radius: 10px;
    padding: 20px;
    padding-top: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.service-icon i {
    font-size: 20px;
    color: #282728;
    /* background-color: #eaeaea; */
    padding: 10px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.service-icon p {
    font-size: 14px;
    color: #282728;
}


.terms {
    font-size: 14px;
    color: #999;
}

.terms a {
    color: #e74c3c;
    text-decoration: underline;
}

/* Size and Color Selection */
.size-options .size-option {
    margin-right: 10px;
}

.color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin-right: 10px;
    cursor: pointer;
}

.partner-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Set the fixed height of the container */
}

.partner-logo-container img {
    max-height: 80px; /* Limit the max height */
    max-width: 100%; /* Ensure the image does not overflow */
    object-fit: contain; /* Make sure the image scales correctly */
}



.custom-modal {
    border-radius: 15px;
    overflow: hidden;
}

.modal-header {
    border-bottom: none;
    text-align: center;
}

.modal-dialog {
    max-width: 800px;
}


.custom-container {
    padding-right: 40px; /* Padding for left and right */
    padding-left: 40px;
    margin-right: auto; /* Center horizontally */
    margin-left: auto;
}



.contact-form .form-control {
    background-color: #f9f9f9;
    border: none;
    border-radius: 50px;
    padding: 10px 10px;
}

.contact-form .textarea-form-control {
    background-color: #f9f9f9;
    border: none;
    border-radius: 20px;
    padding: 10px 10px;
}

.textarea-form-control {
    padding: 20px 20px !important;
}

.contact-form .form-control:focus {
    border-color: #ddd;
    box-shadow: none;
}

.contact-form .form-group label {
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.contact-form .btn-submit {
    background-color: #242124;
    border-radius: 50px;
    padding: 10px 30px;
    color: #fff;
    border: none;
}

.contact-form .btn-submit:hover {
    background-color: #333;
    color: #fff;
}

.contact-img-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.contact-img-placeholder img {
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}




.contact-info-section {
    background-color: #f9f9f9;
}

.contact-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.contact-card:hover {
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}

.contact-icon {
    font-size: 40px;
    color: #242124;
    margin-bottom: 15px;
}

.contact-heading {
    font-family: 'Halvar Breitschrift', sans-serif;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.contact-text {
    font-size: 14px;
    color: #666;
}

.contact-card p {
    margin-bottom: 0;
}




@media (max-width: 768px) {
    .trending-card {
        height: 550px; /* Set fixed height for the product card */
    }
    
    /* For mobile view, adjust the layout */
    .product-card h5 {
        /* height: 47px; */
        margin-top: 0px;
        font-size: 14px;
    }

    .product-thumbnails {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .main-image-container {
        max-width: 100%;
    }
    .navbar-collapse {
        background-color: white !important; /* Raisin Black for mobile view */
        padding-left: 10px;
    }
    .navbar-toggler {
        border-color: #282728; /* Optional: Change the border color of the toggle button */
    }
    .owl-carousel .item {
        margin-right: 15px; /* Adjust the spacing between items on mobile */
    }

    .nav-right {
        display: none;
    }

    .display-4 {
        font-size: 42pt;
    }
    #navbar-logo {
        height: 70px;
    }

    .product-detail a h5 {
        margin-bottom: 0px !important;
    }


}


/* Mega Dropdown Menu Full Width */
.mega-dropdown-menu {
    position: absolute !important; /* Ensure it's positioned absolutely in the document */

    left: 0; /* Start from the extreme left of the screen */
    width: 100vw; /* Full viewport width */
    padding: 20px 0;
    z-index: 9999;
    font-size: 12px;
}

.mega-dropdown-menu .container {
    max-width: 100%; /* Remove max-width limit */
    padding-left: 30px;
    padding-right: 30px;
}

.mega-menu h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #333;
}

.mega-menu ul {
    padding-left: 0;
    list-style: none;
}

.mega-menu ul li {
    margin-bottom: 10px;
}

.mega-menu ul li a {
    text-decoration: none;
    color: #333;
}

.mega-menu ul li a:hover {
    text-decoration: underline;
}

.mega-menu img {
    border-radius: 10px;
    max-width: 100%;
    height: auto;
}



/* Cart Badge Styling */
#cart-count-badge {
    position: absolute;
    top: -8px; /* Adjust to properly place it above the icon */
    right: -10px; /* Adjust to properly place it to the right of the icon */
    background-color: #dc3545; /* Red color for the badge */
    color: white; /* White text color */
    padding: 3px 6px; /* Padding for badge */
    border-radius: 50%; /* Circular badge */
    font-size: 0.75rem; /* Small font size */
    font-weight: bold; /* Make the number bold */
    display: flex; /* Flex to center align text */
    align-items: center;
    justify-content: center;
    width: 20px; /* Fixed size for consistent badge appearance */
    height: 20px;
}

/* Cart Icon Container Adjustment */
.cart-container3 {
    position: relative; /* Needed for positioning the badge correctly within the container */
}

/* Other Adjustments */
.nav-item {
    margin-right: 3px; /* Add some spacing between nav items */
}



/* .corporate-gifting-section h2 {
    font-size: 40px;
}

.corporate-gifting-section p {
    font-size: 20px;
} */

/* Mobile View - Show dropdown as submenus */
@media (max-width: 768px) {
    .why-choose-us {
        display: none;
    }

    h2 {
        text-align: center;
    }
    .corporate-gifting-section h2 {
        margin-bottom: 25px;
    }
    .corporate-gifting-section p {
        text-align: center;
        margin-top: 35px;
    }

    .mega-dropdown-menu {
        width: 100%; /* Still take full width on mobile */
        left: 0;
        right: 0;
        position: static;
    }

    .navbar-brand, .navbar-nav .nav-link {
        padding-left: 0px;
    }

    .mega-menu .dropdown-menu .row {
        flex-direction: column;
    }

    .mega-menu img {
        margin: 0 auto;
    }

    .product-arrow {
        width: 40px;
        height: 40px;
    }
    .product-detail {
        padding: 0px;
    }
    
}
       

@media (min-width: 576px) {
    .custom-container {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (min-width: 768px) {
    .custom-container {
        padding-right: 40px;
        padding-left: 40px;
    }
}

@media (min-width: 992px) {
    .custom-container {
        padding-right: 60px;
        padding-left: 60px;
    }
}

@media (min-width: 1200px) {
    .custom-container {
        padding-right: 80px;
        padding-left: 80px;
    }

}


/* Styling for the accordion */
#customizationAccordion .card-header {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

#customizationAccordion .btn-link {
    text-decoration: none;
    font-weight: bold;
    color: #000;
}

#customizationAccordion .btn-link:hover {
    color: #007bff;
    text-decoration: underline;
}

/* Quantity Selector Styles */
.quantity-selector .btn-outline-secondary {
    width: 40px;
    height: 40px;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

.quantity-selector input {
    width: 60px;
    font-size: 18px;
    height: 40px;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    background-color: transparent !important;
}

.quantity-selector {
    margin-right: 20px;
}

.product-action .add-cart {
    flex-grow: 1; /* Ensures the Add to Cart button takes the remaining space */
    white-space: nowrap; /* Prevents the button text from breaking */
}

#totalPrice {
    font-size: 18px;
    font-weight: bold;
    color: #242124;
}

    /* Wrapper for making the thumbnails scrollable */
.thumbnails-wrapper {
    overflow-x: auto; /* Enables horizontal scrolling */
    white-space: nowrap; /* Ensures items are not wrapping to the next line */
    padding-bottom: 10px; /* Optional: adds space at the bottom */
}

/* Thumbnails within the scrollable container */
.scrollable-thumbnails {
    display: flex; /* Arranges thumbnails in a row */
    align-items: center; /* Vertically aligns items to the center */
}

/* Thumbnail styling */
.thumbnails-wrapper img {
    width: 80px; /* Adjust width as desired */
    height: auto;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin: 4px;
}

.mrp {
    text-decoration: line-through;
}


/* Apply this only for mobile screens */
@media (max-width: 768px) {
    .tab-pane {
        overflow-x: auto; /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS devices */
    }

    .tab-pane img {
        max-width: 100%; /* Ensure images are responsive and don't exceed the container width */
        height: auto;
    }

    /* If the images are too large and you want to control the width */
    .tab-pane img {
        width: 100%; /* or a fixed width like width: 200px; */
    }
}


/* Styling the product images to be swipeable */
.owl-carousel .item {
    text-align: center;
}

/* Thumbnails hidden on mobile (shown only on desktop) */
.thumbnails-wrapper {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.thumbnails-wrapper img {
    cursor: pointer;
    transition: transform 0.2s;
}

.thumbnails-wrapper img:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}


/* For mobile responsiveness */
@media (max-width: 768px) {
    .thumbnails-wrapper {
        display: none; /* Hide thumbnails on mobile */
    }
}


.product-image-4 {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 325 / 525;
    /* border-radius: 5px; */
}
.product-gallery-4 .col-6 {
    padding: 3px !important;

}

@media (min-width: 576px) {
    .modal-sm-custom .modal-dialog {
        max-width: 400px; /* Adjust width as needed */
    }

}

@media (max-width: 576px) {

    .product-title {
        margin-top: 20px;
    }
}

.modal-body img {
    width: 100% !important;
}

.size-chart-a {
    font-size: 14px;
}

/* Display Settings for Mobile and Desktop */
.d-md-none { display: block; } /* Show on mobile only */
.d-md-flex { display: none; }   /* Hide on mobile */

@media (min-width: 768px) {
    .d-md-none { display: none; }  /* Hide Owl Carousel on larger screens */
    .d-md-flex { display: flex; }  /* Show Grid Gallery on larger screens */
}


b {
    font-size: 16px;
    color: #282728;
}

.price-section {
    position: relative;
    font-size: 1.2rem;
}

.mrp {
    color: #959697;
    margin-left: 8px;
}

.discount {
    color: red;
    font-weight: bold;
    margin-left: 8px;
}

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

.info-icon {
    font-size: 16px;
    color: #666;
    background-color: #eee;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    margin-left: 8px;
    width: 40px;
    height: 40px;
    text-align: center;
}

.tooltip-content {
    display: none;
    position: absolute;
    top: 35px;
    right: 0;
    width: 230px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.tooltip-content .title {  
    font-size: 12px;
    font-weight: 500;
}

.tooltip-content::before {
    position: absolute;
    top: -5px;
    left: 10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #ddd transparent;
}

.price-breakdown {
    color: #505050;
}

.price-breakdown p {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: 10px;

}

.savings {
    font-size: 9px;
    color: #3E8D6C;
    font-weight: 500;
    margin-top: 5px;
    margin-bottom: 0px;
}



.product-title {
    font-size: 24px;
    color: #282728;
    font-family: 'Poppins', sans-serif;
}

.category-desc {
    font-family: 'Poppins', sans-serif;
    color: #505050;
    font-size: 16px;
}

hr {
    background: #95969799;
}

.mrp-text {
    font-family: 'Poppins', sans-serif;
    color: #4F5052;
    font-size: 12px;
}

.sale-price {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #C90707;
}

.mrp {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #AFAFAF;

}

.discount {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #FF4141 !important;
}

.text-5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #282728;
}

.color-swatch {
    width: 40px;
    height: 40px;
}

.size-option-label {
    width: 45px;
    border: 1px solid #D9D9D9;
    border-radius: 4px;


    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #4F5052;
    text-align: center;
    
    padding: 4px;
}

.size-option-label:hover, .size-option-input:checked + .size-option-label {
    border-color: #000000;
    background: unset;
    color: unset;
    transform: unset;
}

.toast-link:hover {
    color: white !important;
}

.add-to-cart-btn {
    font-family: 'Poppins', sans-serif;
    border: unset;
    background-color: #000000;
    border: 1px solid #000000;
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 16px;
    padding: 10px 0px;
}

.add-to-cart-btn:hover {
    color: #FFFFFF;
}

.buy-now-btn {
    font-family: 'Poppins', sans-serif;
    border: unset;
    background-color: #ffffff;
    border: 1px solid #000000;
    color: #000000;
    border-radius: 8px;
    font-size: 16px;
    padding: 10px 0px;
}

.btn-secondary {
    background-color: #000000;
    padding: 11px 20px;
    height: 46px;
    border-radius: 0px;
    font-family: 'Poppins', sans-serif;
    color: #FFFFFF;
    font-size: 16px;
}

#pincodeInput {
    height: 46px;
}

.services-icons p {
    font-size: 13px;
    color: #282728;
}

.terms {
    font-size: 15px;
    color: #212121;

}

.terms a {
    color: #212121;
}

.product-card .sale-price {
    font-size: 20px;
}

.product-card  .mrp {
    font-size: 15px;
}

.product-card .discount-percentage {
    color: #3E8D6C;
    font-size: 15px;
    margin-left: 5px; /* Space between MRP and the text "MRP Inclusive of all taxes" */

}

/* Mobile-Only CSS for .product-card */
@media (max-width: 768px) {
    .product-card .sale-price {
        font-size: 16px;
    }

    .product-card .mrp,
    .product-card .discount-percentage {
        font-size: 12px;
    }

    .product-card .discount-percentage {
        margin-left: 5px; /* Space between MRP and discount percentage */
    }
}


/* Mobile-only styles */
@media (max-width: 768px) {
    .product-item {
        margin: 0px;
        padding: 0px;
    }

    .product-card {
        border-radius: 0px;
    }

    .add-to-cart-btn, .buy-now-btn {
        font-size: 16px;
    }


    .navbar {
        height: unset;
        padding: 0px 8px;
    }

    .custom-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.dropdown-item.active, .dropdown-item:active {
    background: unset;
}

/* Desktop-only styles */
@media (min-width: 769px) {
    .product-item {
        margin-bottom: 1.5rem; /* Equivalent to mb-4 */
    }
}

.product-gallery-section {
    padding: 0px;
}

.related-product h2 {
    font-weight: 500;
    font-size: 28px;
    color: #282728;
}

.category-filter-button {
    border: 1px solid #282728;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 14px;
    color: #282728;
}        

.shop-all-btn a {
    color: black;
    text-decoration: underline;
}
@media (min-width: 768px) {

   
    /* Main menu items - always white */
    .navbar .navbar-nav > .nav-item > .nav-link {
        color: #ffffff !important; /* White color */
        text-decoration: none;
    }

    .navbar .navbar-nav > .nav-item > .nav-link:hover,
    .navbar .navbar-nav > .nav-item > .nav-link:focus,
    .navbar .navbar-nav > .nav-item > .nav-link:active {
        color: #ffffff !important; /* White color on hover, focus, and active */
    }


    .navbar .dropdown-menu .dropdown-item {
        color: #000000 !important; /* Black color for dropdown items */
        text-decoration: none;
    }

    .navbar .dropdown-menu .dropdown-item:hover,
    .navbar .dropdown-menu .dropdown-item:focus,
    .navbar .dropdown-menu .dropdown-item:active {
        color: #000000 !important; /* Black color on hover, focus, and active */
    }

    /* Cart, search, and user icons - always white */
    .navbar .nav-right .nav-link {
        color: #ffffff !important;
    }

    .navbar .nav-right .nav-link:hover,
    .navbar .nav-right .nav-link:focus,
    .navbar .nav-right .nav-link:active {
        color: #ffffff !important;
    }

    /* Dropdown icon in white */
    .navbar .dropdown-toggle::after {
        color: #ffffff; /* White color for dropdown arrow */
    }

}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-light .navbar-toggler {
    border-color: white !important;
}




a.list-group-item:hover {
    color: black;
    font-weight: bold;
}

/* General styling for the navbar */
.sticky-navbar {
    z-index: 1030; /* Ensure the navbar is above other content */
}
.sticky-navbar {
    position: sticky;
    top: 0; /* Navbar will stick to the top */
    z-index: 1030; /* Ensure it's above other elements */
    background-color: #f8f9fa; /* Add a background color if needed */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
}




/* Full-screen Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.98); /* Light background with some opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Make sure it's above all content */
    opacity: 1;
    transition: opacity 0.5s ease-out; /* Smooth fade-out transition */
    visibility: visible; /* Ensure visibility */
}

/* Hide the loading overlay after page load */
.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Prevent interaction after hiding */
    visibility: hidden; /* Hide the element after fading out */
}

/* Loading Spinner */
.loading-icon {
    border: 4px solid transparent;
    border-top: 4px solid #3498db; /* Blue color for spinner */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite; /* Infinite spinning animation */
}

/* Spinner Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.navbar-brand:hover, .navbar-nav .nav-link:hover, .nav-link i:hover {
    color: black !important;
}


/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #000;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    border-radius: 50%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
    display: none; /* Hidden by default */
    transition: opacity 0.3s ease, transform 0.3s ease;
}


/* Add smooth scrolling */
html {
    scroll-behavior: smooth;
}