/*
-------------------------------------------------
  Theme Name: Ralte Grocery eCommerce HTML5 Template
  Theme URL: 
  Author: ayshatech
  Author URL: https://themeforest.net/user/ayshatech
  Creation Date: 22-August-2025
  Description:A default stylesheet for Ralte Grocery eCommerce HTML5 Template
  Version: 1.00
  Primary use: grocery, organic food ,agriculture, food and fruits, food shop, Food Store, fruits and vegetables, healthy food, organic food, organic food and fruits etc.

  ---------------------------------------------------
  Developed By: ayshatech
  Developer URL: https://suraiyaaysha.com/
  Developer: Suraiya Aysha
  Contact: hello.suraiyaaysha@gmail.com
  ---------------------------------------------------

  --------------------------------------------------
  Table of Contents
  --------------------------------------------------
  1. General CSS
  2. Typography CSS
  3. Button CSS
  4. Navbar Area
  5. Preloader Area
  6. Header Area
  7.1. Home 2 Area
  8. Offer 1 Area
  8.1. Home 2 Offer 1 Area
  9. About me Area
  10. Trending Products Area
  11. Organic Natural Products CTA Area
  12. Offer 2 Area
  13. Featured Product Area
  14. Testimonial Area
  15. Blog Area
  16. Blog Details Page
  17. Footer Area
  18. Page Banner
  19. About Page
  20. Shop Page
  21. Shop Details Page
  22. Checkout Page
  23. Contact Page
  24. FAQ Page
  25. Login/Register Page
  26. Wishlist Page
  27. Cart Page
  28. Responsive CSS

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

/*-----------------------------------------------
    1. General Style Start
-------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

body,
html {
    height: 100%;
    margin: 0;
}

body {
    background: var(--bg-primary) none repeat scroll;
    font-size: 1rem;
    font-weight: normal;
    font-family: var(--font-body);
    color: var(--body-font-color);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Theme All Transitions
------------------------------- */
a,
.theme-transition,
#mainNav,
.offcanvas .navbar-nav .nav-item .nav-link,
.navbar .dropdown .dropdown-toggle::after,
.theme-btn,
button,
.owl-carousel button.owl-dot,
.owl-carousel .owl-nav button i,
.testimonial-arrow {
    transition: all .5s ease-in-out;
}

.fast-transition {
    transition: all .3s ease-in-out;
}

.slow-transition {
    transition: all .7s ease-in-out;
}

ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

li {
    list-style-type: none;
}

ul {
    margin: 0;
    padding: 0;
}

a,
a>* {
    outline: none;
    cursor: pointer;
    text-decoration: none;
}

a {
    color: var(--body-font-color);
}

a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

a.active {
    color: var(--primary-color);
}

img::selection {
    background: transparent;
}

.page-link:focus {
    box-shadow: none;
}

/*----Form Control Reset CSS----*/
.form-control,
.form-select {
    background-color: var(--bg-primary);
    height: 50px !important;
    color: var(--body-font-color);
    border: 0;

    padding: 11px 24px;
    font-size: 16px;
    font-weight: normal !important;
    font-family: var(--body-font-family);
    box-shadow: none;
}

.form-control:focus,
.form-control:not(:placeholder-shown) {
    background-color: var(--bg-primary) !important;
    box-shadow: 0 0 0 64px var(--bg-primary) inset !important;
    border-color: #86b7fe;
    color: var(--black-color) !important;
}

.form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .0) !important;
}

.form-control::placeholder {
    color: var(--body-font-color);
}

.btn-check:checked+.btn:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible,
.btn:first-child:active:focus-visible,
:not(.btn-check)+.btn:active:focus-visible {
    box-shadow: none;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: inherit;
    background-color: transparent;
    border-color: transparent;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: 0 auto -webkit-focus-ring-color !important;
    outline-offset: 0;
}

.btn:hover {
    color: initial;
    border: none;
    border-color: transparent;
}

.input-group-text {
    font-size: 14px;
}

textarea {
    min-height: 100px !important;
    height: auto !important;
    border-radius: 0 !important;
}

label {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: normal;
}

/*------------------------------------------
    2. Typography
-------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--heading-black-color);
    font-family: var(--font-heading);
    font-weight: normal;

}

h1,
.h1 {
    font-size: 3.875rem;
    font-weight: bold;
}

h2,
.h2 {
    font-size: 2.8125rem;
    font-weight: bold;
}

h3,
.h3 {
    font-size: 2.25rem;
    font-weight: bold;
}

h4,
.h4 {
    font-size: 1.875rem;
    font-weight: bold;
}

h5,
.h5 {
    font-size: 1.5rem;
    font-weight: bold;
}

h6,
.h-6 {
    font-size: 1.375rem;
    font-weight: bold;
}

.page-banner-title {
    font-size: 130px;
    line-height: 119px;
}

.big-para {
    font-size: 18px;
    line-height: 25px;
}

p {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: normal;
    font-family: var(--font-body);
    color: var(--body-font-color);
}

.fw-black {
    font-weight: 900;
}

figure {
    margin: 0 0 0;
}

/*--------------------------------
    2.1 Theme Color
-----------------------------------*/
:root {
    --navbar-bg: #05060e;

    --footer-bg: #151515;

    --white-color: #fff;
    --black-color: #151a33;

    --bg-primary: #fff;
    --bg-secondary: #f5f5f5;

    --heading-white-color: #fff;
    --heading-black-color: #151a33;
    --body-font-color: #6b6b84;

    --border-color: #dddddd;
    --border-light-color: #5e5e5e;

    --primary-color: #81ac28;

    --btn-color: #81ac28;

    --green-color: #81ac28;

    --font-body: "Heebo", sans-serif;
    --font-heading: "Roboto", sans-serif;

    --orange-color: #ffc107;
    --red-color: #ff0000;
}

.heading-color {
    color: var(--heading-black-color);
}

.heading-black-color {
    color: var(--heading-black-color);
}

.heading-white-color {
    color: var(--heading-white-color);
}

.font-heading {
    font-family: var(--font-heading);
}

.primary-color {
    color: var(--primary-color) !important;
}

.theme-bg-primary-color {
    background-color: var(--primary-color);
}

.theme-bg-black-color {
    background-color: var(--black-color);
}

.text-black {
    color: var(--black-color) !important;
}

.theme-text-color,
.body-font-color {
    color: var(--body-font-color);
}

.bg-primary-color {
    background-color: var(--bg-primary);
}

.bg-secondary-color {
    background-color: var(--bg-secondary);
}

.footer-bg-color {
    background-color: var(--footer-bg);
}

.theme-border {
    border: 1px solid var(--border-color);
}

.border {
    border: 1px solid var(--border-color) !important;
}

.border-b {
    border-bottom: 1px solid var(--border-color) !important;
}

.primary-bb {
    border-bottom: 1px solid var(--bg-primary-border);
}

.secondary-bb {
    border-bottom: 1px solid var(--bg-secondary-border);
}

.border-t {
    border-top: 1px solid var(--border-color) !important;
}

.orange-color {
    color: var(--orange-color);
}

.green-color {
    color: var(--green-color);
}

.red-color,
.theme-link-red {
    color: var(--red-color);
}

.red-color:hover,
.theme-link-red:hover {
    color: var(--red-color-hover) !important;
}

button.red-color:hover,
a.red-color:hover,
.theme-link-red:hover {
    color: var(--red-color-hover);
}

.orange-color {
    color: var(--orange-color);
}

.bg-orange {
    background-color: var(--orange-color);
}

.bg-green {
    background-color: var(--green-color);
}

.bg-red {
    background-color: var(--red-color);
}

.theme-link {
    color: var(--primary-color);
}

.theme-link:hover {
    color: var(--primary-hover-color) !important;
}

.theme-link-hover:hover {
    color: var(--primary-color);
}

.bg-btn {
    background-color: var(--btn-color);
}

.bg-btn:hover {
    background-color: var(--btn-hover-color);
}

/*--------------------------------
    2.3 Theme padding, margin
-----------------------------------*/
.section-t-space {
    padding-top: 80px;
}

.section-b-space {
    padding-bottom: 80px;
}

.section-t-small-space {
    padding-top: 55px;
}

.section-b-small-space {
    padding-bottom: 55px;
}

.section-t-60-space {
    padding-top: 60px;
}

.section-b-60-space {
    padding-bottom: 60px;
}

.pb-40 {
    padding-bottom: 40px;
}

.p-30 {
    padding: 30px;
}

.pl-30 {
    padding-left: 30px;
}

.pr-30 {
    padding-right: 30px;
}

