/*
Theme Name: FoodMart
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: FoodMart is specially designed product packaged for eCommerce store websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page


/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
    /* widths for rows and containers
     */
    --header-height: 160px;
    --header-height-min: 80px;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 800px) {
    :root {
        --header-height: 100px;
        --header-height-min: 80px;
    }

    .magnify_product {
        display: block;
    }

    .details_mobile {
        margin-top: 1rem;
        flex-direction: unset !important;
    }
}

@media (max-width: 768px) {
    .banner_img img {
        aspect-ratio: 10/5;
        /* make it a little taller on mobile if needed */
    }

    .banner_content {
        position: absolute !important;
        top: 20%;
        left: 2% !important;
    }
}

/* Theme Colors */
:root {
    --title-color: #29348e;
    --accent-color: #ffc43f;
    --dark-color: #222222;
    --light-dark-color: #727272;
    --light-color: #fff;
    --grey-color: #dbdbdb;
    --light-grey-color: #fafafa;
    --primary-color: #ce8b10;
    --light-primary-color: #e1e1e1;
    --bg-secondary-color: #f3e6be;
    --bg-blog-link-color: #fdf5e3;
    --light-white: #f5f8fa;
    --gray: #5e6278;
    --gray-1: #e3e3e3;
}

/* Fonts */
:root {
    --body-font: "Open Sans", sans-serif;
    --heading-font: "Nunito", sans-serif;
}

body {
    overflow-x: hidden;
    --bs-link-color: #333;
    --bs-link-hover-color: #333;

    --bs-link-color-rgb: 40, 40, 40;
    --bs-link-hover-color-rgb: 0, 0, 0;

    /* --bs-link-color: #FFC43F;
  --bs-link-hover-color: #FFC43F; */

    --bs-light-rgb: 248, 248, 248;

    --bs-font-sans-serif: "Open Sans", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 2;
    --bs-body-color: #747474;

    --bs-primary: #ffc43f;
    --bs-title: #29348e;
    --bs-primary-rgb: 255, 196, 63;

    --bs-success: #a3be4c;
    --bs-success-rgb: 163, 190, 76;

    --bs-primary-bg-subtle: #fff9eb;
    --bs-success-bg-subtle: #eef5e5;

    /* --bs-border-color: #F7F7F7; */
    --bs-border-color: #f8f7f1;

    --bs-secondary-rgb: 230, 243, 251;
    /* --bs-success-rgb: 238, 245, 228; */
    --bs-danger-rgb: 249, 235, 231;
    --bs-warning-rgb: 255, 249, 235;
    --bs-info-rgb: 230, 243, 250;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ffc43f;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f7a422;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ffc43f;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #d3d7dd;
    --bs-btn-disabled-border-color: transparent;
}

.btn-outline-primary {
    --bs-btn-color: #ffc43f;
    --bs-btn-border-color: #ffc43f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ffc107;
    --bs-btn-hover-border-color: #ffc107;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ffc107;
    --bs-btn-active-border-color: #ffc107;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff3cd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #fff3cd;
    --bs-gradient: none;
}

.btn-outline-light {
    --bs-btn-color: #747474;
    --bs-btn-border-color: #efefef;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #efefef;
    --bs-btn-hover-border-color: #efefef;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #efefef;
    --bs-btn-active-border-color: #efefef;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #efefef;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #efefef;
    --bs-gradient: none;
}

.btn-warning {
    --bs-btn-color: #747474;
    --bs-btn-bg: #fcf7eb;
    --bs-btn-border-color: #fcf7eb;
    --bs-btn-hover-color: #747474;
    --bs-btn-hover-bg: #ffecbe;
    --bs-btn-hover-border-color: #ffecbe;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffecbe;
    --bs-btn-active-border-color: #ffecbe;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #fcf7eb;
    --bs-btn-disabled-border-color: #fcf7eb;
}

.btn-success {
    --bs-btn-color: #222;
    --bs-btn-bg: #eef5e4;
    --bs-btn-border-color: #eef5e4;
    --bs-btn-hover-color: #222;
    --bs-btn-hover-bg: #9de3c2;
    --bs-btn-hover-border-color: #9de3c2;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #222;
    --bs-btn-active-bg: #9de3c2;
    --bs-btn-active-border-color: #9de3c2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #222;
    --bs-btn-disabled-bg: #eef5e4;
    --bs-btn-disabled-border-color: #eef5e4;
}

.btn-danger {
    --bs-btn-color: #222;
    --bs-btn-bg: #ffeada;
    --bs-btn-border-color: #ffeada;
    --bs-btn-hover-color: #222;
    --bs-btn-hover-bg: #ecc9af;
    --bs-btn-hover-border-color: #ecc9af;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #222;
    --bs-btn-active-bg: #ecc9af;
    --bs-btn-active-border-color: #ecc9af;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #222;
    --bs-btn-disabled-bg: #ffeada;
    --bs-btn-disabled-border-color: #ffeada;
}

body {
    letter-spacing: 0.03em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    color: var(--dark-color);
    font-weight: 700;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-weight: 700;
}

.breadcrumb.text-white {
    --bs-breadcrumb-divider-color: #fff;
    --bs-breadcrumb-item-active-color: var(--bs-primary);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

.nav-pills .nav-link {
    --bs-nav-pills-link-active-color: #111;
    --bs-nav-pills-link-active-bg: #f1f1f1;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    --bs-gutter-x: 3rem;
}

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 111;
    background: #fff;
}

.preloader-wrapper .preloader {
    margin: 20% auto 0;
    transform: translateZ(0);
}

.preloader:before,
.preloader:after {
    content: "";
    position: absolute;
    top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
    border-radius: 50%;
    width: 2em;
    height: 2em;
    animation: animation 1.2s infinite ease-in-out;
}

.preloader {
    animation-delay: -0.16s;
}

.preloader:before {
    left: -3.5em;
    animation-delay: -0.32s;
}

.preloader:after {
    left: 3.5em;
}

@keyframes animation {
    0%,
    80%,
    100% {
        box-shadow: 0 2em 0 -1em var(--accent-color);
    }

    40% {
        box-shadow: 0 2em 0 0 var(--accent-color);
    }
}

/* *** Start editing below this line *** */
.container-fluid {
    max-width: 1600px;
}

.banner-blocks {
    padding: 2rem;

    /* display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 2rem; */
}

.main-section {
    background-color: #f8f7f1;
}

header {
    background-color: #f8f7f1;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
}

.block-1 {
    grid-area: 1 / 1 / 3 / 7;
}

.block-2 {
    grid-area: 1 / 8 / 3 / 19;
}

/* .block-3 {
  grid-area: 2 / 8 / 3 / 13;
} */

@media screen and (max-width: 1140px) {
    .banner-blocks {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .block-1 {
        grid-area: 1 / 1 / 3 / 2;
    }

    .block-2 {
        grid-area: 3 / 1 / 4 / 2;
    }

    .block-3 {
        grid-area: 4 / 1 / 5 / 2;
    }
}

/* banner ad */
.banner-ad {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.banner-ad.blue {
    background: #e6f3fb;
}

.banner-ad .swiper-pagination {
    bottom: 40px;
    left: 0;
    right: 0;
}

.banner-ad .swiper-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    margin: 4px;
    background: #fff;
    opacity: 1;
    transition: background 0.3s ease-out;
}

.banner-ad
    .swiper-pagination
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #ffc43f;
}

.banner-ad .swiper-slide {
    min-height: 630px;

    display: flex;
}

/* .banner-ad .banner-content {
  padding: 52px;
}
.banner-ad.large .banner-content {
  padding: 90px;
} */
.banner-ad .banner-content .categories {
    font-family: "Garamond";
    font-size: 37px;
    text-transform: capitalize;
    color: var(--dark-color);
}

.banner-ad .banner-content .sale {
    position: relative;
    display: inline-block;
}

.banner-ad .banner-content .sale:before {
    content: "";
    width: 80px;
    border-bottom: 1px solid #111;
    position: absolute;
    bottom: 6px;
}

.banner-ad .banner-content .sale:after {
    content: "SALE";
    font-family: var(--body-font);
    position: absolute;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #252525;
    bottom: 0;
    right: 0;
}

.banner-ad .banner-content .banner-title {
    letter-spacing: 0.02em;
    font-size: 33px;
}

.banner-ad.large .banner-content .categories {
    color: var(--accent-color);
}

.banner-ad.large .banner-content .banner-title {
    font-size: 54px;
}

/* Swiper carousel */
.swiper-prev,
.swiper-next {
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #f1f1f1;
    color: #222222;
    padding: 0;
    text-align: center;
    border-radius: 10px;
    --bs-btn-border-color: transparent;
    --bs-btn-active-bg: #ec9b22;
    --bs-btn-active-border-color: transparent;
    --bs-btn-hover-bg: #ffc43f;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-disabled-color: #ccc;
    --bs-btn-disabled-bg: #eaeaea;
    --bs-btn-disabled-border-color: #eaeaea;
}

.swiper-prev:hover,
.swiper-next:hover {
    background: #ffc43f;
}