.pt-30 {
    padding-top: 30px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-15 {
    padding-bottom: 15px;
}
.pb-10 {
    padding-bottom: 10px;
}
.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.p-20 {
    padding: 20px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pt-20 {
    padding-top: 20px;
}

.p-25 {
    padding: 25px;
}

.pb-25 {
    padding-bottom: 25px;
}

.pt-25 {
    padding-top: 25px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-25 {
    margin-top: 25px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-5 {
    margin-bottom: 5px;
}

.me-10 {
    margin-right: 10px;
}

.me-20 {
    margin-right: 20px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.me-20 {
    margin-right: 15px;
}

.mt-25 {
    margin-top: 25px;
}

.mb-25 {
    margin-bottom: 25px;
}

.me-25 {
    margin-right: 25px;
}

.ms-25 {
    margin-left: 25px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.me-30 {
    margin-right: 30px;
}

.mt-50 {
    margin-top: 50px;
}

.me-15 {
    margin-right: 15px;
}

.radius-95 {
    border-radius: 95px;
}

.radius-3 {
    border-radius: 3px;
}

.radius-4 {
    border-radius: 4px;
}

.radius-5 {
    border-radius: 5px;
}

.radius-8 {
    border-radius: 8px;
}

.radius-10 {
    border-radius: 10px;
}

.radius-12 {
    border-radius: 12px;
}

.radius-15 {
    border-radius: 15px;
}

.radius-20 {
    border-radius: 20px;
}

.radius-50 {
    border-radius: 50%;
}

.radius-t-r-0 {
    border-top-right-radius: 0 !important;
}

.radius-t-l-0 {
    border-top-left-radius: 0 !important;
}

.radius-b-r-0 {
    border-bottom-right-radius: 0 !important;
}

.radius-b-l-0 {
    border-bottom-left-radius: 0 !important;
}

/*--------------------------------
    2.3 Theme Font Family, Font Size
-----------------------------------*/
.font-normal {
    font-weight: 400;
}

.font-bold {
    font-weight: 700;
}

.font-semi-bold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.font-light {
    font-weight: 100;
}

.font-36 {
    font-size: 2.25rem;
}

.font-24 {
    font-size: 1.5rem;
}

.font-25 {
    font-size: 1.5625rem;
}

.font-20 {
    font-size: 1.25rem;
}

.font-22 {
    font-size: 1.375rem;
}

.font-18 {
    font-size: 1.125rem;
}

.font-17 {
    font-size: 1.0625rem;
}

.font-16 {
    font-size: 1rem;
}

.font-15 {
    font-size: 0.9375rem;
}

.font-14 {
    font-size: 0.875rem;
}

.font-13 {
    font-size: 0.8125rem;
    line-height: 18px;
}

.font-12 {
    font-size: 0.75rem;
}

.font-11 {
    font-size: 0.6875rem;
}

.font-10 {
    font-size: 0.625rem;
}

/*--------------------------------
   2.4 Template Default CSS
-----------------------------------*/
.container {
    max-width: 1170px;
}

@media only screen and (max-width: 991.98px) {

    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-right: var(--bs-gutter-x, .75rem) !important;
        padding-left: var(--bs-gutter-x, .75rem) !important;
    }
}

section {
    position: relative;
}

.cursor {
    cursor: pointer;
}

.fit-image {
    width: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

/* Avatar CSS */
.avatar-md {
    height: 3.8rem;
    width: 3.8rem;
}

.avatar-xl {
    height: 5.5rem;
    width: 5.5rem;
}

/* Avatar CSS */

/*--------------------------------
   2.5 Template Common CSS
-----------------------------------*/

/*Pagination CSS*/
.pagination li {
    margin: 15px 7.5px 0;
}

.page-item.active .page-link {
    color: var(--white-color);
    background-color: var(--primary-color);
}

.page-item .page-link {
    transition: ease all .5s;
}

.page-item:hover .page-link {
    color: var(--white-color);
    background-color: var(--primary-color);
}

.pagination .page-link i {
    font-size: 24px;
}

.pagination .page-link {
    color: var(--text-primary);
    font-size: 30px;
    line-height: 16px;
    background-color: var(--white-color);
    height: 60px;
    width: 60px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px !important;
    border-radius: 50%;
    border: 0;
}

.page-item:first-child .page-link {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

.page-item:last-child .page-link {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

/*------------------------------------------
    2.Typography
-------------------------------------------*/

/*--------------------------------------------
    3. Button Style
---------------------------------------------*/
.section-btn {
    margin-top: 42px;
}

.btn {
    padding: 0;
}

.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: none;
}

button {
    background-color: transparent;
}

button:focus {
    outline: 0;
}

/*-----Theme Button Style-----*/
.theme-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    outline: none;
    padding: 10px 34px !important;
    min-height: 48px;
    justify-content: center;
    border-radius: 46px;
    color: var(--white-color);
    border: 1px solid transparent;
    font-weight: 500;
    font-size: 1.125em;
    font-family: var(--font-heading);
    font-weight: normal;
    line-height: normal;
    background-color: var(--btn-color);
    text-align: center;
    transition: 400ms;
    text-decoration: none;
    z-index: 100;
    overflow: hidden;
    position: relative;
    transition: ease all 0.4s;
}

.theme-btn span {
    z-index: 10;
}

.theme-btn:before {
    content: "";
    position: absolute;
    background-color: var(--black-color);
    width: 120%;
    height: 0;
    padding-bottom: 120%;
    top: -110%;
    left: -10%;
    border-radius: 50%;
    transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
}

.theme-btn:hover:before {
    transform: translateZ(0) scaleZ(1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.theme-btn:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black-color);
    transform: translate3d(0, -101%, 0);
    transition: transform 0.4s;
}

.theme-btn:hover:after {
    transform: translateZ(0);
    transition-duration: 0.05s;
    transition-delay: 0.4s;
    transition-timing-function: linear;
}

.theme-btn:hover {
    color: var(--white-color);
    border: 1px solid var(--black-color);
}

.theme-btn-2 {
    background-color: transparent;
    border: 1px solid var(--white-color);
}

.theme-btn-2:hover {
    border: 1px solid var(--black-color);
}

/* Theme Button 3 */
.theme-btn-3 {
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
}

.theme-btn-3:hover {
    border: 1px solid var(--btn-color);
    background-color: var(--btn-color);
}

.theme-btn-3:before {
    background-color: var(--btn-color);
}

.theme-btn-3:after {
    background-color: var(--btn-color);
}

/* Button Hover Effect */

/* Round Theme Button */
.round-btn {
    position: absolute;
    height: 122px;
    width: 122px;
    font-size: 18px;
    background-color: var(--btn-color);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.round-btn:hover {
    background-color: var(--btn-hover-color);
    color: var(--white-color);
}

/* Round Theme Button */

/*--------------------------------------------
    3. Button Style
---------------------------------------------*/

/*-------------------------------------------
    4. Navbar Area CSS
-------------------------------------------*/
.container {
    padding: 0;
}

/* Navbar Top Start */
.navbar-topbar {
    height: 60px;
}

.navbar-language img {
    height: 14px;
    margin-right: 10px;
}

.navbar-topbar ul li a,
.navbar-language-dropdown button,
.navbar-language a {
    font-size: 16px;
    color: var(--white-color);
}

.navbar-language-dropdown .dropdown-item {
    color: var(--black-color);
}

.navbar-login img {
    height: 14px;
    margin-right: 5px;
    width: auto;
}

.navbar-top-left li, .navbar-social, .navbar-language-dropdown {
    border-right: 1px solid var(--white-color);
    margin-right: 20px;
    padding: 17px 20px 17px 0;
}

.navbar-top-left li:last-child {
    border-right: 0;
}

/* .navbar-top-left li i, */
.navbar-login .iconify {
    margin-right: 10px;
}
.navbar-language-dropdown .iconify {
    margin-right: 0;
}

.navbar-social li a {
    display: block;
    padding: 0 0px 0 14px;
    font-size: 15px !important;
}

.navbar-top-left li i {
    font-size: 15px;
    margin-right: 12px;
}

.navbar-login i {
    font-size: 18px;
}

.navbar-login .iconify {
    font-size: 24px;
}

/* Navbar Top End */

/* Navbar Middle Start */
.navbar-middle {
    padding: 40px 0;
}

.navbar-search-box .input-group {
    border: 2px solid var(--border-color);
    border-radius: 50px;
}

.navbar-search-box {
    width: 500px;
    margin-right: 50px;
    height: 50px;
}

.navbar-search-box .my-custom-select-box {
    width: 170px;
}

.navbar-search-box .form-control {
    color: var(--body-font-color) !important;
}
.navbar-search-box .form-control::placeholder {
    color: #a19f9f;
}

.navbar-search-box .bootstrap-select.my-custom-select {
    width: 176px!important;
    float: right;
    
    padding: 0;
}

.navbar-search-box .bootstrap-select.my-custom-select button {
    border-radius: 0;
}

.navbar-search-box .my-custom-select-box .bootstrap-select>.dropdown-toggle {
    background-color: var(--white-color);
    color: #a19f9f;
    border: none;
    height: 50px;
    width: 164px;
    padding: 9px 28px 9px 9px;
    float: right;
    line-height: 32px;
}

.navbar-search-box .my-custom-select-box .dropdown-toggle::after {
    border-top: .4em solid #a19f9f !important;
    border-top: .4em solid;
    border-right: .4em solid transparent;
    border-bottom: 0;
    border-left: .4em solid transparent;
    position: relative;
    left: -5px;
}

.navbar-search-box .my-custom-select-box .dropdown-item.active,
.dropdown-item:active {
    color: var(--primary-color);
    text-decoration: none;
    background-color: transparent;
}

.navbar-search-box .filter-option-inner {
    height: 100%;
}

.search-btn {
    border-left: 2px solid var(--border-color) !important;
    width: 85px;
    margin: 0;
}

.navbar-search-box .search-btn {
    width: 77px;
}

.navbar-search-box input {
    height: 50px;
    border-radius: 50%;
}

.my-custom-select-box .bs-actionsbox,
.my-custom-select-box .bs-donebutton,
.my-custom-select-box .bs-searchbox {
    padding: 4px 15px;
}

.my-custom-select-box .bs-searchbox .form-control {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    height: 40px !important;
    padding: 10px;
}

/* // Navbar cart and wishlist btn */
.navbar-cart-wishlist-box-item .iconify {
    font-size: 29px;
    color: var(--primary-color);
}
.others-page-menu .navbar-cart-wishlist-box-item .iconify {
    color: var(--white-color);
}

.show-cart-number {
    top: -9px;
    left: 12px;
    height: 20px;
    width: 20px;
    font-size: 10px;
}

/* // Navbar cart and wishlist btn */

/* Navbar Middle End */

.menu-section-area {
    position: relative;
    width: 100%;
    padding: 0;
    z-index: 9999;
    overflow-x: visible;
}

@media only screen and (min-width: 992px) {
    #mainNav {
        display: block;
    }

    .navbar-expand-lg .navbar-nav {
        align-items: center;
    }
}

@media only screen and (max-width: 991.98px) {
    .navbar-nav {
        width: 100%;
    }
}

/* Main Menu Start */
.offcanvas {
    z-index: 99999;
}

.desktop-offcanvas-menu .theme-btn-container {
    border: 1px solid var(--btn-color);
}

#mainNav .offcanvas-body {
    justify-content: space-between;
}

.navbar-nav-left {
    width: 215px;
}

.navbar {
    padding: 0;
}

#mainNav {
    display: flex !important;
    transition: all ease .6s;
    background-color: var(--navbar-bg);
    align-items: center;
    width: 100%;
}

#mainNav.sticky {
    position: fixed;
    z-index: 99;
    width: 100%;
    top: 0;
    background-color: var(--navbar-bg);
    animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
}

#mainNav .navbar-brand {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
}

.navbar-brand.mobile-navbar-brand {
    display: none !important;
}

.navbar-toggler:focus {
    /* text-decoration: none;
    outline: 0; */
    box-shadow: 0 0 0 transparent !important;
}

#mainNav .navbar-nav .nav-item .nav-link {
    font-weight: 400;
    font-size: 19px;
    line-height: 30px;
    font-family: var(--body-font-secondary);

    padding: 20px 35px 20px 35px;
    position: relative;
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: ease all .5s;
}

#mainNav .navbar-nav .nav-item .nav-link.dropdown-toggle::after,
.navbar-language-dropdown .dropdown-toggle::after {
    display: none;
}

/* #mainNav .navbar-nav .nav-item .nav-link .iconify, */
.navbar-language-dropdown .dropdown-toggle .iconify {
    margin-left: 2px;
}

#mainNav .navbar-nav .nav-item .nav-link .iconify {
    font-size: 24px;
    right: -5px;
    position: relative;
}

#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link.active,
.offcanvas .navbar-nav .nav-item .nav-link:hover,
.offcanvas .navbar-nav .nav-item .nav-link.active {
    background-color: var(--primary-color) !important;
}

#mainNav .navbar-nav .nav-item .dropdown-item {
    transition: all linear .3s;
    width: 100%;
    position: relative;
    padding: 5px 25px;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--primary-color) !important;
    background-color: transparent !important;
}

#mainNav .navbar-nav .nav-item .dropdown-item:hover,
#mainNav .navbar-nav .nav-item .dropdown-item:focus {
    padding-left: 1.95rem;
    background-color: transparent !important;
    color: var(--primary-color) !important;
}

#mainNav .navbar-nav .nav-item .dropdown-item.active,
#mainNav .navbar-nav .nav-item .dropdown-item:active {
    color: var(--primary-color) !important;
    background-color: transparent !important;
    padding-left: 1.95rem;
}

#mainNav .navbar-nav .nav-item .dropdown-item::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    top: 14px;
    left: 20px;
    opacity: 0;
    transition: all linear .3s;
    border-radius: 50%;
}

#mainNav .navbar-nav .nav-item .dropdown-item:hover::after,
#mainNav .navbar-nav .nav-item .dropdown-item.active::after,
#mainNav .navbar-nav .nav-item .dropdown-item:active::after {
    opacity: 1;
}

/* Others Page Menu CSS Start */
.others-page-navbar#mainNav {
    background-color: transparent;
    position: absolute;
    padding: 8px 0;
    height: auto;
}

.others-page-navbar#mainNav.sticky {
    position: fixed;
    z-index: 99;
    width: 100%;
    top: 0;
    background-color: var(--navbar-bg);
    height: 70px;
}

.others-page-navbar#mainNav .navbar-brand {
    display: flex !important;
}

.others-page-navbar#mainNav .navbar-nav .nav-item .nav-link {
    font-size: 1rem;
    padding: 20px 40px 20px 0;
}

.others-page-navbar#mainNav .navbar-nav .nav-item .nav-link:hover,
.others-page-navbar#mainNav .navbar-nav .nav-item .nav-link.active,
.offcanvas .navbar-nav .nav-item .nav-link:hover,
.offcanvas .navbar-nav .nav-item .nav-link.active {
    background-color: transparent !important;
}

.others-page-navbar .navbar-cart-wishlist-box-item a:hover {
    color: var(--white-color);
}

.others-page-navbar .navbar-cart-wishlist-box-item a .show-cart-number {
    transition: ease all .5s;
}

.others-page-navbar .navbar-cart-wishlist-box-item a:hover .show-cart-number {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}

.others-page-navbar#mainNav .offcanvas-body {
    justify-content: flex-end;
}

.other-page-mobile-menu-icon {
    display: none;
}

/* Others Page Menu CSS End */

/* Offcanvas Menu Start */
.menu-offcanvas-btn.mobile-menu-btn {
    display: none !important;
}

.menu-offcanvas-btn {
    color: var(--white-color);
    font-size: 20px;
    padding: 0;
    border: none;
    display: block !important;
}

.offcanvas-backdrop {
    z-index: 9999;
}

.desktop-offcanvas-menu {
    padding: 12px;
}

.offcanvas-header {
    left: 0;
    top: 12px;
    border: 1px solid var(--border-color);
    height: 35px;
    width: 37px;
    opacity: 0;
    visibility: hidden;
}

.offcanvas.show .offcanvas-header {
    left: -30px;
    opacity: 1;
    visibility: visible;
}

.desktop-offcanvas-menu .offcanvas-header .btn-close {
    padding: 0 !important;
    margin: 0 !important;
    height: 35px;
    width: 37px;
}

.desktop-offcanvas-menu .navbar-search-box {
    width: 100%;
    margin-right: 0;
}

.desktop-offcanvas-menu .navbar-cart-wishlist-box {
    padding: 13px 15px;
    background-color: #F5F5F5;
    border-radius: 5px;
}

.desktop-offcanvas-menu .navbar-language-dropdown {
    border: 1px solid var(--border-color) !important;
    border-radius: 5px;
}

.desktop-offcanvas-menu .navbar-language-dropdown button {
    color: var(--black-color);
    padding: 13px 15px;
}

.desktop-offcanvas-menu .dropdown-menu.show {
    position: static !important;
    transform: none !important;
    margin-bottom: 15px !important;
}

.desktop-offcanvas-menu .nav-item {
    border-bottom: 1px solid var(--border-color);
}

.desktop-offcanvas-menu .nav-item .nav-link {
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
}

.desktop-offcanvas-menu .navbar-nav .nav-item .nav-link:hover,
.desktop-offcanvas-menu .navbar-nav .nav-item .nav-link.active,
.desktop-offcanvas-menu .navbar-nav .nav-item .dropdown-item:hover,
.desktop-offcanvas-menu .navbar-nav .nav-item .dropdown-item:focus {
    color: var(--primary-color) !important;
    background-color: var(--white-color) !important;
}