.btn-link {
    margin-right: 30px;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    text-align: right;
    text-transform: capitalize;
    color: #787878;
}

/* category carousel */
.category-carousel .category-item {
    background: #ffffff;
    border: 1px solid #fbfbfb;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    text-align: center;
    padding: 60px 20px;
    margin: 20px 0;
    transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

.category-carousel .category-item:hover {
    transform: translate3d(0, -10px, 0);
    box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}

.category-carousel .category-item .category-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 27px;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #222222;
    margin-top: 20px;
}

/* brand carousel */
.brand-carousel .brand-item {
    background: #ffffff;
    border: 1px solid #fbfbfb;
    box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    padding: 16px;
}

.brand-carousel .brand-item img {
    width: 100%;
    border-radius: 12px;
}

.brand-carousel .brand-item .brand-details {
    margin-left: 15px;
}

.brand-carousel .brand-item .brand-title {
    margin: 0;
}

/* product tabs */
.product-tabs .nav-tabs {
    justify-content: flex-end;
    border: none;

    --bs-nav-link-hover-color: #111;
    --bs-nav-link-color: #555;
    --bs-nav-tabs-link-border-color: #fff;
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-border-color: #fff;
}

.product-tabs .nav-tabs .nav-link.active,
.product-tabs .nav-tabs .nav-item.show .nav-link {
    /* border: none; */
    border-bottom: 3px solid var(--accent-color);
}
/* start*/

/* end*/

/* product-grid */
/* .product-grid {
  gap: 25px;
} */
.product-item {
    position: relative;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #f1ecec;
    box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
    border-radius: 50% 49% 6% 6% / 27% 29% 6% 5%;
    margin-bottom: 30px;
    transition: box-shadow 0.3s ease-out;
    /* border: 1px solid var(--bs-btn-color); */
}

.product-item:hover {
    box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}

.btn-success:hover {
    /* background-color: var(--title-color); */
    background-color: transparent;
    color: white;
}
.product-item figure {
    position: relative;
    top: -20px;
    left: -7%;
    width: 18vw; /* responsive size */
    aspect-ratio: 1 / 1; /* square box */
    text-align: center;
    background: #f2fce4;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* 👈 always circular */
    /* border: 1px solid #6c757d; */
    overflow: hidden; /* image bahar na jaye */
}

/* Carousel product figure - separate class with left: -7% */
.products-carousel .product-item.swiper-slide figure.carousel-product-figure,
.product-item.swiper-slide figure.carousel-product-figure {
    position: relative !important;
    top: -20px !important;
    left: -7% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 18vw !important;
    background: #f2fce4 !important;
    aspect-ratio: 1 / 1 !important;
}

.product-item figure img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 👈 poori image fit hogi, crop nahi */
}

.product-item h3 {
    display: block;
    width: 100%;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    text-transform: capitalize;
    color: #333333;
    margin: 0;
}

.product-image-wrapper {
    width: 100%;
    height: 250px; /* aap apne hisaab se fix height de sakte ho */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px; /* optional, thoda style ke liye */
    background: #f9f9f9; /* agar image transparent ho to background */
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* contain = image cut nahi hogi, pura dikhegi */
    /* agar crop chahiye to object-fit: cover; use karein */
}

.product-item .badge {
    position: absolute;
    z-index: 1;
    left: 32%;
    top: 43%;
}

.product-item figure img {
    width: 80%;
    /* position: absolute; */
    object-fit: contain;
    aspect-ratio: 2/2;
}

.product-item .btn-wishlist {
    position: absolute;
    top: 60%;
    right: 2%;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.2rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #d8d8d8;
    transition: all 0.3s ease-out;
}

.product-item .btn-wishlist:hover {
    background: rgb(240, 56, 56);
    color: #fff;
}

.product-item .qty {
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #9d9d9d;
}

.product-item .rating {
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    text-transform: capitalize;
    color: #222222;
}

.product-item .rating iconify-icon {
    color: #ffc43f;
}

.list-group-item.active {
    background-color: var(--title-color);
    border-color: var(--title-color);
}

.product-item .price {
    display: block;
    width: 100%;
    font-weight: 600;
    font-size: 21px;
    line-height: 30px;
    text-transform: capitalize;
    color: #222222;
}

.product-item .product-qty {
    width: 85px;
}

.product-item .btn-link {
    text-decoration: none;
}

.product-item #quantity {
    height: auto;
    width: 28px;
    text-align: center;
    border: none;
    margin: 0;
    padding: 0;
}