.desktop-offcanvas-menu .nav-item .nav-link.dropdown-toggle::after {
    display: none;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--primary-color);
}

.desktop-offcanvas-menu .navbar-search-box input {
    height: 46px;
}

/* Mobile Menu Tab CSS Start */
.mobile-menu-tab {
    background-color: #F5F5F5;
    border-radius: 5px;
}

.mobile-menu-tab .nav-item {
    width: 50%;
}

.mobile-menu-tab .nav-item .nav-link {
    padding: 13px 15px;
}

.mobile-menu-tab .nav-item .nav-link.active {
    color: var(--white-color) !important;
    background-color: var(--primary-color) !important;
}

/* Mobile Menu Tab CSS End */

/* Offcanvas Menu End */

/*Multilevel Dropdown Menu CSS Start*/
@media all and (min-width: 992px) {


    /* New */
    .navbar-brand.desktop-navbar-brand {
        display: flex !important;
    }

    .navbar-brand.mobile-navbar-brand {
        display: none !important;
    }

    /* New */

    .dropdown-menu li {
        position: relative;
    }

    /* Show Dropdown Menu on Hover instead Click Start */
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }

    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(20px);
        transition: .3s ease-in-out;
        width: 230px;
        max-height: 250px;
        overflow-y: auto;
    }

    .navbar .nav-item .dropdown-menu::-webkit-scrollbar {
        scrollbar-width: thin !important;
        background: #eee;
        width: 5px;
    }

    .navbar .nav-item .dropdown-menu::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 50px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        -ms-border-radius: 50px;
        -o-border-radius: 50px;
    }

    .navbar .nav-item:hover>.dropdown-menu {
        display: block;
        transform: scaleY(1);
        opacity: 1;
        visibility: visible;
        transition: .3s ease-out;
        border-radius: 8px;
    }

    .top-menu-item .nav-item .dropdown-menu {
        transform: translateY(20px);
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: .2s ease-in;
    }

    .top-menu-item .nav-item:hover>.dropdown-menu {
        transform: scaleY(1);
        display: block;
        opacity: 1;
        visibility: visible;
        transition: .3s ease-out;
        z-index: 9999;
    }

    .navbar .nav-item .dropdown-menu,
    .top-menu-item .nav-item .dropdown-menu {
        margin-top: 0;
        box-shadow: 0px 10px 29px rgba(202, 202, 202, 0.25);
        border: 0;
        border-radius: 0;
        padding: 18px 0;
    }

    /* Show Dropdown Menu on Hover instead Click End */
}

/*Multilevel Dropdown Menu CSS Start*/


/* Mobile Menu CSS Start */

@media only screen and (max-width: 1399.98px) {

    .navbar-brand img {
        height: 40px;
    }

    #mainNav .navbar-nav .nav-item .nav-link {
        font-size: 16px;
        line-height: 30px;
        padding: 20px 25px;
    }

    .menu-offcanvas-btn {
        height: 50px;
        width: 50px;
    }

    .menu-offcanvas-btn img {
        height: 20px;
        width: auto;
    }
}

@media only screen and (max-width: 1199.98px) {

    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .navbar-brand img {
        height: 40px;
    }

    .menu-offcanvas-btn img {
        top: 0;
    }

    #mainNav .navbar-nav .nav-item .nav-link {
        font-size: 14px;
        margin: 0;
    }

    .menu-offcanvas-btn {
        height: 40px;
        width: 40px;
        padding: 3px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .menu-offcanvas-btn img {
        height: 17px;
    }

    /* Navbar Middle Start */
    .navbar-middle {
        padding: 30px 0;
    }

    .navbar-middle-right {
        font-size: 14px;
    }

    .filter-option-inner-inner,
    .bootstrap-select .dropdown-menu li,
    .dropdown-item,
    .mobile-menu-tab .nav-item .nav-link {
        font-size: 14px;
    }

    .form-control,
    .form-select {
        font-size: 14px;
        height: 45px !important;
    }

    .navbar-search-box .my-custom-select-box .bootstrap-select>.dropdown-toggle {
        height: 45px;
    }

    /* Navbar Top Start */
    .navbar-topbar {
        height: 50px;
    }

    .navbar-topbar ul li a,
    .navbar-language-dropdown button,
    .navbar-language a {
        font-size: 14px;
    }

    .navbar-top-left li,
    .navbar-social,
    .navbar-language-dropdown {
        margin-right: 15px;
        padding: 17px 15px 17px 0;
        padding: 13px 15px 13px 0;
    }

    .navbar-top-left li i {
        font-size: 13px;
    }

    .navbar-login .iconify {
        font-size: 20px;
    }

    .navbar-login img {
        height: 12px;
    }

    /* Bottom Menu Start */
    #mainNav {
        height: 50px;
    }

    .navbar-nav-middle {
        height: 50px;
    }

    #mainNav .navbar-nav .nav-item .nav-link {
        line-height: 12px;
        padding: 15px 22px;
    }

    .menu-offcanvas-btn .iconify {
        font-size: 22px;
    }

    /* Others Page Menu Start */
    .others-page-navbar#mainNav {
        padding: 15px 0;
    }

    /* Others Page Menu End */


}

@media only screen and (max-width: 991.98px) {

    .navbar-topbar,
    .navbar-middle {
        display: none !important;
    }

    .menu-offcanvas-btn.mobile-menu-btn {
        display: flex !important;
    }

    .mobile-menu-btn {
        height: 35px;
        width: 37px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .others-page-navbar#mainNav {
        background-color: var(--navbar-bg);
        height: 60px;
        padding: 8px 0;
    }

    .others-page-navbar#mainNav.sticky {
        height: 60px;
    }
}


/* Mobile Menu CSS End */

/*Menu Mobile Responsive CSS End*/

/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991.98px) {
    #mainNav {
        height: 60px;
    }

    .navbar-brand.mobile-navbar-brand {
        display: flex !important;
    }
}

@media (max-width: 575px) {
    .navbar-brand img {
        height: 35px;
    }
}

@media only screen and (max-width:480px) {
    .offcanvas-header {
        height: 33px;
        width: 33px;
    }

    .offcanvas.show .offcanvas-header {
        left: -12px;
    }

    .desktop-offcanvas-menu {
        padding: 10px;
        width: 96% !important;
    }
}

/* ============ small devices .end// ============ */
/*Multilevel Dropdown Menu CSS End*/

/*-------------------------------------------
    4. Navbar Area CSS End
-------------------------------------------*/

/*-------------------------------------------
    5. Preloader Area Start
-------------------------------------------*/
#preloader {
    background-color: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999999999999999;
}

#preloader-status {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*-------------------------------------------
    5. Preloader Area End
-------------------------------------------*/

/*-------------------------------------------
    6. Header/Hero Area Start
-------------------------------------------*/
.hero-content-wrapper {
    padding-top: 195px;
    padding-bottom: 270px;
    top: 0;
    bottom: 0;
    z-index: 9;
    left: 0;
    right: 0;
}

.hero-content h1 {
    margin: 23px 0 22px;
}

.hero-content .hero-subtitle {
    padding: 0 266px 38px 0;
    line-height: 28px;
}

.hero-offer {
    height: 150px;
    width: 150px;
    right: -169px;
    top: -120px;
}

/* Hero Slider Animation Effect */
.hero-slider-container {
    max-width: 100%;
    height: 830px;
}

.slide-item {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
    transform: scale(1.15);
    transition: opacity 0.6s ease;
}

.slide-item.active {
    animation: grow 4s linear forwards;
    opacity: 1;
}

@keyframes grow {

    0%,
    20% {
        transform: scale(1);
    }

    75%,
    100% {
        transform: scale(1.15);
    }
}

.hero-slider-controls-container {
    position: absolute;
    top: 50%;
    right: 10px;
    display: flex;
    flex-direction: column;
    transform: translateY(-50%);
    z-index: 2;
}

.hero-slider-controls-container .control {
    background-color: #fff;
    cursor: pointer;
    opacity: 0.5;
    margin: 6px;
    height: 40px;
    width: 5px;
    transition: opacity 0.3s, background-color 0.3s, transform 0.3s;
}

.hero-slider-controls-container .control.active,
.hero-slider-controls-container .control:hover {
    background-color: #fff;
    opacity: 1;
    transform: scale(1.2);
}

/*-------------------------------------------
    6. Header/Hero Area End
-------------------------------------------*/

/*-------------------------------------------
    7.1. Home 2 Hero Area Start
-------------------------------------------*/
.hero-area-2 {
    background-color: #e9ebff;
}

.hero-2-slider-item {
    padding-top: 184px;
    padding-bottom: 213px;
}
.hero-2-content .hero-subtitle {
    padding: 0 266px 41px 0;
    line-height: 28px;
}
.hero-2-content h1 {
    margin: 28px 0 21px;
}

.hero-2-slider-img {
    height: 535px;
    width: 661px;
    right: 241px;
    top: 124px;
}

.hero-area-2 .hero-offer {
    right: auto;
    left: 151px;
    top: -31px;
    z-index: 9;
}

/*-------------------------------------------
    7.1. Home 2 Hero Area End
-------------------------------------------*/

/*-------------------------------------------
    8. Offer 1 Area Start
-------------------------------------------*/
.offer-1-area {
    margin-top: -77px;
    z-index: 11;
}

.offer-1-box .offer-box-img-wrap img {
    width: 100%;
    transform: scale(1);
    transition: ease all 0.5s;
    transform-origin: center;
}

.offer-1-box:hover .offer-box-img-wrap img {
    transform: scale(1.1);
}

.offer-1-content {
    padding: 25px 32px;
    top: 0;
    height: 100%;
    width: 100%;
    align-content: center;
    left: 0;
}

.offer-1-content p {
    margin-bottom: 10px;
}

.offer-1-content h4 {
    margin-top: 3px;
    padding-right: 212px;
}

/*-------------------------------------------
    8. Offer 1 Area End
-------------------------------------------*/

/*-------------------------------------------
    8.1. Offer 1 Area Start
-------------------------------------------*/

/* Home 2 Offer 1 Area Start */
.home-2 .offer-1-area {
    margin-top: 0;
}

/* Home 2 Offer 1 Area End */

/* Home-2 New Offer 1 Area */
.home-2-offer-1-area .offer-1-box a img {
    transform: scale(1);
    width: 100%;
    transition: ease all .5s;
}

.home-2-offer-1-area .offer-1-box a:hover img {
    transform: scale(1.1);
}

.home-2-offer-1-content {
    padding: 45px 30px 30px;
    top: 0;
    height: 100%;
    width: 100%;
    left: 0;
}

.home-2-offer-1-content h5 {
    line-height: 40px;
    padding: 1px 0 12px 0;
}

.home-2-offer-1-content {
    width: 70%;
    z-index: 9;
}

.home-2-offer-1-content .home-2-offer-1-btn {
    color: var(--body-font-color);
    display: inline;
}

.home-2-offer-1-area-left-side .col-md-6:nth-child(1) .offer-1-box p,
.home-2-offer-1-area-left-side .col-md-6:nth-child(1) .offer-1-box h5,
.home-2-offer-1-area-left-side .col-md-6:nth-child(1) .offer-1-box .home-2-offer-1-btn {
    color: var(--white-color);
}

.home-2-offer-1-content .home-2-offer-1-btn:hover,
.home-2-offer-1-area-left-side .col-md-6:nth-child(1) .offer-1-box .home-2-offer-1-btn:hover {
    color: var(--primary-color);
}

.home-2-offer-1-area-left-side .col-md-12:nth-child(3) .offer-1-box .home-2-offer-1-content {
    width: 44%;
}

/* Offer content right side */
.home-2-offer-1-area-right-side .home-2-offer-1-content {
    width: 70%;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*-------------------------------------------
    8.1. Offer 1 Area End
-------------------------------------------*/

/*-------------------------------------------
    9. About Me Area End
-------------------------------------------*/
.about-ceo-img img {
    padding: 10px;
    border: 1px solid var(--primary-color);
    height: 86px;
    width: 86px;
}

/*-------------------------------------------
   9. About Me Area Start
-------------------------------------------*/

/*-------------------------------------------
    10. Trending Products Start
-------------------------------------------*/

/* Product Item Start */
.product-badge {
    height: 50px;
    width: 50px;
    top: 20px;
    left: 20px;
}

.product-item .add-to-cart-btn {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
}

.product-item:hover .add-to-cart-btn {
    opacity: 1;
    visibility: visible;
}

.product-item .add-to-cart-btn .theme-btn {
    padding: 10px 26.18px !important;
    min-height: 43px;
    width: 150px;
}

.product-item-actions {
    top: 20px;
    right: -10px;
    opacity: 0;
    visibility: hidden;
}

.product-item:hover .product-item-actions {
    opacity: 1;
    visibility: visible;
}

.product-item.product-item-style-1:hover .product-item-actions {
    right: 20px;
}

.product-action-btn {
    width: 40px;
    height: 40px;
    transition: ease all .5s;
}

.product-action-btn:hover {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
    border: var(--primary-color) !important;
}

.product-item-style-1 .product-action-btn {
    margin-bottom: 10px;
}

.product-item-style-2 .product-item-actions {
    top: auto;
    bottom: -30px;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    display: inline-flex;
    flex-direction: row-reverse;
}

.product-item.product-item-style-2:hover .product-item-actions {
    bottom: 0;
}

.product-item-style-2 .product-action-btn {
    margin: 0 5px;
}

/* Product Item End */

/*-------------------------------------------
    10. Trending Products End
-------------------------------------------*/

/*-------------------------------------------
    11. Organic Natural Products CTA Area End
-------------------------------------------*/
.organic-natural-products-cta-area {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.organic-natural-cta-content {
    padding: 118px 0;
}

.home-2-organic-natural-cta-area .organic-natural-cta-content {
    padding: 91.3px 0;
}

.organic-natural-cta-content .organic-natural-cta-para {
    width: 53%;
}

.organic-natural-products-cta-right .cta-offer {
    height: 121px;
    width: 121px;
    left: -28px;
    top: 54px;
    background-color: rgb(129 172 40 / 70%);
}
/* Home-2 Natural products CTA CSS Start */
.organic-product-offer-countdown.product-offer-countdown li {
    margin: 0 54px 0 0;
    min-width: 87px;
}

.organic-product-offer-countdown.product-offer-countdown li:first-child {
    text-align: start !important;
}

.organic-product-offer-countdown.product-offer-countdown li:last-child {
    margin-right: 0 !important;
}

.organic-product-offer-countdown.product-offer-countdown li:not(:last-child)::after {
    right: -30px;
    top: 9px;
}

.organic-product-offer-countdown.product-offer-countdown {
    padding: 24px 0 40px;
}

/*-------------------------------------------
    11. Organic Natural Products CTA Area End
-------------------------------------------*/

/*-------------------------------------------
    12. Offer 2 Area Start
-------------------------------------------*/
.offer-2-box:after {
    content: "";
    background-color: rgba(0, 0, 0, .65);
    height: 100%;
    width: 100%;
    position: absolute;
}

.offer-2-box img {
    transform: scale(1);
    width: 100%;
    transition: ease all .5s;
    transform-origin: center;
}

.offer-2-box:hover img {
    transform: scale(1.1);
}

/*-------------------------------------------
    12. Offer 2 Area End
-------------------------------------------*/

/*-------------------------------------------
    13. Featured Product Area Start
-------------------------------------------*/
/* Featured Products Tab CSS */
#featuredProductsTab .nav-link {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    margin-left: 40px;
    padding: 0;
    background-color: transparent;
}

#featuredProductsTab .nav-item.show .nav-link,
#featuredProductsTab .nav-link.active,
#featuredProductsTab .nav-link:focus,
#featuredProductsTab .nav-link:hover {
    color: var(--primary-color);
}

/* for featured big image */
.featured-products-area .featured-product-offer-sale {
    top: 30px;
    left: 30px;
}

.featured-product-discover-now {
    bottom: 30px;
    right: 30px;
}

.featured-products-area .product-item-img,
.featured-products-area .product-item {
    border: none !important;
}

.featured-products-area .product-item.featured-product {
    border: 1px solid var(--border-color) !important;
}

.featured-products-area .product-content {
    padding-bottom: 0 !important;
    padding-top: 8px !important;
}

/* Product Offer Countdown CSS */
.inside-product-offer {
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    padding: 10px 5px;
}

.product-offer-countdown li {
    margin: 0 5px;
    min-width: 44px;
}

.product-offer-countdown li:not(:last-child)::after {
    content: ":";
    right: -7.1px;
    top: 7px;
    position: absolute;
    color: var(--heading-black-color);
}

/*-------------------------------------------
    13. Featured Product Area End
-------------------------------------------*/

/*-------------------------------------------
    14. Testimonial Area Start
-------------------------------------------*/
.testimonial-area {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 100px 230px;
}

.testimonial-slider .testimonial-img {
    height: 118px;
    width: 118px;
    border: 3px solid var(--white-color);
    margin: auto;
}
.testimonial-slider .testimonial-img img {
    height: 118px;
    width: 118px;
    object-fit: cover;
}

.testimonial-text {
    width: 68%;
    margin: auto;
}

/* Testimonial Dots */
.testimonial-area .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 20px;
}