.product-item .btn-number {
    width: 26px;
    height: 26px;
    line-height: 1;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    color: #222;
    padding: 0;
}
.product-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap; /* 👈 Forces single line */
    overflow: hidden; /* 👈 Hides overflow */
    text-overflow: ellipsis; /* 👈 Adds "..." */
    display: block; /* Needed for ellipsis */
    max-width: 100%; /* Keeps it inside container */
    margin-bottom: 0.5rem;
}

/* ✅ Desktop style remains same - only modify for mobile */
@media (max-width: 768px) {
    .feature_card {
        border-radius: 1rem;
        padding: 1rem;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-direction: row; /* keep image + text side by side */
    }

    .feature_card .row.g-0 {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .feature_card .col-md-4 {
        flex: 0 0 35%;
        max-width: 35%;
    }

    .feature_card .col-md-8 {
        flex: 0 0 65%;
        max-width: 65%;
    }

    .feature_img {
        max-width: 100%;
        max-height: 120px;
        border-radius: 50%;
        object-fit: cover;
    }

    .card-body {
        padding: 0;
    }

    .card-body h5 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .card-body p {
        font-size: 0.8rem;
        margin-bottom: 6px;
        color: #555;
    }

    .explore-btn {
        font-size: 0.8rem;
        padding: 6px 12px;
        white-space: nowrap;
    }

    /* Swiper - Show partial next slide for better UX */
    .brand-carousel .swiper-wrapper {
        padding-left: 10px;
    }

    .brand-carousel .swiper-slide {
        width: 85% !important; /* show 1.2 cards per view */
    }
}

.product-item h6 {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* keeps within card */
    margin-bottom: 0.5rem;
    cursor: pointer;
    position: relative;
}

/* Optional hover effect */
.product-item h6:hover::after {
    content: "Show More";
    position: absolute;
    right: 0;
    bottom: -18px;
    font-size: 0.75rem;
    color: #007bff;
    cursor: pointer;
}

/* Hide search completely on mobile */
@media (max-width: 768px) {
    #searchToggle,
    #searchInput {
        display: none !important;
    }

    .cart_badge {
        font-size: 0.65rem;
        background: #f4b400;
    }

    .lp_logo {
        max-height: 16px;
        vertical-align: middle;
        margin-right: 3px;
    }
}

/* cart */
.cart .product-qty {
    min-width: 130px;
}

/* floating image */
.image-float {
    margin-top: -140px;
    margin-bottom: -140px;
}

@media (max-width: 576px) {
    .product-title {
        -webkit-line-clamp: 1; /* Only 1 line on mobile */
        max-height: 1.6em;
    }
}

@media screen and (max-width: 991px) {
    .image-float {
        margin: 0;
    }
}

/* post item */
.post-item .post-meta {
    font-size: 0.8rem;
    line-height: 1;
}

.post-item .post-meta svg {
    margin-right: 5px;
}

.nav-item.active .nav-link {
    font-weight: bold;
}

@media screen and (max-width: 991px) {
    /* offcanvas menu */
    .offcanvas-body .nav-item {
        font-weight: 700;
        border-bottom: 1px solid #d1d1d1;
    }

    .offcanvas-body .filter-categories {
        width: 100%;
        margin-bottom: 20px !important;
        border: 1px solid #d1d1d1 !important;
        padding: 14px;
        border-radius: 8px;
    }

    /* dropdown-menu */
    .dropdown-menu {
        padding: 0;
        border: none;
        line-height: 1.4;
        font-size: 0.9em;
    }

    .dropdown-menu a {
        padding-left: 0;
    }

    .dropdown-toggle::after {
        position: absolute;
        right: 0;
        top: 21px;
    }
}

/*subscribe page css */

.how-it-works li {
    list-style: none;
}

.how-it-works strong {
    color: rgb(14 13 13 / 82%);
}

/* single product */
/* product-thumbnail-slider */
.product-thumbnail-slider {
    height: 740px;
}

@media screen and (max-width: 992px) {
    .product-thumbnail-slider {
        margin-top: 20px;
        height: auto;
    }
}

@media screen and (min-width: 992px) {
    .product-thumbnail-slider {
        height: 520px;
    }
}

@media screen and (min-width: 1200px) {
    .product-thumbnail-slider {
        height: 740px;
    }
}


/*
@media (max-width: 600px) {
	.product-item figure {
		left: -3%;
	}
    .product-item figure {
		width: 83vw !important;
	}
}
*/
@media (max-width: 768px) {
	.product-item figure {
		left: -3%;
	}
	.changecss figure {
		top: -16px;
		left: -4%;
		width: 86vw !important;
	}
}


@media (min-width: 992px) {
	.changecss figure {
		top: -17px !important;
	} 
}