.testimonial-area .owl-theme .owl-dots .owl-dot {
    zoom: normal;
    height: 20px;
    width: 20px;
    border: none;
    border-radius: 50%;
    margin: 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.testimonial-area .owl-theme .owl-dots .owl-dot:hover {
    border: 0;
}

.testimonial-area .owl-theme .owl-dots .owl-dot.active {
    border: 0;
    background: var(--primary-color);
}

.testimonial-area .owl-theme .owl-dots .owl-dot span {
    width: 15px;
    height: 15px;
    margin: 0px;
    background: var(--heading-black-color);
    border-radius: 30px;
}

.testimonial-area .owl-theme .owl-dots .owl-dot.active span,
.testimonial-area .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--primary-color);
    border: 0;
}

/*-------------------------------------------
    14. Testimonial Area End
-------------------------------------------*/

/*-------------------------------------------
    15. Blog Area Start
-------------------------------------------*/
.blog-item-img::after {
    content: "";
    background-color: rgba(0, 0, 0, .45);
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
}

.blog-item-body {
    padding: 20px 18px;
    transition: all 0.4s;
    bottom: -60px;
    z-index: 1;
}

.blog-item:hover .blog-item-body {
    bottom: 0;
}

.blog-item-excerpt {
    opacity: 0;
    transition: opacity 0.4s;
}

.blog-item:hover .blog-item-excerpt {
    opacity: 1;
}
/*-------------------------------------------
    15. Blog Area End
-------------------------------------------*/

/*-------------------------------------------
    16. Blog Details Page Area Start
-------------------------------------------*/
.blog-details-thumb img {
    height: 459px;
    object-fit: cover;
}
.blog-details-thumb {
    padding-right: 5px;
}
.blog-details-data {
    top: 20px;
    left: 20px;
    height: 55px;
    width: 55px;
    padding: 10px;
}
.blog-details-content, .comment-box-wrap {
    margin-right: 100px;
}
.blog-details-img-with-list ul li:not(:last-child) {
    margin-bottom: 10px;
}
.blog-details-img-with-list ul li .iconify {
    font-size: 26px;
}
.quotation {
    box-shadow: 0 0 90px rgba(0, 0, 0, 0.1);
}
.quotation img {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.comment-box-item {
    padding: 24px 0 2px 0;
}
.comment-box-item img {
    height: 120px;
    width: 120px;
    object-fit: cover;
}
.social-share-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: var(--heading-black-color);
}

.social-share-links a:hover {
   color: var(--primary-color);
}
.reply-comment-item {
    margin-left: 70px;
}
.comment-box-wrap .comment-box-item:last-child {
    border-bottom: 0!important;
}
.comment-name-reply-box-right:hover {
    color: var(--primary-color);
}

.blog-details-content p {
    margin-bottom: 30px;
}
/* Leave a comment */
.comment-box-title::after, .comment-form-title::after {
    height: 2px;
    width: 90px;
    background-color: var(--primary-color);
    content: "";
    left: 0;
    bottom: -13px;
    position: absolute;
}
 .comment-form form .form-control,
.comment-form form .form-control:focus {
    background-color: #f4f4f4 !important;
    height: 52px !important;
    border-radius: 0;
    padding: 15px 20px;
    box-shadow: none !important;
    border-color: transparent !important;
}

.comment-form form textarea.form-control,
.comment-form form textarea.form-control:focus {
    background-color: #f4f4f4 !important;
    height: 220px !important;
    padding: 15px 20px;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Fix for Chrome autofill yellow background */
.comment-form form input:-webkit-autofill,
.comment-form form textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f4f4f4 inset !important;
    -webkit-text-fill-color: #000 !important;
}

/* Leave a comment */

/* Blog details search */
.blog-details-sidebar-search form {
    border: 1px solid var(--border-color);
    height: 42px;
}
.blog-details-sidebar-search form input {
    padding: 10px 15px;
    height: 40px!important;
}
.blog-details-sidebar-search form button {
    right: 7px;
    width: 27px;
    font-size: 22px;
    color: var(--body-font-color);
    z-index: 9;
}
/* Blog details search */

/* Blog details categories */
.blog-sidebar-categories ul li a {
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.blog-sidebar-categories ul li:last-child a {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.blog-sidebar-categories ul li:last-child a:hover {
    border-bottom: none!important;
}
.blog-sidebar-categories ul li a:hover {
    border-bottom: 1px solid var(--primary-color);
}
/* Blog details categories */

/* Blog details sidebar blog */
.blog-details-sidebar-blog a img {
    width: 90px;
    height: 90px;
    object-fit: cover;
}
.blog-details-sidebar-blog a h6 {
    transition: ease all .5s;
    line-height: 26px;
}
.blog-details-sidebar-blog a:hover h6 {
    color: var(--primary-color);
}
.blog-sidebar-publish-date {
    margin-top: 11px;
}
.blog-details-sidebar-blog a:last-child {
    margin-bottom: 0!important;
}
/* Blog details sidebar blog */

/* Tags/Share css */
.blog-sidebar-tags a {
    margin: 0 7px 10px 0;
    padding: 4px 17px;
    display: inline-block;
}

/* Blog sidebar newsletter */
.blog-sidebar-newsletter input {
    padding: 0;
    height: 32px!important;
}

.blog-sidebar-newsletter .iconify {
    font-size: 21px;
}
/* Blog sidebar newsletter */
/*-------------------------------------------
    16. Blog Details Page Area End
-------------------------------------------*/

/*-------------------------------------------
    17. Footer Area Start
-------------------------------------------*/
.footer-area {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.footer-area::after {
    content: "";
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .70);
    left: 0;
    top: 0;
    position: absolute;
}

.footer-links {
    line-height: 35px;
    margin-top: 12px;
}
.footer-links a, .footer-bottom-menu-item ul li a {
    color: var(--white-color);
}
.footer-links a:hover, .footer-bottom-menu-item ul li a:hover {
    color: var(--primary-color);
}

.my-account-box,
.footer-company-details-title {
    font-size: 19px;
    line-height: 35px;
}

.company-details-box p {
    padding-right: 76px;
}

.footer-subscribe-form form {
    width: 370px;
}

.footer-subscribe-form input {
    display: inline-block;
    width: 100%;
    border: 1px solid var(--white-color);
    height: 35px;
    padding: 15px;
}

.footer-subscribe-form input,
.footer-subscribe-form input::-webkit-input-placeholder {
    color: var(--white-color);
}

.footer-subscribe-form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 35px;
    width: 49px;
}

.footer-bottom-menu-item ul li a {
    padding-left: 25px;
}

/*-------------------------------------------
    17. Footer Area End
-------------------------------------------*/

/*-------------------------------------------
    18. Page Banner Start
-------------------------------------------*/
.page-banner-area {
    background-position: center;
    background-repeat: no-repeat;
}

.page-banner-content {
    min-height: 300px;
    height: 100%;
}

.page-banner-area::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .58);
}

.page-banner-content h2 {
    margin-top: 60px;
}

.breadcrumb-item+.breadcrumb-item,
.breadcrumb-item a {
    color: var(--white-color);
    line-height: 28px;
    font-size: 1rem;
    font-weight: bold;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
}

.breadcrumb {
    margin-bottom: 0;
}

/*-------------------------------------------
    18. Page Banner End
-------------------------------------------*/

/*-------------------------------------------
    19. About Page Start
-------------------------------------------*/
.mission-overview-content h2 {
    font-size: 2.5rem;
    line-height: 58px;
    margin-top: 25px;
    padding-right: 50px;
}

.mission-text p {
    padding-right: 180px;
}

.mission-img-1 {
    right: 0;
}

.mission-img-2 {
    right: 175px;
    top: 120px;
    border: 10px solid var(--white-color);
    box-shadow: 0px 12px 56px 0px rgba(0, 0, 0, 0.2);
}

/* Why Choose Us */
.why-choose-content-box {
    width: 73%;
}

.why-choose-us-play-btn {
    height: 70px;
    width: 70px;
}

/* Why Choose Us */

/* Team Area CSS Start */
.about-area {
    margin-bottom: 80px;
}

.team-area .section-title p {
    width: 55%;
    margin: auto;
}

.team-item {
    box-shadow: 3px 3px 63px 0 rgba(0, 0, 0, 0.07);
}

.team-item img {
    width: 100%;
    transform: scale(1);
    transition: ease all 0.5s;
    transform-origin: center;
}

.team-item:hover img {
    transform: scale(1.1);
}

.team-social a {
    width: 40px;
    height: 37px;
    background-color: #e5e5e5;
}

.team-social a:hover {
    background-color: var(--primary-color);
    color: var(--white-color) !important;
}

/* Team Area CSS End */

/*-------------------------------------------
    19. About Page End
-------------------------------------------*/

/*-------------------------------------------
    20. Shop Page Start
-------------------------------------------*/

/* Shop Sidebar search */
.shop-search-box form {
    background-color: #e1e1e1 !important;
    height: 44px;
    width: 100%;
    margin-bottom: 40px;
}

.shop-page-side-box.shop-categories {
    border-color: var(--primary-color) !important;
}

.shop-search-box form input,
.shop-search-box .form-control,
.shop-search-box .form-control:focus {
    background-color: #e1e1e1 !important;
    height: 44px !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
.shop-search-box input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #e1e1e1 inset !important;
    -webkit-text-fill-color: #000 !important;
}

.shop-search-btn {
    color: #bdbdbd;
    height: 44px;
    right: 0;
    top: 0;
    width: 40px;
}

/* Shop Sidebar search */

/* Categories */
.shop-categories li {
    margin: 4px 0;
}

.shop-filter-btn button {
    color: #198754;
}

.shop-price-amount-inner {
    display: flex;
    align-items: center;
}

.shop-price-amount-inner input {
    max-width: 35px !important;
    color: var(--body-font-color);
    text-align: right;
}

.shop-categories .form-check-input {
    width: 1rem;
    height: 1rem;
    border-radius: 0;
    margin-top: 4px;
}

.shop-categories label {
    margin-bottom: 0;
}

.shop-categories .form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: none;
}

.shop-categories .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Categories */

/* Trending Items */
.trending-items img {
    height: 70px;
    width: 70px;
    object-fit: cover;
}

/* Trending Items */

/* Shop Right side part */
.shop-right-top-bar {
    margin-bottom: 40px;
}

.grid-list-view-wrap button {
    height: 44px;
    width: 44px;
    font-size: 28px;
    color: #bdbdbd;
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.filter-count-text {
    color: #6c6c6c;
}

.shop-right-top-bar select {
    background-color: #e1e1e1;
    border-radius: 0;
    height: 44px !important;
    width: 257px;
}

.trending-items .trending-items-list-wrap .shop-trending-product-item:not(:last-child) {
    margin-bottom: 25px;
}

/* Shop Right side part */


/* Price range slider value */
.range-value-box {
    position: relative;
    right: -11px;
}

.ui-slider-horizontal {
    height: 7px;
    border: 0 !important;
    background: rgba(196, 196, 196, 0.31);
    border-radius: 51px;
}

.ui-slider-horizontal {
    width: 92%;
    margin: 20px auto 15px;
}

.ui-widget-header {
    background: var(--primary-color);
}

/*.range-value-wrap, .price-range-field {*/
.range-value-wrap {
    color: var(--body-font-color);
    font-size: 14px;
    padding: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.range-value-wrap label {
    margin-bottom: 0;
}

.price-range-field {
    border: 0;
    background: transparent;
    margin-left: 0;
    height: auto;
    width: 38px;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -3px;
    background-color: var(--primary-color) !important;
    border-radius: 50%;
    box-shadow: none;
    border: 1px solid var(--primary-color);
}

.ui-slider .ui-slider-handle {
    width: 11px;
    height: 12px;
    border-radius: 0;
}

.range-slider-box input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}

/* Price range slider value */

/*-------------------------------------------
    20. Shop Page End
-------------------------------------------*/

/*-------------------------------------------
    21. Shop Details Page Start
-------------------------------------------*/
.slick-prev, 
.slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border: 1px solid var(--black-color);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black-color);
    font-size: 13px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.slick-prev:hover, 
.slick-next:hover {
    background: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

.slick-prev {
    left: -44px;
}

.slick-next {
    right: -44px;
}

/* Remove default slick arrows */
.slick-prev:before, 
.slick-next:before {
    display: none;
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--white-color);
}

.slider-nav .slick-slide {
    margin: 0 13px;
}

.slider-nav .slick-list {
    margin: 0 -13px;
}

.slider-nav .slick-slide img {
    width: 100%;
    height: auto;
}

/* Position action buttons inside big slider */
.slider-actions {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}

.slider-actions button {
    width: 41px;
    height: 41px;
    border: none;
    background: var(--white-color);
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 19px;
}

.slider-actions button:hover {
    background: var(--black-color);
    color: #fff;
}

/* Zoom effect */
.slider-for .slick-slide-item img {
    transition: transform 0.4s ease;
}

.slider-for.zoomed .slick-slide-item.slick-current img {
    transform: scale(1.8);
}


/* Slider big image */
.slick-slider-big-img img {
    height: 573px;
}
.slick-slider-gallery {
    margin-left: 44px;
    margin-right: 44px;
}

/* Slick Slider */

/* Color */
.shop-details-color-box-wrap span {
    height: 16px;
    width: 16px;
}
.shop-details-color-box-wrap span.active {
    border: 2px solid #d5d5d5;
}
.shop-details-color-box-wrap span:nth-child(1) {
    background-color: var(--primary-color);
}
.shop-details-color-box-wrap span:nth-child(2) {
    background-color: var(--black-color);
}
.shop-details-color-box-wrap span:nth-child(3) {
    background-color: #eac3bc;
}
.shop-details-color-box-wrap span:nth-child(4) {
    background-color: #c0b097;
}

/* Size */
.shop-details-size-box-wrap span {
    height: 24px;
    width: 28px;
    border: 1px solid var(--border-color);
    padding: 5px;
}
.shop-details-size-box-wrap span.active {
    border: 2px solid var(--black-color);
}

/* Quantity */
.shop-details-quantity-control button.plus {
    border-left: 1px solid var(--border-color);
    border-radius: 0;
}
.shop-details-quantity-control button.minus {
    border-right: 1px solid var(--border-color);
    border-radius: 0;
}
.shop-details-quantity-control :not(.btn-check)+.btn:active, 
.shop-details-quantity-control .btn:first-child:active {
    border-color: var(--border-color)!important;
}
.shop-details-cart-btns .theme-btn .iconify {
    z-index: 9;
}
.shop-details-wishlist-btn, .shop-details-compare-btn {
    height: 50px;
    width: 50px;
    border: 1px solid var(--border-color);
}

.progress {
    height: 6px;
    background-color: #d5d5d5;
    border-radius: 0;
}
.progress-bar {
    background-color: #2b2b2b;
    width: 70%;
}

.shop-details-notes textarea.form-control, .shop-details-notes textarea.form-control:focus, .shop-details-notes textarea.form-control:focus-visible {
    height: 77px !important;
    background-color: #e8e7e7 !important;
    padding: 12px;
    box-shadow: none !important;
    border-color: #ccc !important;
    min-height: 77px!important;
}

/* Fix for Chrome autofill yellow background */
.shop-details-notes textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #e8e7e7 inset !important;
    -webkit-text-fill-color: #000 !important;
}

.shop-details-terms label {
    margin-bottom: 0;
    font-size: 1rem;
    color: #2b2b2b;
}
.form-check.shop-details-terms .form-check-input {
    top: -1px;
    border-radius: 0!important;
}
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.buy-it-now-btn {
    background-color: #e6eed4;
    height: 45px;
    border: 0!important;
}
.buy-it-now-btn:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.guaranteed-checkout-box img {
    height: 35px;
}

/* Description Reviews Tab */
.description-reviews-tab .nav-tabs .nav-link {
    border: none;
    border-radius: 0;
    padding: 9px 31px;
    transition: ease all .5s;
}
.description-reviews-tab .nav-link:focus, .description-reviews-tab .nav-link:hover {
    color: var(--primary-color);
}
.description-reviews-tab .nav-tabs .nav-link.active {
  background-color: var(--primary-color);
  color: #fff !important;
}

.write-review-form {
    background-color: var(--bg-secondary);
}
.write-review-form .form-control, .write-review-form .form-select {
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 15px;
}
.write-review-form .theme-btn {
    font-size: 16px;
    padding: 12px 15px!important;
}
/*-------------------------------------------
    21. Shop Details Page End
-------------------------------------------*/

/*-------------------------------------------
    22. Checkout Page Start
-------------------------------------------*/
.billing-details-part textarea.form-control {
    min-height: 155px!important;
    color: #606060!important;
}
.billing-details-part .form-control, .billing-details-part .form-select {
    border: 1px solid var(--border-color);
    color: #606060!important;
    height: 43px!important;
    border-radius: 0;
    padding: 8px 16px;
}

.billing-details-part .form-check .form-check-input {
    margin-left: -11px;
    margin-right: 16px;
    margin-top: 2px;
    width: 25px;
    height: 25px;
}
.billing-details-part .form-check-label {
    font-size: 1rem;
    line-height: 28px;
}
.checkout-payment-method .form-check-input {
    margin-right: 12px;
    margin-top: 2px;
    width: 25px;
    height: 25px;
}
.checkout-payment-method .form-check-label {
    font-size: 1rem;
    line-height: 28px;
}
.order-part .theme-btn {
    background-color: transparent!important;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.order-part .theme-btn:hover {
    color: var(--white-color);
}
/*-------------------------------------------
    22. Checkout Page End
-------------------------------------------*/

/*-------------------------------------------
    23. Contact Page Start
-------------------------------------------*/
.contact-page-area .map iframe {
    height: 600px;
    width: 100%;
}

.contact-form-area {
    box-shadow: 5px 5px 30px 5px rgba(0, 0, 0, 0.1);

    border-radius: 5px;
}

.contact-form-area {
    margin-top: -330px;
}

.contact-form-part, .contact-content-part {
    padding: 76px 70px 51.21px;
}

.contact-form-part,
.contact-content-part {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.contact-form-part form input {
    height: 81px !important;
    padding: 13px 0 48px 0;
    border-radius: 0;
}

.contact-form-part form textarea {
    height: 73px !important;
    padding-left: 0;
}

.contact-form-part form button {
    border: 1px solid var(--primary-color);
    height: 60px;
    width: 60px;
    font-size: 1.5rem;
    right: 0;
    bottom: -29px;
}

.contact-social,
.contact-content-box {
    z-index: 9;
}

.contact-social a {
    font-size: 17px;
}
.contact-google-plus-icon {
    font-size: 24px!important;
}

.contact-content-floating {
    font-size: 200px;
    right: -19px;
    bottom: -71px;
    opacity: .1;
}

.contact-content-box {
    margin-bottom: 50px;
}

.contact-content-box .iconify {
    font-size: 1.65rem;
}

.contact-social .iconify {
    font-size: 19px;
}
/*-------------------------------------------
    23. Contact Page End
-------------------------------------------*/

/*-------------------------------------------
    24. FAQ Page Start
-------------------------------------------*/
.accordion .accordion-item {
    border: 0;
}

.accordion .accordion-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.accordion .accordion-item button[aria-expanded="true"] {
    border-bottom: 0;
}

.accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 1.2em 1em 0;
    color: #666666;
    font-size: 1.15rem;
    font-weight: 400;
    border: none;
    background: none;
    outline: none;
}

.accordion button:hover,
.accordion button:focus {
    cursor: pointer;
}

.accordion button:hover::after,
.accordion button:focus::after {
    cursor: pointer;
    border: 0;
}

.accordion button .accordion-title {
    padding: 1em 1.5em 1em 0;
}

.accordion button .icon {
    display: inline-block;
    position: absolute;
    top: 18px;
    right: 0;
    width: 20px;
    height: 20px;
    border: 1px solid;
    border-radius: 22px;
}

.accordion button .icon::before {
    display: block;
    position: absolute;
    content: "";
    top: 8px;
    left: 4px;
    width: 10px;
    height: 2px;
    background: currentColor;
}

.accordion button .icon::after {
    display: block;
    position: absolute;
    content: "";
    top: 4px;
    left: 8px;
    width: 2px;
    height: 10px;
    background: currentColor;
}

.accordion button[aria-expanded="true"] .icon::after {
    width: 0;
}

.accordion button[aria-expanded="true"]+.accordion-content {
    opacity: 1;
    height: auto;
    transition: all 200ms linear;
    will-change: opacity, max-height;
}

.accordion .accordion-content {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
}

.accordion .accordion-content p {
    margin: 0 0 1.5em 0;
    color: #555555;
}

/*-------------------------------------------
    24. FAQ Page End
-------------------------------------------*/

/*-------------------------------------------
    25. Login/Register Page Start
-------------------------------------------*/
.login-form-area,
.register-form-area {
    box-shadow: 0 2px 95px rgba(0, 0, 0, 0.15);
}

.login-form-area .login-form-para,
.register-form-area .login-form-para {
    margin: 8px 0 19px;
}

.login-form-area form input.form-control,
.register-form-area form input.form-control {
    border: 1px solid var(--border-color) !important;
    height: 55px !important;
}

.login-form-area form .form-check-input[type=checkbox],
.register-form-area form .form-check-input[type=checkbox] {
    height: 25px;
    width: 25px;
    margin-right: 10px;
    border-radius: 3px;
    position: relative;
    top: -3px;
}

.login-form-area .theme-btn,
.register-form-area .theme-btn {
    height: 55px;
    border-radius: 5px;
}

.social-login {
    height: 43px;
    border-radius: 5px;
}

.social-login.social-login-facebook {
    background-color: #3b5998;
}

.social-login.social-login-google {
    background-color: #d85040;
}

.social-login.social-login-twitter {
    background-color: #007bff;
}

.login-form-area form hr {
    margin: 27px 0;
}

.login-or-text {
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
}

/*-------------------------------------------
    25. Login/Register Page End
-------------------------------------------*/

/*-------------------------------------------
    26. Wishlist Page Start
-------------------------------------------*/
.wishlist-page-area {
    padding-bottom: 33px;
}

.wishlist-table img,
.cart-table img {
    height: 80px;
    width: 100px;
    object-fit: cover;
}

.product-img-th {
    width: 10%;
}
.product-name-th {
    width: 21%;
}

.stock-status {
    background-color: #eeffcb;
    color: #555;
    padding: 3.3px 13px;
    border-radius: 3px;
    display: inline-block;
}

.wishlist-table td,
.wishlist-table th,
.cart-table td,
.cart-table th {
    vertical-align: middle;
}

.wishlist-table th,
.cart-table th {
    background-color: #f9f9f9;
}

.wishlist-table .delete-icon,
.cart-table .delete-icon {
    font-size: 1.55rem;
}

.wishlist-table .delete-icon:hover,
.cart-table .delete-icon:hover {
    color: var(--red-color);
}

.wishlist-price {
    color: #606060 !important;
}

.wishlist-page-area .theme-btn,
.cart-page-area .theme-btn {
    padding: 5px 10px !important;
    min-height: 38px !important;
    width: 128px;
    font-size: 1rem;
}

.wishlist-page-area table th,
.cart-page-area table th {
    font-weight: bold;
    font-size: 1.125rem;
    color: var(--heading-black-color);
    text-align: center;
    border: none;
    padding: 13.5px 25px;
}

.wishlist-page-area table td,
.cart-page-area table td {
    padding: 30px 5px;
    text-align: center;
}

.wishlist-page-area table tbody tr:last-child td,
.cart-page-area table tbody tr:last-child td {
    border: none;
}

/*-------------------------------------------
    26. Wishlist Page End
-------------------------------------------*/

/*-------------------------------------------
    27. Cart Page Start
-------------------------------------------*/
/* quantity control styling */
.quantity-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    overflow: hidden;
    width: 120px;
    height: 38px;
    background: #fff;
}

.quantity-control .btn {
    border: none;
    background: transparent;
    width: 36px;
    height: 100%;
    padding: 0;
    line-height: 1;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.quantity-control .qty-input {
    width: 48px;
    border: none;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}

/* remove spin buttons on number inputs (Chrome) */
input[type=number].qty-input::-webkit-outer-spin-button,
input[type=number].qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.coupon-box-wrap input {
    background-color: #e8e8e8;
    padding: 12px 15px;
    height: 40px !important;
    width: 308px;
}

.coupon-box-wrap input.form-control:focus,
.coupon-box-wrap input.form-control:not(:placeholder-shown) {
    background-color: #e8e8e8 !important;
    box-shadow: none !important;
    border-color: transparent;
}

.coupon-box-wrap .theme-btn {
    width: auto;
    padding: 7px 14px !important;
    height: 40px !important;
    min-width: 118px;
}
.coupon-box-wrap .coupon-box .theme-btn {
    min-width: 140px;
}

.cart-total-box .theme-btn {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    height: 43px;
}

.cart-total-box .theme-btn:hover {
    color: var(--white-color);
}

.cart-shipping-box .form-check-input[type=radio] {
    height: 25px;
    width: 25px;
    margin-right: 15px;
    top: -6px;
    position: relative;
    border: 1px solid var(--border-color);
}

.form-check-input:focus {
    border-color: var(--border-color);
    box-shadow: none;
}

.cart-shipping-box .form-check label {
    margin: 0;
}

.estimate-for-country button {
    color: var(--body-font-color);
}

.estimate-for-country button:hover {
    color: var(--primary-color);
}

.form-check-input:checked[type=radio] {
    background-color: var(--white-color);
    border-color: var(--border-color);
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4' fill='%2381AC28'/%3e%3c/svg%3e");
    background-size: 8px 8px;
}

@media (max-width: 480px) {
    .quantity-control {
        width: 100px;
    }

    .quantity-control .qty-input {
        width: 40px;
    }
}

/*-------------------------------------------
    27. Cart Page End
-------------------------------------------*/