/*-----------------------------------------------------------------------------------
Template Name: Mitho - Ecommerce website template 
Template URI: https://spacingtech.com
Description: A best stylish, creative, modern responsive template for different eCommerce business or industries.
Author: spacingtech_webify
-----------------------------------------------------------------------------------
CSS INDEX
=========================================
01. Theme default css
    - Section padding css
    - Section border css
    - Section title css
    - Container css
    - button toggler css
    - Product timer css
    - Payment icon css
    - Social icon css
    - Banner hover css
    - Currency css
    - Search modal css
    - Mini cart css
    - Screen bg css
    - Preloader css
    - Quickview css
    - back-to-top css
    - Slider arrow css
    - Slider dot css
    - Scrollbar css
02. Newsletter popup css
03. Top notification css
04. Tab css
05. Header css
    - Sticky header css
    - Header top css
    - Header icon css
    - Header vegamenu css
    - Header mainmenu css
    - Header contact css
06. Slider css
07. Banner css
07. Deal product css
08. Testimonial css
09. Footer css
    - Service css
    - Newsletter css
    - footer link css
10. Copyright css
-----------------------------------------------------------------------------------*/
/* transition */
/* flex */
/* transform */
/* opacity */
/* box-shadow */
/* keyframe */

/*====================================
    font
=====================================*/
@import url('../../../../css2');
@import url('../../../../css2-1');


:root {
    /* body */
    --font-color-body: #6f6f6f;
    --font-size-body: 14px;
    --background-color-body: #ffffff;
    --font-weight-body: 400;
    --font-style-body: normal;
    --font-line-height-body: normal;

    /* heading */
    --font-color-header: #333333;
    --font-weight-header: 600;
    --font-style-header: normal;
    --font-line-height-header: normal;

    /* section-header */
    --font-color-section-header: #333333;
    --font-weight-section-header: 600;
    --font-style-section-header: normal;
    --font-line-height-section-header: normal;
    --font-text-section-header: none;

    /* paragraph */
    --font-color-paragraph: #6f6f6f;
    --font-line-height-paragraph: 25px;

    /* general color */
    --font-color-primary: #f2b90c;
    --font-color-secondary: #8c6b42;
    --extra-bgcolor: #f8f5f0;
    --ratting-color: #fe9704;

    /* header-label color */
    --header-hot-label-bgcolor: #05D14B;
    --header-sale-label-bgcolor: #FF0C32;
    --header-new-label-bgcolor: #0C32FF;

    /* product color */
    --product-sold-label-bgcolor: #dc3545;

    /* border */
    --border-color: #E2E2E2;

    /* box-shadow */
    --box-shadow-outer: 0px 0px 15px rgba(51, 51, 51, 0.15);
}

/*====================================
    Typography
=====================================*/
body {
    color: var(--font-color-body);
    font-size: var(--font-size-body);
    background-color: var(--background-color-body);
    font-family: "Outfit", sans-serif !important;
    font-weight: var(--font-weight-body);
    font-style: var(--font-style-header);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--font-line-height-body);
    letter-spacing: var(--font-letter-spacing-body);
    text-size-adjust: 100%;
}

body.hidden {
    overflow: hidden;
    padding: 0px 17px 0px 0px;
}

@media (max-width: 1199px) {
    body.hidden {
        padding: 0px;
    }
}

/*====================================
   box-layout
=====================================*/
html.box-layout {
    margin: auto;
    height: auto;
    background-color: #f6f6f6;
}

html.box-layout body {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

@media (max-width: 1199px) {
    html.box-layout body {
        max-width: 100%;
    }
}

/*====================================
    heading css
=====================================*/
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--font-color-header);
    margin: 0;
    padding: 0;
    font-family: "Outfit", sans-serif !important;
    font-weight: var(--font-weight-header);
    font-style: var(--font-style-header);
    line-height: var(--font-line-height-header);
}

/*====================================
    'p' tag css
=====================================*/
p {
    color: var(--font-color-body);
    margin: 0;
    font-family: "Outfit", sans-serif !important;
    line-height: var(--font-line-height-paragraph);
}

/*====================================
    'a' tag css
=====================================*/
a {
    color: var(--font-color-header);
    display: inline-block;
    text-decoration: none;
}

a:hover {
    color: var(--font-color-primary);
}

a,
a:hover {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

/*====================================
    'span' tag css
=====================================*/
span {
    display: inline-block;
}

/*====================================
    'button' tag css
=====================================*/
button {
    display: inline-block;
    padding: 0;
    background: 0 0;
    font-family: "Outfit", sans-serif !important;
    border: none;
    line-height: var(--font-line-height-body);
}

button,
button:hover {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

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

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

.navbar-toggler:focus {
    box-shadow: none;
}

a.disabled,
a.btn.disabled,
a.btn[disabled],
a.quick-view.disabled,
button.btn.disabled,
button.btn[disabled],
button[disabled] {
    color: #eaeaea !important;
    background-color: #ababab !important;
    opacity: .65;
    pointer-events: none;
    border-color: #ababab !important;
}

/*====================================
    btn-style css
=====================================*/
/* btn-style css */
.btn-style {
    color: var(--font-color-primary);
    font-size: 14px;
    padding: 12px 40px;
    background-color: transparent;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    font-weight: 400;
    border: 2px solid var(--font-color-primary);
    border-radius: 0;
    letter-spacing: .5px;
}

.btn-style::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background-color: var(--font-color-primary);
    z-index: -1;
}

.btn-style:hover::after {
    height: 100%;
}

.btn-style::after,
.btn-style:hover::after {
    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
}

.btn-style:hover {
    color: var(--font-color-header);
    background-color: var(--font-color-primary);
    border: 2px solid var(--font-color-primary);
}

@media (max-width: 1199px) {
    .btn-style {
        padding: 10px 40px;
    }
}

/* btn-style2 css */
.btn-style2 {
    color: var(--background-color-body);
    font-size: 14px;
    padding: 12px 30px;
    background-color: var(--font-color-header);
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 0;
    border: 2px solid var(--font-color-header);
}

.btn-style2:hover {
    color: var(--background-color-body);
    background-color: var(--font-color-primary);
    border: 2px solid var(--font-color-primary);
}

@media (max-width: 1199px) {
    .btn-style {
        padding: 10px 30px;
    }
}

/* btn-style3 css */
.btn-style3 {
    color: var(--font-color-header);
    font-size: 14px;
    padding: 12px 30px;
    background-color: var(--font-color-primary);
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    font-weight: 600;
    border: 0px solid var(--font-color-primary);
    border-radius: 0;
    letter-spacing: .5px;
}

.btn-style3:hover {
    color: var(--background-color-body);
    background-color: var(--font-color-header);
    border: 0px solid var(--font-color-header);
}

.btn-style3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background-color: var(--font-color-header);
    z-index: -1;
}

.btn-style3:hover::after {
    height: 100%;
}

.btn-style3::after,
.btn-style3:hover::after {
    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
}

/*====================================
    'ul' tag css
=====================================*/
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*====================================
    'other' tag css
=====================================*/
input,
select,
textarea {
    color: var(--font-family-body);
    font-size: var(--font-size-body);
    padding: 10px 15px;
    background-color: var(--background-color-body);
    font-family: var(--font-family-body);
    text-transform: none;
    font-weight: var(--font-weight-body);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

input::placeholder,
textarea::placeholder {
    color: var(--font-color-body);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border: 1px solid var(--border-color);
    box-shadow: none;
}

input.disabled,
input[disabled],
select.disabled,
select[disabled],
textarea.disabled,
textarea[disabled] {
    color: var(--font-color-body);
    background-color: var(--background-color-body);
    border: 1px solid var(--border-color);
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear,
input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/*====================================
    section-padding css
=====================================*/
.section-ptb {
    padding: 100px 0px;
}

.section-pt {
    padding: 100px 0px 0px;
}

.section-pb {
    padding: 0px 0px 100px 0px;
}

@media (max-width: 1199px) {
    .section-ptb {
        padding: 80px 0px;
    }

    .section-pt {
        padding: 80px 0px 0px;
    }

    .section-pb {
        padding: 0px 0px 80px 0px;
    }
}

@media (max-width: 767px) {
    .section-ptb {
        padding: 60px 0px;
    }

    .section-pt {
        padding: 60px 0px 0px;
    }

    .section-pb {
        padding: 0px 0px 60px 0px;
    }
}

/*====================================
    section-border css
=====================================*/
.bt {
    border-top: 1px solid var(--border-color);
}

/*====================================
    section-title css
=====================================*/
.section-capture {
    margin: 0px 0px 50px 0px;
    text-align: center;
}

.section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-cont-title span.sub-title {
    color: var(--font-color-secondary);
    font-size: 16px;
    margin: 0px 0px 12px 0px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 2px solid var(--font-color-secondary);
    line-height: 1;
}

.section-title h2 {
    color: var(--font-color-section-header);
    font-size: 50px;
    font-family: var(--font-family-section-header);
    text-transform: var(--font-text-section-header);
    font-weight: var(--font-weight-section-header);
    font-style: var(--font-style-section-header);
    line-height: var(--font-line-height-section-header);
}

.section-title h2 span {
    display: block;
}

.section-title p {
    max-width: 41.66%;
    margin: 10px auto 0px;
}

@media (max-width: 1199px) {
    .section-capture {
        margin: 0px 0px 40px 0px;
    }

    .section-cont-title span.sub-title {
        margin: 0px 0px 9px 0px;
    }

    .section-title h2 {
        font-size: 40px;
    }

    .section-title p {
        max-width: 50%;
    }
}

@media (max-width: 991px) {
    .section-title p {
        max-width: 66.66%;
    }
}

@media (max-width: 767px) {
    .section-capture {
        margin: 0px 0px 30px 0px;
    }

    .section-cont-title span.sub-title {
        font-size: 14px;
        margin: 0px 0px 8px 0px;
    }

    .section-title h2 {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .section-title p {
        max-width: 83.33%;
    }
}

@media (max-width: 479px) {
    .section-cont-title span.sub-title {
        margin: 0px 0px 6px 0px;
    }

    .section-title h2 {
        font-size: 24px;
    }

    .section-title p {
        max-width: 100%;
        margin: 14px auto 0px;
    }
}

/*====================================
    container css
=====================================*/
.container {
    max-width: 1380px;
    padding: 0px 15px;
}

@media (max-width: 1499px) {
    .container {
        max-width: 1320px;
    }
}

@media (max-width: 1399px) {
    .container {
        max-width: 1140px;
    }
}

@media (max-width: 1199px) {
    .container {
        max-width: 960px;
        padding: 0px 12px;
    }
}

@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
}

@media (max-width: 767px) {
    .container {
        max-width: 100%;
    }
}

/*====================================
   container-fluid css
=====================================*/
.container-fluid {
    padding: 0px 45px;
}

@media (max-width: 1499px) {
    .container-fluid {
        padding: 0px 30px;
    }
}

@media (max-width: 1199px) {
    .container-fluid {
        padding: 0px 12px;
    }
}

/*====================================
    top notification css
=====================================*/
.top-notification-bar {
    position: relative;
    background-color: var(--background-color-body);
}

.top-notification-bar ul.notification-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.top-notification-bar ul li.notify-wrap p {
    color: var(--font-color-body);
    font-size: 14px;
    padding: 10px 0px;
    text-transform: uppercase;
    line-height: normal;
}

.top-notification-bar ul li.coupan-text p span.code-text {
    color: var(--font-color-body);
    font-weight: 400;
}

.top-notification-bar ul li.notify-wrap.other-wrap {
    display: flex;
    align-items: center;
}

.top-notification-bar ul li.other-wrap .user-wrap {
    width: 100%;
}

/* acc-link css */
ul.acc-single li.acc-link {
    display: flex;
}

ul.acc-single li.acc-link a {
    display: block;
    -webkit-transition: all 0s ease-in-out 0s;
    -o-transition: all 0s ease-in-out 0s;
    transition: all 0s ease-in-out 0s;
}

.top-notification-bar ul li.other-wrap .user-wrap ul.acc-single li.acc-link a {
    color: var(--font-color-body);
    font-size: 14px;
    position: relative;
    text-transform: uppercase;
}

.top-notification-bar ul li.other-wrap .user-wrap ul.acc-single li.acc-link a:hover {
    color: var(--font-color-primary);
}

.top-notification-bar ul li.other-wrap .user-wrap ul.acc-single li.acc-link a:first-child {
    padding: 10px 15px 10px 0px;
}

.top-notification-bar ul li.other-wrap .user-wrap ul.acc-single li.acc-link a:last-child {
    padding: 10px 0px 10px 15px;
}

.top-notification-bar ul li.other-wrap .user-wrap ul.acc-single li.acc-link a::before {
    content: "";
    left: 0;
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    height: 50%;
    width: 1px;
    background-color: var(--border-color);
}

.top-notification-bar ul li.other-wrap .user-wrap ul.acc-single li.acc-link a:first-child::before {
    display: none;
}

@media (max-width: 479px) {
    .top-notification-bar ul.notification-entry {
        flex-direction: column;
    }

    .top-notification-bar ul li.notify-wrap {
        width: 100%;
    }

    .top-notification-bar ul li.coupan-text p {
        text-align: center;
        border-bottom: 1px solid var(--border-color);
    }

    ul.acc-single li.acc-link {
        justify-content: space-between;
    }

    .top-notification-bar ul li.other-wrap .user-wrap ul.acc-single li.acc-link a::before {
        position: unset;
    }
}

/*====================================
    sticky-header css
====================================*/
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    max-width: 1380px;
    margin: 0 auto;
    background-color: var(--background-color-body);
    animation: smoothScroll 1s forwards;
    box-shadow: var(--box-shadow-outer);
}

/*====================================
   menu-browse css
=====================================*/
.megamenu-content a.menu-browse {
    font-size: 16px;
    padding: 10px 15px;
    display: none;
    align-items: center;
    justify-content: space-between;
}

.megamenu-content a.menu-browse,
.megamenu-content a.menu-browse[aria-expanded="false"] {
    color: var(--font-color-body);
    background-color: var(--background-color-body);
}

.megamenu-content a.menu-browse[aria-expanded="true"] {
    color: var(--font-color-header);
    background-color: var(--background-color-body);
}

.megamenu-content a.menu-browse span {
    display: block;
}

.megamenu-content a.menu-browse span.menu-icon {
    font-size: 16px;
    margin: 0px 10px 0px 0px;
    line-height: 0;
}

.megamenu-content a.menu-browse span.menu-title {
    margin: 0px auto 0px 0px;
    font-weight: 600;
}

.megamenu-content a.menu-browse span.menu-arrow {
    font-size: 10px;
    line-height: 0;
}

.megamenu-content a.menu-browse[aria-expanded="true"] span.menu-arrow i {
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

@media (max-width: 1199px) {
    .megamenu-content a.menu-browse {
        display: flex;
    }
}

/*====================================
    header css
=====================================*/
.header-area {
    background-color: var(--background-color-body);
}

.header-area .header-main-area {
    position: relative;
}

.header-area .header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-area .header-main .header-element.header-menu {
    padding: 0px 0px 0px 15px;
    margin: 0px auto 0px 30px;
    border-left: 1px solid var(--border-color);
}

/*====================================
    header-logo css
=====================================*/
a.theme-logo {
    display: block;
}

a.theme-logo img {
    width: 105px;
}

/*====================================
    header-icon css
=====================================*/
.header-icon ul.shop-element {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.header-icon ul.shop-element li.side-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 30px 0 30px 30px;
    margin: 0px 0px 0px 30px;
    border-left: 1px solid var(--border-color);
}

.header-icon ul.shop-element li.side-wrap:first-child {
    padding: 0px;
    margin: 0px;
    border-left: none;
}

.header-icon ul.shop-element li.side-wrap.toggler-wrap {
    display: none;
}

@media (max-width: 1199px) {
    .header-icon ul.shop-element li.side-wrap.toggler-wrap {
        display: block;
    }

    .header-icon ul.shop-element li.side-wrap {
        padding: 15px 0px 15px 15px;
        margin: 0px 0px 0px 15px;
    }
}

@media (max-width: 767px) {
    .header-icon ul.shop-element li.side-wrap {
        padding: 15px 0px;
        border: none;
    }
}

@media (max-width: 600px) {

    .header-icon ul.shop-element li.side-wrap.wishlist-wrap,
    .header-icon ul.shop-element li.side-wrap.cart-wrap {
        display: none;
    }
}

/*=====================================
    main-menu-wrap css
======================================*/
.mobile-menu {
    display: none;
}

@media (max-width: 1199px) {
    .mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        left: calc(0% - 320px);
        width: 320px;
        height: 100%;
        max-width: calc(100% - 30px);
        overflow-y: auto;
        background-color: var(--background-color-body);
        z-index: 3;
        opacity: 0;
        visibility: hidden;
        box-shadow: var(--box-shadow-outer);
    }

    .mobile-menu.active {
        left: 0;
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu,
    .mobile-menu.active {
        -webkit-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
    }
}

/*=====================================
    menu-close-btn css
======================================*/
.mobile-menu .close-btn {
    padding: 10px 15px;
}

.mobile-menu .close-btn button.close-box {
    display: block;
    color: var(--font-color-body);
    font-size: 16px;
    margin: 0px 0px 0px auto;
    line-height: 0;
}

.mobile-menu .close-btn button.close-box:hover {
    color: var(--font-color-header);
}

.mobile-menu .main-menu-wrap {
    border-bottom: 1px solid var(--border-color);
}

.mobile-menu .main-menu-wrap .mega-menu-area {
    border-top: 1px solid var(--border-color);
}

/*=====================================
    main-menu-wrap css
======================================*/
.main-menu-area .main-menu-wrap {
    display: flex;
}

/*====================================
   home-menu css
=====================================*/
.megamenu-content .main-wrap ul.main-menu li.menu-link:hover .menu-dropdown.shop-menu .collapse:not(.show) {
    display: block;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu {
    left: 0;
    right: 0;
    margin: 0 auto;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul {
    display: flex;
    flex-wrap: wrap;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li {
    width: 25%;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li a.shoplink-title {
    display: block;
    color: var(--font-color-body);
    font-size: 16px;
    width: 100%;
    padding: 10px 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 600;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li a.shoplink-title:hover {
    color: var(--font-color-primary);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li a.shoplink-title.shoplink-title-lg {
    display: none;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li ul.shopsupmenu-dropdown.collapse:not(.show) {
    display: block;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li ul.shopsupmenu-dropdown li.shopsupmenu-li a.shopsuplink-title {
    display: block;
    color: var(--font-color-body);
    font-size: 14px;
    width: 100%;
    padding: 10px 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--background-color-body);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li ul.shopsupmenu-dropdown li.shopsupmenu-li:hover a.shopsuplink-title {
    color: var(--font-color-header);
    background-color: var(--extra-bgcolor);
}

@media (max-width: 1199px) {
    .megamenu-content .main-wrap ul.main-menu li.menu-link:hover .menu-dropdown.shop-menu .collapse:not(.show) {
        display: block;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li {
        width: 100%;
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li a.shoplink-title {
        display: none;
        font-size: 14px;
        padding: 10px 15px 10px 25px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li a.shoplink-title span.menu-arrow {
        font-size: 10px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li a.shoplink-title.shoplink-title-lg {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li a.shoplink-title.shoplink-title-lg,
    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li a.shoplink-title.shoplink-title-lg[aria-expanded=false] {
        color: var(--font-color-body);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li a.shoplink-title.shoplink-title-lg[aria-expanded=true] {
        color: var(--font-color-primary);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li ul.shopsupmenu-dropdown.collapse:not(.show) {
        display: none;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li ul.shopsupmenu-dropdown li.shopsupmenu-li {
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu .ul li.shoplink-li ul.shopsupmenu-dropdown li.shopsupmenu-li a.shopsuplink-title {
        padding: 10px 15px 10px 35px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li a.shoplink-title-lg[aria-expanded="true"] span.menu-arrow {
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

/*====================================
    main-menu css
=====================================*/
.megamenu-content .main-wrap ul.main-menu {
    display: flex;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title {
    color: var(--font-color-header);
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 30px 15px;
    font-weight: 600;
    white-space: nowrap;
}

.mega-con .megamenu-content .main-wrap ul.main-menu li.menu-link:first-child a.link-title {
    padding: 12px 15px 12px 0px;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg {
    display: none;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link:hover a.link-title {
    color: var(--font-color-primary);
    background-color: var(--background-color-body);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title span.sp-link-title {
    display: block;
    position: relative;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title span.menu-arrow {
    display: block;
    font-size: 10px;
    margin: 0px 0px 0px 5px;
    line-height: 0;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown {
    position: absolute;
    top: 100%;
    padding: 20px 15px;
    background-color: var(--background-color-body);
    box-shadow: var(--box-shadow-outer);
    z-index: 2;
    -webkit-animation-name: DropDownSlide;
    animation-name: DropDownSlide;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link:hover .menu-dropdown.collapse:not(.show) {
    display: block;
}

@media (max-width: 1199px) {
    .megamenu-content .main-wrap ul.main-menu {
        flex-direction: column;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link {
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title {
        display: none;
        color: var(--font-color-body);
        font-size: 14px;
        padding: 10px 15px;
        text-transform: none;
    }

    .mega-con .megamenu-content .main-wrap ul.main-menu li.menu-link:first-child a.link-title {
        padding: 10px 15px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg,
    .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg[aria-expanded="false"] {
        color: var(--font-color-header);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg[aria-expanded="true"] {
        color: var(--font-color-primary);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title span.menu-arrow {
        margin: 0px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg[aria-expanded="true"] span.menu-arrow i {
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown {
        position: unset;
        padding: 0px;
        -webkit-animation-name: unset;
        animation-name: unset;
        -webkit-animation-duration: unset;
        animation-duration: unset;
        -webkit-animation-fill-mode: unset;
        animation-fill-mode: unset;
        box-shadow: none;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link:hover .menu-dropdown.collapse:not(.show) {
        display: none;
    }
}

/*====================================
    single-menu css
=====================================*/
.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.single-menu {
    min-width: 175px;
    left: auto;
    padding: 0px;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .single-menu li.singlemenu-li a.singlelink-title {
    display: block;
    color: var(--font-color-body);
    padding: 10px 15px;
    background-color: var(--background-color-body);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .single-menu li.singlemenu-li:hover a.singlelink-title {
    color: var(--font-color-header);
    background-color: var(--background-color-body);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .single-menu li.singlemenu-li a.singlelink-title span.sp-link-title {
    display: block;
    position: relative
}

@media (max-width: 1199px) {
    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.single-menu {
        min-width: 100%;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .single-menu li.singlemenu-li {
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .single-menu li.singlemenu-li a.singlelink-title {
        padding: 10px 15px 10px 25px;
    }
}

/* mainmenu-shop collection css */
.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown ul.ul {
    display: flex;
    flex-wrap: wrap;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.menu-li .shop-title a {
    display: block;
    color: var(--font-color-body);
    font-size: 16px;
    padding: 10px 15px;
    text-transform: uppercase;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.menu-li .shop-title a:hover {
    color: var(--font-color-primary);
}

@media (max-width: 1199px) {
    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.menu-li .shop-title a {
        font-size: 14px;
        padding: 15px 15px 0px 25px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.menu-li .shop-title:last-child a {
        padding: 15px 15px 15px 25px;
    }
}

/*====================================
    shop-menu css
=====================================*/
.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu {
    left: 0;
    right: 0;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li {
    width: 25%;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li a.shoplink-title {
    display: block;
    color: var(--font-color-body);
    font-size: 16px;
    padding: 10px 15px;
    font-weight: 600;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li a.shoplink-title.shoplink-title-lg {
    display: none;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li:hover a.shoplink-title {
    color: var(--font-color-primary);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li a.shoplink-title span.sp-link-title {
    display: block;
    position: relative
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li ul.shopsupmenu-dropdown li.shopsupmenu-li a.shopsuplink-title {
    display: block;
    color: var(--font-color-body);
    font-size: 14px;
    padding: 10px 15px;
    background-color: var(--background-color-body);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li ul.shopsupmenu-dropdown li.shopsupmenu-li:hover a.shopsuplink-title {
    color: var(--font-color-header);
    background-color: var(--extra-bgcolor);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li ul.shopsupmenu-dropdown li.shopsupmenu-li a.shopsuplink-title span.sp-link-title {
    display: block;
    position: relative
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li .shop-banner a {
    display: block;
    margin: 10px 15px;
    overflow: hidden;
}

@media (max-width: 1199px) {
    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li {
        width: 100%;
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li a.shoplink-title {
        display: none;
        font-size: 14px;
        padding: 10px 15px 10px 25px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li a.shoplink-title.shoplink-title-lg {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .shop-menu ul.ul li.shopmenu-li a.shoplink-title.shoplink-title-lg,
    .megamenu-content .main-wrap ul.main-menu li.menu-link .shop-menu ul.ul li.shopmenu-li a.shoplink-title.shoplink-title-lg[aria-expanded="false"] {
        color: var(--font-color-body);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .shop-menu ul.ul li.shopmenu-li a.shoplink-title.shoplink-title-lg[aria-expanded="true"] {
        color: var(--font-color-primary);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .shop-menu ul.ul li.shopmenu-li a.shoplink-title.shoplink-title-lg span.menu-arrow {
        display: block;
        font-size: 10px;
        line-height: 0;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .shop-menu ul.ul li.shopmenu-li a.shoplink-title.shoplink-title-lg[aria-expanded="true"] span.menu-arrow i {
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .shop-menu ul.ul li.shopmenu-li ul.shopsupmenu-dropdown.collapse:not(.show) {
        display: none;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .shop-menu ul.ul li.shopmenu-li ul.shopsupmenu-dropdown li.shopsupmenu-li {
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li ul.shopsupmenu-dropdown li.shopsupmenu-li a.shopsuplink-title {
        padding: 10px 15px 10px 35px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shopmenu-li .shop-banner a {
        margin: 15px 15px 15px 25px;
    }
}

/*====================================
    product-menu css
=====================================*/
.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.product-menu {
    left: 0;
    right: 0;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li {
    width: 25%;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li a.productlink-title {
    display: block;
    color: var(--font-color-body);
    font-size: 16px;
    padding: 10px 15px;
    font-weight: 600;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li a.productlink-title.productlink-title-lg {
    display: none;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li:hover a.productlink-title {
    color: var(--font-color-primary);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li a.productlink-title span.sp-link-title {
    display: block;
    position: relative
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li ul.productsupmenu-dropdown.collapse:not(.show) {
    display: block;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li ul.productsupmenu-dropdown li.productsupmenu-li a.productsuplink-title {
    display: block;
    color: var(--font-color-body);
    font-size: 14px;
    padding: 10px 15px;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li ul.productsupmenu-dropdown li.productsupmenu-li:hover a.productsuplink-title {
    color: var(--font-color-header);
    background-color: var(--extra-bgcolor);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li ul.productsupmenu-dropdown li.productsupmenu-li a.productsuplink-title span.sp-link-title {
    display: block;
    position: relative
}

@media (max-width: 1199px) {
    .megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li {
        width: 100%;
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li a.productlink-title {
        display: none;
        font-size: 14px;
        padding: 10px 15px 10px 25px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li a.productlink-title.productlink-title-lg {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li a.productlink-title.productlink-title-lg,
    .megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li a.productlink-title.productlink-title-lg[aria-expanded="false"] {
        color: var(--font-color-body);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li a.productlink-title.productlink-title-lg[aria-expanded="true"] {
        color: var(--font-color-primary);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li a.productlink-title.productlink-title-lg span.menu-arrow {
        display: block;
        font-size: 10px;
        line-height: 0;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li a.productlink-title.productlink-title-lg[aria-expanded="true"] span.menu-arrow i {
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li ul.productsupmenu-dropdown.collapse:not(.show) {
        display: none;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li ul.productsupmenu-dropdown li.productsupmenu-li {
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .product-menu ul.ul li.productmenu-li ul.productsupmenu-dropdown li.productsupmenu-li a.productsuplink-title {
        padding: 10px 15px 10px 35px;
    }
}

/*====================================
   menu-product css
=====================================*/
.menu-product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.menu-product ul.product-ul li.product-li {
    padding: 10px 15px;
}

.menu-product ul.product-ul li.product-li .product-menu-list .single-product-wrap {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.menu-product ul.product-ul li.product-li .product-menu-list .single-product-wrap .product-image {
    width: 90px;
}

.menu-product ul.product-ul li.product-li .product-menu-list .single-product-wrap .product-content {
    width: calc(100% - 90px);
    align-items: flex-start;
    justify-content: center;
    padding: 0px 0px 0px 15px;
    text-align: left;
}

.menu-product ul.product-ul li.product-li .product-menu-list .single-product-wrap .product-content h6 {
    font-size: 16px;
    font-weight: 600;
}

.menu-product ul.product-ul li.product-li .product-menu-list .single-product-wrap .product-content h6 a {
    color: var(--font-color-header);
}

.menu-product ul.product-ul li.product-li .product-menu-list .single-product-wrap .product-content h6 a:hover {
    color: var(--font-color-primary);
}

.menu-product ul.product-ul li.product-li .product-menu-list .single-product-wrap .product-content .price-box {
    margin: 7px 0px 0px;
}

.menu-product .menu-product-btn a {
    color: var(--font-color-body);
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
}

.menu-product .menu-product-btn a:hover {
    color: var(--font-color-primary);
}

.menu-product .menu-product-btn a i {
    display: block;
    margin: 0px 0px 0px 5px;
    line-height: 0;
}

@media (max-width: 1199px) {
    .menu-product ul.product-ul li.product-li {
        padding: 15px 15px 0px 25px;
    }

    .menu-product .menu-product-btn a {
        padding: 15px 15px 15px 25px;
    }
}

/*====================================
    mainmenu-banner css
=====================================*/
.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.banner-menu {
    left: 0;
    right: 0;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .banner-menu ul.ul li.bannermenu-li {
    width: 33.33%;
    text-align: center;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .banner-menu ul.ul li.bannermenu-li a.collection-img {
    display: block;
    margin: 10px 15px;
    overflow: hidden;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .banner-menu ul.ul li.bannermenu-li a.collection-title {
    display: block;
    color: var(--font-color-body);
    font-size: 14px;
    font-weight: 600;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .banner-menu ul.ul li.bannermenu-li:hover a.collection-title {
    color: var(--font-color-primary);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .banner-menu ul.ul li.bannermenu-li a.collection-title span {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0px 15px 10px 15px;
}

@media (max-width: 1199px) {
    .megamenu-content .main-wrap ul.main-menu li.menu-link .banner-menu ul.ul li.bannermenu-li {
        width: 100%;
        text-align: left;
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .banner-menu ul.ul li.bannermenu-li a.collection-img {
        margin: 15px 15px 0px 25px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .banner-menu ul.ul li.bannermenu-li a.collection-title span {
        padding: 10px 15px 10px 25px;
    }
}

/*====================================
    blog-menu css
=====================================*/
.megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown.blog-menu {
    left: 0;
    right: 0;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li {
    width: 25%;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li a.bloglink-title {
    display: block;
    color: var(--font-color-body);
    font-size: 16px;
    padding: 10px 15px;
    font-weight: 600;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li a.bloglink-title.bloglink-title-lg {
    display: none;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li:hover a.bloglink-title {
    color: var(--font-color-primary);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li a.bloglink-title span.sp-link-title {
    display: block;
    position: relative
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li ul.blogsupmenu-dropdown.collapse:not(.show) {
    display: block;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li ul.blogsupmenu-dropdown li.blogsupmenu-li a.blogsuplink-title {
    display: block;
    color: var(--font-color-body);
    font-size: 14px;
    padding: 10px 15px;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li ul.blogsupmenu-dropdown li.blogsupmenu-li:hover a.blogsuplink-title {
    color: var(--font-color-header);
    background-color: var(--extra-bgcolor);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li ul.blogsupmenu-dropdown li.blogsupmenu-li a.blogsuplink-title span.sp-link-title {
    display: block;
    position: relative
}

.megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li .shop-banner a {
    display: block;
    margin: 10px 15px;
    overflow: hidden;
}

@media (max-width: 1199px) {
    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li {
        width: 100%;
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li a.bloglink-title {
        display: none;
        font-size: 14px;
        padding: 10px 15px 10px 25px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li a.bloglink-title.bloglink-title-lg {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li a.bloglink-title.bloglink-title-lg,
    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li a.bloglink-title.bloglink-title-lg[aria-expanded="false"] {
        color: var(--font-color-body);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li a.bloglink-title.bloglink-title-lg[aria-expanded="true"] {
        color: var(--font-color-primary);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li a.bloglink-title.bloglink-title-lg span.menu-arrow {
        display: block;
        font-size: 10px;
        line-height: 0;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li a.bloglink-title.bloglink-title-lg[aria-expanded="true"] span.menu-arrow i {
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li ul.blogsupmenu-dropdown.collapse:not(.show) {
        display: none;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li ul.blogsupmenu-dropdown li.blogsupmenu-li {
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li ul.blogsupmenu-dropdown li.blogsupmenu-li a.blogsuplink-title {
        padding: 10px 15px 10px 35px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .blog-menu ul.ul li.blogmenu-li .shop-banner a {
        margin: 15px 15px 15px 25px;
    }
}

/*====================================
    menu-blog css
=====================================*/
.menu-blog {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.menu-blog ul.blog-ul li.blog-li {
    padding: 15px 15px 0;
}

.menu-blog ul.blog-ul li.blog-li .blog-menu-list .blog-post {
    display: block;
    margin: 0px;
    padding: 0px;
    box-shadow: none;
}

.menu-blog ul.blog-ul li.blog-li .blog-menu-list .blog-post .blog-text {
    width: unset;
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: flex-start;
    background-color: transparent;
    text-align: left;
}

.menu-blog ul.blog-ul li.blog-li .blog-menu-list .blog-post h6.blog-title {
    color: var(--font-color-body);
    font-size: 16px;
    font-weight: 600;
}

.menu-blog ul.blog-ul li.blog-li .blog-menu-list .blog-post h6.blog-title a {
    color: var(--font-color-body);
}

.menu-blog ul.blog-ul li.blog-li .blog-menu-list .blog-post h6.blog-title a:hover {
    color: var(--font-color-primary);
}

.menu-blog .menu-blog-btn a.menu-blog-link {
    color: var(--font-color-body);
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
}

.menu-blog .menu-blog-btn a.menu-blog-link:hover {
    color: var(--font-color-primary);
}

.menu-blog .menu-blog-btn a.menu-blog-link i {
    display: block;
    margin: 0px 0px 0px 5px;
    line-height: 0;
}

@media (max-width: 1199px) {
    .menu-blog ul.blog-ul li.blog-li {
        padding: 10px 15px 10px 25px;
    }

    .menu-blog .menu-blog-btn a.menu-blog-link {
        padding: 15px 15px 15px 25px;
    }
}

/*====================================
    mainmenu-sub css
=====================================*/
.megamenu-content .main-wrap ul.main-menu li.menu-link ul.menu-dropdown.sub-menu {
    min-width: 175px;
    left: auto;
    padding: 0px;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li {
    position: relative;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li a.sublink-title {
    color: var(--font-color-body);
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li a.sublink-title.sublink-title-lg {
    display: none;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li:hover a.sublink-title {
    color: var(--font-color-header);
    background-color: var(--extra-bgcolor);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li a.sublink-title span.sp-link-title {
    display: block;
    position: relative
}

.megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li a.sublink-title span.menu-arrow {
    display: block;
    font-size: 10px;
    line-height: 0;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li ul.submenu-dropdown {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    background-color: var(--background-color-body);
    -webkit-animation-name: DropDownSlide;
    animation-name: DropDownSlide;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    box-shadow: var(--box-shadow-outer);
    z-index: 2;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li:hover ul.submenu-dropdown.collapse:not(.show) {
    display: block;
}

.megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li ul.submenu-dropdown li.supmenu-li a.suplink-title {
    display: block;
    color: var(--font-color-body);
    padding: 10px 15px;
    background-color: var(--background-color-body);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li ul.submenu-dropdown li.supmenu-li:hover a.suplink-title {
    color: var(--font-color-header);
    background-color: var(--extra-bgcolor);
}

.megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li ul.submenu-dropdown li.supmenu-li a.suplink-title span.sp-link-title {
    display: block;
    position: relative;
}

@media (max-width: 1199px) {
    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.menu-dropdown.sub-menu {
        min-width: 100%;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li {
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li a.sublink-title {
        display: none;
        padding: 10px 15px 10px 25px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li a.sublink-title.sublink-title-lg {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li a.sublink-title.sublink-title-lg,
    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li a.sublink-title.sublink-title-lg[aria-expanded="false"] {
        color: var(--font-color-body);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li a.sublink-title.sublink-title-lg[aria-expanded="true"] {
        color: var(--font-color-header);
        background-color: var(--background-color-body);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li a.sublink-title.sublink-title-lg[aria-expanded="true"] span.menu-arrow i {
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li ul.submenu-dropdown {
        background-color: var(--background-color-body);
        position: unset;
        -webkit-animation-name: unset;
        animation-name: unset;
        -webkit-animation-duration: unset;
        animation-duration: unset;
        -webkit-animation-fill-mode: unset;
        animation-fill-mode: unset;
        box-shadow: none;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li:hover ul.submenu-dropdown.collapse:not(.show) {
        display: none;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li ul.submenu-dropdown li.supmenu-li {
        border-top: 1px solid var(--border-color);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link ul.sub-menu li.submenu-li ul.submenu-dropdown li.supmenu-li a.suplink-title {
        padding: 10px 15px 10px 35px;
    }
}

/*====================================
    slider css
=====================================*/
.slider-content .home-slider .slide-image {
    display: flex;
    position: relative;
    z-index: 1;
}

.slider-content .home-slider .slide-image img.mobile-img {
    display: none;
}

@media (max-width: 767px) {
    .slider-content .home-slider .slide-image img.desk-img {
        display: none;
    }

    .slider-content .home-slider .slide-image img.mobile-img {
        display: block;
    }
}

/* slider-info-content css */
.slider-content .home-slider .slide-image .slider-info-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
    transform: translateY(50%);
}

.slider-content .home-slider .slide-image .slider-info-content .slider-text-info {
    width: 50%;
}

.slider-content .home-slider .slide-image .slider-info-content .slider-text-info.slider-content-left {
    margin: 0px auto 0px 0px;
}

.slider-content .home-slider .slide-image .slider-info-content .slider-text-info.slider-text-left {
    text-align: left;
}

.slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

@media (max-width: 479px) {
    .slider-content .home-slider .slide-image .slider-info-content .slider-text-info {
        width: 75%;
    }
}

/* effect transition css */
.slider-content .home-slider .owl-item.active .slide-image .slider-info-content .slider-text-info span.sub-title,
.slider-content .home-slider .owl-item.active .slide-image .slider-info-content .slider-text-info h2,
.slider-content .home-slider .owl-item.active .slide-image .slider-info-content .slider-text-info a {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slider-content .home-slider .owl-item.active .slide-image .slider-info-content .slider-text-info span.sub-title,
.slider-content .home-slider .owl-item.active .slide-image .slider-info-content .slider-text-info h2 {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}

.slider-content .home-slider .owl-item.active .slide-image .slider-info-content .slider-text-info a {
    -webkit-animation-delay: 2.0s;
    animation-delay: 2.0s;
    -webkit-animation-duration: 2.0s;
    animation-duration: 2.0s;
}

/* effect style css */
.slider-content .home-slider .owl-item.active .slide-image .slider-info-content .slider-text-info span.sub-title {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.slider-content .home-slider .owl-item.active .slide-image .slider-info-content .slider-text-info span,
.slider-content .home-slider .owl-item.active .slide-image .slider-info-content .slider-text-info h2,
.slider-content .home-slider .owl-item.active .slide-image .slider-info-content .slider-text-info a {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/* sub-title css */
.slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-upto span.sub-title {
    color: var(--background-color-body);
    font-size: 14px;
    width: 30px;
    display: flex;
    align-items: center;
    padding: 15px 0px;
    margin: 0px 30px 0px 0px;
    background-color: var(--font-color-primary);
    writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
}

.slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-upto span.sub-title span {
    display: block;
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* slider-text-main css */
.slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-main {
    width: calc(100% - 60px);
}

.slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-main h2 {
    color: var(--background-color-body);
    font-size: 95px;
    font-family: 'Playfair Display', sans-serif;
    text-transform: uppercase;
    line-height: 1;
}

.slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-main a {
    margin: 92px 0px 0px;
}

@media (max-width: 1499px) {
    .slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-main h2 {
        font-size: 70px;
    }

    .slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-main a {
        margin: 74px 0px 0px;
    }
}

@media (max-width: 1199px) {
    .slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-main h2 {
        font-size: 60px;
    }

    .slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-main a {
        margin: 55px 0px 0px;
    }
}

@media (max-width: 767px) {
    .slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-main h2 {
        font-size: 40px;
    }

    .slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-main a {
        margin: 46px 0px 0px;
    }
}

@media (max-width: 479px) {
    .slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-upto span.sub-title {
        margin: 0px 12px 0px 0px;
    }

    .slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-main h2 {
        font-size: 24px;
    }

    .slider-content .home-slider .slide-image .slider-info-content .slider-text-info .slider-text-wrap .slider-text-main a {
        margin: 38px 0px 0px;
    }
}

/*====================================
    offer-text css
=====================================*/
.offer-text-template {
    padding: 15px 0px;
    background-color: var(--extra-bgcolor);
}

.offer-text-template .offer-text-wrap {
    overflow: hidden;
}

.offer-text-template .offer-text-wrap ul {
    display: flex;
    align-items: center;
}

.offer-text-template .offer-text-wrap ul li {
    display: flex;
}

.offer-text-template .offer-text-wrap ul li.text1 {
    -webkit-animation: slide1 50s linear infinite;
    animation: slide1 50s linear infinite;
    -webkit-animation-delay: -50s;
    animation-delay: -50s;
}

.offer-text-template .offer-text-wrap ul li.text2 {
    -webkit-animation: slide2 50s linear infinite;
    animation: slide2 50s linear infinite;
    -webkit-animation-delay: -25s;
    animation-delay: -25s;
}

.offer-text-template .offer-text-wrap:hover ul li,
.offer-text-template .offer-text-wrap ul li:focus-within ul li {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.offer-text-template .offer-text-wrap ul li span {
    color: var(--font-color-secondary);
    display: block;
    font-size: 16px;
    white-space: nowrap;
    position: relative;
    padding: 0px 0px 0px 30px;
    margin: 0px 0px 0px 30px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
}

.offer-text-template .offer-text-wrap ul li span::before {
    content: "\f151";
    font-family: bootstrap-icons !important;
    position: absolute;
    font-size: 10px;
    left: -5px;
    bottom: 50%;
    transform: translateY(50%);
}

/*====================================
    banner-grid categories css
=====================================*/
.banner-grid .banner-content-info ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -30px 0px 0px -30px;
}

.banner-grid .banner-content-info ul li {
    width: calc(33.33% - 30px);
    margin: 30px 0px 0px 30px;
}

@media (max-width: 767px) {
    .banner-grid .banner-content-info ul {
        margin: -30px 0px 0px -12px;
    }

    .banner-grid .banner-content-info ul li {
        width: calc(33.33% - 12px);
        margin: 30px 0px 0px 12px;
    }
}

@media (max-width: 600px) {
    .banner-grid .banner-content-info ul li {
        width: calc(100% - 12px);
    }
}

/* banner-img css */
.banner-grid .banner-content-info ul li .banner-block a.banner-img {
    position: relative;
}

.banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-content {
    position: absolute;
    top: 30px;
    left: 30px;
}

.banner-grid .banner-content-info ul li:hover .banner-block a.banner-img .banner-content {
    opacity: 0;
    visibility: hidden;
}

.banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-content,
.banner-grid .banner-content-info ul li:hover .banner-block a.banner-img .banner-content {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-content h2 {
    color: var(--font-color-header);
    font-size: 24px;
    font-family: 'Playfair Display', sans-serif;
}

.banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-content h2 span {
    display: block;
}

/* banner-count css */
.banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-count {
    position: absolute;
    bottom: 50px;
    left: 30px;
}

.banner-grid .banner-content-info ul li:hover .banner-block a.banner-img .banner-count {
    opacity: 0;
    visibility: hidden;
}

.banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-count,
.banner-grid .banner-content-info ul li:hover .banner-block a.banner-img .banner-count {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-count span.banner-item {
    display: block;
    color: var(--font-color-body);
    font-size: 16px;
    writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    text-transform: uppercase;
    line-height: 1;
}

.banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-count span.banner-item span {
    display: block;
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* link-icon css */
.banner-grid .banner-content-info ul li .banner-block a.banner-img span.link-icon {
    color: var(--font-color-header);
    font-size: 32px;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    height: 75px;
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--font-color-primary);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    border-radius: 100%;
    line-height: 0;
}

.banner-grid .banner-content-info ul li:hover .banner-block a.banner-img span.link-icon {
    opacity: 1;
    visibility: visible;
}

.banner-grid .banner-content-info ul li .banner-block a.banner-img span.link-icon:hover {
    color: var(--font-color-header);
    background-color: var(--background-color-body);
}

.banner-grid .banner-content-info ul li .banner-block a.banner-img span.link-icon,
.banner-grid .banner-content-info ul li:hover .banner-block a.banner-img span.link-icon {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.banner-grid .banner-content-info ul li .banner-block a.banner-img span.link-icon i {
    display: block;
    line-height: 0;
}

@media (max-width: 1199px) {

    .banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-content,
    .banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-count {
        left: 15px;
    }

    .banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-content {
        top: 15px;
    }

    .banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-count {
        bottom: 30px;
    }

    .banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-content h2 {
        font-size: 18px;
    }

    .banner-grid .banner-content-info ul li .banner-block a.banner-img .banner-count span.banner-item {
        font-size: 14px;
    }
}

/*====================================
    product-tab css
=====================================*/
.product-tab-ptb {
    background-color: var(--extra-bgcolor);
}

.product-tab-ptb .tab {
    display: flex;
    justify-content: center;
    margin: 0px 0px 70px 0px;
    position: relative;
    z-index: 1;
}

.product-tab-ptb .tab::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--border-color);
    z-index: -1;
}

.product-tab-ptb .tab ul.nav-tabs {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    max-width: 100%;
    border: none;
    overflow-x: auto;
    -webkit-scrollbar-width: thin;
}

.product-tab-ptb .tab ul.nav-tabs li {
    padding: 0px 50px 0px 0px;
}

.product-tab-ptb .tab ul.nav-tabs li:last-child {
    padding: 0px;
}

.product-tab-ptb .tab ul.nav-tabs li a {
    color: var(--font-family-body);
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.product-tab-ptb .tab ul.nav-tabs li:hover a,
.product-tab-ptb .tab ul.nav-tabs li a.active {
    color: var(--font-color-primary);
    border-bottom: 2px solid var(--font-color-primary);
}

.product-tab-ptb .tab ul.nav-tabs li a span {
    display: block;
    padding: 0px 0px 10px 0px;
}

.product-tab-ptb .tab ul.nav-tabs::-webkit-scrollbar {
    height: 2px;
}

.product-tab-ptb .tab ul.nav-tabs::-webkit-scrollbar-track {
    background-color: var(--border-color);
}

.product-tab-ptb .tab ul.nav-tabs::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.product-tab-ptb .tab ul.nav-tabs::-webkit-scrollbar-thumb:hover {
    background-color: transparent;
}

@media (max-width: 1199px) {
    .product-tab-ptb .tab {
        margin: 0px 0px 50px 0px;
    }
}

@media (max-width: 767px) {
    .product-tab-ptb .tab {
        margin: 0px 0px 30px 0px;
    }

    .product-tab-ptb .tab ul.nav-tabs li {
        padding: 0px 30px 0px 0px;
    }
}

@media (max-width: 479px) {
    .product-tab-ptb .tab ul.nav-tabs li a {
        font-size: 14px;
    }
}

/*====================================
    haeder-lable css
=====================================*/
span.header-new-lable,
span.header-sale-lable,
span.header-hot-lable {
    color: var(--background-color-body);
    font-size: 10px;
    padding: 2px 5px;
    position: absolute;
    top: -10px;
    right: 0;
    transform: translateX(100%);
    text-transform: uppercase;
    font-weight: 400;
    border-radius: 3px;
    line-height: 1.1;
}

span.header-new-lable::before,
span.header-sale-lable::before,
span.header-hot-lable::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

/* header-new-lable css */
span.header-new-lable {
    background-color: var(--header-new-label-bgcolor);
}

span.header-new-lable::before {
    border-left: 4px solid var(--header-new-label-bgcolor);
}

/* header-sale-lable css */
span.header-sale-lable {
    background-color: var(--header-sale-label-bgcolor);
}

span.header-sale-lable::before {
    border-left: 4px solid var(--header-sale-label-bgcolor);
}

/* header-hot-lable css */
span.header-hot-lable {
    background-color: var(--header-hot-label-bgcolor);
}

span.header-hot-lable::before {
    border-left: 4px solid var(--header-hot-label-bgcolor);
}

@media (max-width: 1199px) {

    span.header-new-lable,
    span.header-sale-lable,
    span.header-hot-lable {
        display: none;
        top: -8px;
    }
}

/*====================================
    collection-category css
=====================================*/
.special-category .collection-category {
    position: relative;
}

/*====================================
    product css
=====================================*/
.single-product-wrap {
    background-color: var(--background-color-body);
    overflow: hidden;
}

/*====================================
    product-img css
=====================================*/
.single-product-wrap .product-image {
    position: relative;
    overflow: hidden;
}

.single-product-wrap .product-image a.pro-img {
    position: relative;
    display: block;
}

.single-product-wrap .product-image a.pro-img::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--background-color-body);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.single-product-wrap:hover .product-image a.pro-img::after {
    opacity: 0.2;
    visibility: visible;
}

.single-product-wrap .product-image a.pro-img img.img2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
}

.single-product-wrap:hover .product-image a.pro-img img {
    -webkit-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}

.single-product-wrap:hover .product-image a.pro-img img.img1 {
    opacity: 0;
    visibility: hidden;
}

.single-product-wrap:hover .product-image a.pro-img img.img2 {
    opacity: 1;
    visibility: visible;
}

.single-product-wrap .product-image a.pro-img img,
.single-product-wrap:hover .product-image a.pro-img img {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

/*====================================
    product-content css
=====================================*/
.single-product-wrap .product-content {
    display: flex;
    flex-direction: column;
    padding: 23px 30px 40px;
}

.single-product-wrap .product-content .product-info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.single-product-wrap .product-content .product-info .product-pr-re {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0px 0px;
    line-height: 1;
}

.single-product-wrap .product-content .product-info .product-info-content {
    width: calc(100% - 45px);
    padding: 0px 15px 0px 0px;
}

.single-product-wrap .product-content .product-info .product-action {
    display: block;
    width: 45px;
}

@media (max-width: 1199px) {
    .single-product-wrap .product-content .product-info .product-action {
        display: none;
    }
}

@media (max-width: 600px) {
    .single-product-wrap .product-content {
        padding: 17px 15px 30px;
    }
}

@media (max-width: 479px) {
    .single-product-wrap .product-content .product-info .product-pr-re {
        margin: 7px 0px 0px;
    }
}

/*====================================
    product-title css
=====================================*/
.product-content h6 {
    font-size: 16px;
    width: 100%;
    font-weight: 600;
}

.product-content h6 a {
    display: block;
    color: var(--font-color-header);
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transition: all 0s ease-in-out 0s;
    -o-transition: all 0s ease-in-out 0s;
    transition: all 0s ease-in-out 0s;
}

.product-content h6 a:hover {
    color: var(--font-color-primary);
}

/*====================================
    product-ratting css
=====================================*/
.product-ratting span.star-rating i {
    color: var(--ratting-color);
    font-size: 12px;
}

/*====================================
    product-price css
=====================================*/
.price-box span {
    font-size: 16px;
    margin: 0px 0px 0px 5px;
    white-space: nowrap;
}

.price-box span:first-child {
    margin: 0px;
}

.price-box span.new-price {
    color: var(--font-color-primary);
}

.price-box span.old-price {
    color: var(--font-color-body);
    text-decoration: line-through;
}

/*====================================
    product stockout css
=====================================*/
.single-product-wrap.stock-out {
    cursor: not-allowed;
}

.single-product-wrap.stock-out .product-image a.pro-img {
    position: relative;
}

.single-product-wrap.stock-out .product-image a.pro-img::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--background-color-body);
    z-index: 1;
    opacity: 0.5;
    visibility: visible;
    cursor: not-allowed;
}

/*====================================
    product-label css
=====================================*/
.single-product-wrap .product-image .product-label {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.single-product-wrap:hover .product-image .product-label {
    transform: translateX(calc(-100% - 15px));
}

.single-product-wrap.stock-out .product-image .product-label {
    transform: unset;
}

.single-product-wrap .product-image .product-label,
.single-product-wrap:hover .product-image .product-label {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.single-product-wrap .product-image .product-label span {
    font-size: 12px;
    position: absolute;
    top: 30px;
    width: 45px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    font-weight: 400;
    border-radius: 0;
    line-height: 1;
}

.single-product-wrap .product-image .product-label span:first-child {
    margin: 0px;
}

.single-product-wrap .product-image .product-label span.new-sale-title {
    color: var(--background-color-body);
    background-color: var(--font-color-secondary);
}

.single-product-wrap .product-image .product-label span.new-sale-title {
    left: 30px;
}

.single-product-wrap .product-image .product-label span.discount-title {
    color: var(--background-color-body);
    background-color: var(--font-color-header);
}

.single-product-wrap .product-image .product-label span.sold-title {
    color: var(--background-color-body);
    background-color: #a00;
}

@media (max-width: 1199px) {
    .single-product-wrap:hover .product-image .product-label {
        transform: unset;
    }

    .single-product-wrap .product-image .product-label span {
        top: 15px;
    }

    .single-product-wrap .product-image .product-label span.new-sale-title {
        left: 15px;
    }
}

/*====================================
    product-action css
=====================================*/
.single-product-wrap .product-action {
    display: flex;
}

.single-product-wrap .product-content .product-action {
    padding: 15px 0px 0px;
    line-height: 1;
}

.single-product-wrap .product-action a {
    color: var(--font-color-body);
    position: relative;
    font-size: 16px;
    margin: 0px 15px 0px 0px;
    -webkit-transition: all 0s ease-in-out 0s;
    -o-transition: all 0s ease-in-out 0s;
    transition: all 0s ease-in-out 0s;
}

.single-product-wrap .product-action a.add-to-cart {
    margin: 0px 0px 0px auto;
}

.single-product-wrap .product-action a.quick-view {
    margin: 0px;
}

.single-product-wrap .product-action a.add-to-cart span.cart-title .add-c-title .add-title {
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--font-color-body);
    line-height: 1;
}

@media (max-width: 479px) {
    .single-product-wrap .product-content .product-action {
        margin: 12px 0px 0px 0px;
    }
}

/*====================================
    tooltip css
=====================================*/
.product-action a span.tooltip-text {
    color: var(--font-color-header);
    font-size: 11px;
    position: absolute;
    bottom: -40px;
    right: calc(-100% - 70px);
    height: 30px;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--font-color-primary);
    z-index: 1;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
    line-height: 1;
}

.product-action a:hover span.tooltip-text {
    opacity: 1;
    visibility: visible;
}

.product-action a span.tooltip-text::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 8px;
    border: 8px solid var(--font-color-primary);
    border-color: transparent transparent transparent var(--font-color-primary);
}

.product-action a span.tooltip-text,
.product-action a:hover span.tooltip-text {
    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
}

@media (max-width: 1199px) {
    .product-action a span.tooltip-text {
        display: none;
    }
}

/*====================================
    deal-banner video css
=====================================*/
.deal-banner {
    background-color: var(--background-color-body);
}

ul.deal-content {
    display: flex;
    flex-wrap: wrap;
    margin: -30px 0px 0px -30px;
}

ul.deal-content li.deal-img-wrap,
ul.deal-content li.deal-content-wrap {
    width: calc(50% - 30px);
    margin: 30px 0px 0px 30px;
}

@media (max-width: 991px) {

    ul.deal-content li.deal-img-wrap,
    ul.deal-content li.deal-content-wrap {
        width: calc(100% - 30px);
    }
}

@media (max-width: 767px) {
    ul.deal-content {
        margin: -30px 0px 0px -12px;
    }

    ul.deal-content li.deal-img-wrap,
    ul.deal-content li.deal-content-wrap {
        width: calc(100% - 12px);
        margin: 30px 0px 0px 12px;
    }
}

/* deal-banner-timer css */
.deal-banner-timer {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.deal-main-img a.banner-img {
    position: relative;
}

.deal-main-img a.banner-img::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0)60%, rgba(0, 0, 0, 0.9)100%);
}

@media (max-width: 991px) {
    .deal-banner-timer {
        padding: 80px 0px 0px;
    }
}

@media (max-width: 991px) {
    .deal-banner-timer {
        padding: 60px 0px 0px;
    }
}

@media (max-width: 479px) {
    .deal-banner-timer {
        flex-direction: column;
        align-items: unset;
    }
}

/* banner-img css */
.deal-main-img a.banner-img h2.banner-text {
    color: var(--background-color-body);
    font-size: 40px;
    font-family: 'Playfair Display', sans-serif;
    position: absolute;
    bottom: 50px;
    left: 50px;
    z-index: 1;
}

.deal-main-img a.banner-img h2 span {
    display: block;
}

.deal-main-img a.banner-img span.video-icon {
    color: var(--font-color-header);
    position: absolute;
    bottom: 50px;
    right: 50px;
    height: 75px;
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--font-color-primary);
    z-index: 1;
    border-radius: 100%;
    line-height: 0;
}

.deal-main-img a.banner-img span.video-icon:hover {
    color: var(--font-color-header);
    background-color: var(--background-color-body);
}

.deal-main-img a.banner-img span.video-icon i {
    font-size: 32px;
}

.deal-main-img a.banner-img span.video-icon::before,
.deal-main-img a.banner-img span.video-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.deal-main-img a.banner-img span.video-icon::before {
    -webkit-animation: hovereffect 2s linear infinite alternate;
    -moz-animation: hovereffect 2s linear infinite alternate;
    animation: hovereffect 2s linear infinite alternate;
}

.deal-main-img a.banner-img span.video-icon::after {
    -webkit-animation: hovereffect 4s linear infinite alternate;
    -moz-animation: hovereffect 4s linear infinite alternate;
    animation: hovereffect 4s linear infinite alternate;
}

@media (max-width: 1199px) {
    .deal-main-img a.banner-img h2.banner-text {
        font-size: 30px;
        bottom: 30px;
        left: 30px;
    }

    .deal-main-img a.banner-img span.video-icon {
        bottom: 30px;
        right: 30px;
        height: 60px;
        width: 60px;
    }
}

@media (max-width: 479px) {
    .deal-main-img a.banner-img h2.banner-text {
        font-size: 24px;
        bottom: 15px;
        left: 15px;
    }

    .deal-main-img a.banner-img span.video-icon {
        bottom: 15px;
        right: 15px;
        height: 50px;
        width: 50px;
    }

    .deal-main-img a.banner-img span.video-icon i {
        font-size: 24px;
    }
}

/* deal-banner-timer css */
.deal-banner-timer .deal-content-text {
    padding: 50px;
    position: absolute;
    top: 0;
    left: 50px;
    right: 50px;
    background-color: var(--extra-bgcolor);
    z-index: 1;
    text-align: center;
}

.deal-banner-timer .deal-small-img img {
    -webkit-filter: brightness(0.5);
    -o-filter: brightness(0.5);
    filter: brightness(0.5);
}

.deal-banner-timer .deal-content-text .deal-content-title span {
    color: var(--font-color-secondary);
    font-size: 16px;
    margin: 0px 0px 15px 0px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 2px solid var(--font-color-secondary);
    line-height: 1;
}

.deal-banner-timer .deal-content-text .deal-content-title h2 {
    color: var(--font-color-section-header);
    font-size: 40px;
    font-family: 'Playfair Display', sans-serif;
}

.deal-banner-timer .deal-content-text .deal-content-timer {
    margin: 40px 0px 0px;
}

.deal-banner-timer .deal-content-text .deal-content-timer .deal-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -15px 0px 0px -15px;
}

.deal-banner-timer .deal-content-text .deal-content-timer .deal-info .banner-countdown {
    width: calc(25% - 15px);
    margin: 15px 0px 0px 15px;
    padding: 15px 10px;
    background-color: var(--background-color-body);
}

.deal-banner-timer .deal-content-text .deal-content-timer .deal-info .banner-countdown span {
    display: block;
    line-height: 1;
}

.deal-banner-timer .deal-content-text .deal-content-timer .deal-info .banner-countdown span.banner-timer {
    color: var(--font-color-secondary);
    font-size: 24px;
    font-weight: 600;
}

.deal-banner-timer .deal-content-text .deal-content-timer .deal-info .banner-countdown span.banner-time {
    color: var(--font-color-body);
    font-size: 14px;
    margin: 12px 0px 0px;
    text-transform: uppercase;
}

.deal-banner-timer .deal-content-text .deal-content-button {
    margin: 50px 0px 0px;
}

@media (max-width: 1199px) {
    .deal-banner-timer .deal-content-text {
        padding: 40px 30px;
        left: 30px;
        right: 30px;
    }

    .deal-banner-timer .deal-content-text .deal-content-title span {
        margin: 0px 0px 13px 0px;
    }

    .deal-banner-timer .deal-content-text .deal-content-title h2 {
        font-size: 30px;
    }

    .deal-banner-timer .deal-content-text .deal-content-timer {
        margin: 32px 0px 0px;
    }

    .deal-banner-timer .deal-content-text .deal-content-timer .deal-info .banner-countdown span.banner-timer {
        font-size: 20px;
    }

    .deal-banner-timer .deal-content-text .deal-content-timer .deal-info .banner-countdown span.banner-time {
        margin: 10px 0px 0px;
    }

    .deal-banner-timer .deal-content-text .deal-content-button {
        margin: 40px 0px 0px;
    }
}

@media (max-width: 479px) {
    .deal-banner-timer .deal-content-text {
        padding: 30px;
        left: 15px;
        right: 15px;
    }

    .deal-banner-timer .deal-content-text .deal-content-title span {
        font-size: 14px;
        margin: 0px 0px 9px 0px;
    }

    .deal-banner-timer .deal-content-text .deal-content-title h2 {
        font-size: 24px;
    }

    .deal-banner-timer .deal-content-text .deal-content-timer {
        margin: 24px 0px 0px;
    }

    .deal-banner-timer .deal-content-text .deal-content-timer .deal-info .banner-countdown {
        padding: 10px;
    }

    .deal-banner-timer .deal-content-text .deal-content-timer .deal-info .banner-countdown span.banner-timer {
        font-size: 18px;
    }

    .deal-banner-timer .deal-content-text .deal-content-button {
        margin: 30px 0px 0px;
    }
}

/*=====================================
    magificant css 
======================================*/
.mfp-container.mfp-iframe-holder {
    width: auto;
    left: 15px;
    right: 15px;
}

.mfp-iframe-holder .mfp-content {
    max-width: 700px;
}

.mfp-iframe-holder .mfp-close {
    display: block !important;
    font-size: 20px;
    position: absolute;
    top: -20px;
    right: 0px;
    width: auto;
    height: auto;
    padding: 0px;
    background-color: transparent !important;
    line-height: 1;
}

.mfp-iframe-scaler iframe {
    border: none;
}

@media(max-width: 767px) {
    .mfp-iframe-holder .mfp-content {
        max-width: 100%;
    }
}

/*====================================
    blog css
=====================================*/
.blog-wrap {
    background-color: var(--extra-bgcolor);
}

.blog-slider {
    margin: 0px 0px 100px 0px;
}

.blog-post {
    position: relative;
}

.blog-post .blog-main-img {
    position: relative;
    overflow: hidden;
}

.blog-post .blog-main-img a.blog-img {
    display: block;
    position: relative;
}

.blog-post .blog-main-img a.blog-img span.date-time {
    display: block;
    color: var(--font-color-header);
    font-size: 14px;
    position: absolute;
    top: 30px;
    left: 30px;
    padding: 10px 15px;
    background-color: var(--font-color-primary);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    line-height: 1;
}

.blog-post:hover .blog-main-img a.blog-img span.date-time {
    opacity: 1;
    visibility: visible;
}

.blog-post .blog-main-img a.blog-img h6 {
    color: var(--background-color-body);
    font-size: 16px;
    position: absolute;
    bottom: 30px;
    right: 30px;
    left: 30px;
    z-index: 1;
    text-transform: uppercase;
    -webkit-transform: translateY(calc(100% + 30px));
    -o-transform: translateY(calc(100% + 30px));
    transform: translateY(calc(100% + 30px));
}

.blog-post:hover .blog-main-img a.blog-img h6 {
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.blog-post .blog-main-img a.blog-img span.date-time,
.blog-post:hover .blog-main-img a.blog-img span.date-time,
.blog-post .blog-main-img a.blog-img h6,
.blog-post:hover .blog-main-img a.blog-img h6 {
    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
}

@media (max-width: 1199px) {
    .blog-slider {
        margin: 0px;
    }

    .blog-post .blog-main-img a.blog-img span.date-time {
        top: 15px;
        left: 15px;
    }

    .blog-post .blog-main-img a.blog-img h6 {
        bottom: 15px;
        right: 15px;
        left: 15px;
        text-transform: uppercase;
        -webkit-transform: translateY(calc(100% + 15px));
        -o-transform: translateY(calc(100% + 15px));
        transform: translateY(calc(100% + 15px));
    }
}

@media (max-width: 479px) {
    .blog-post .blog-main-img a.blog-img h6 {
        font-size: 14px;
    }
}

/*====================================
    service css
=====================================*/
.our-service-area {
    padding: 0px 0px 100px 0px;
    background-color: var(--background-color-body);
    position: relative;
    z-index: 1;
}

.our-service-area .position-service {
    position: relative;
}

.service-content {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 50%;
    transform: translateY(50%);
}

.service-content ul.single-service {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -30px 0px 0px -30px;
}

.service-content ul.single-service li.ser-box {
    display: flex;
    width: calc(25% - 30px);
    margin: 30px 0px 0px 30px;
}

@media (max-width: 1199px) {
    .service-content ul.single-service li.ser-box {
        width: calc(50% - 30px);
    }
}

@media (max-width: 767px) {
    .service-content ul.single-service {
        margin: -30px 0px 0px -12px;
    }

    .service-content ul.single-service li.ser-box {
        width: calc(50% - 12px);
        margin: 30px 0px 0px 12px;
    }
}

@media (max-width: 479px) {
    .service-content ul.single-service li.ser-box {
        width: calc(100% - 12px);
    }
}

/* ser-block css */
.service-content ul.single-service li.ser-box .ser-block {
    width: 100%;
    padding: 50px 30px;
    background-color: var(--background-color-body);
    text-align: center;
    box-shadow: 0px 0px 15px rgb(51 51 51 / 15%);
}

.service-content ul.single-service li.ser-box .ser-block .ser-content a {
    color: var(--font-color-primary);
    font-size: 32px;
}

.service-content ul.single-service li.ser-box:hover .ser-block .ser-content a {
    -webkit-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}

.service-content ul.single-service li.ser-box .ser-block .service-text {
    margin: 22px 0px 0px 0px;
}

.service-content ul.single-service li.ser-box .ser-block .service-text h6 {
    color: var(--font-color-secondary);
    font-size: 20px;
    font-family: 'Playfair Display', sans-serif;
    font-weight: 400;
}

.service-content ul.single-service li.ser-box .ser-block .service-text p {
    font-size: 16px;
    margin: 6px 0px 0px;
    text-transform: uppercase;
}

@media (max-width: 1499px) {
    .service-content ul.single-service li.ser-box .ser-block {
        padding: 40px 20px;
    }

    .service-content ul.single-service li.ser-box .ser-block .service-text {
        margin: 15px 0px 0px 0px;
    }

    .service-content ul.single-service li.ser-box .ser-block .service-text h6 {
        font-size: 18px;
    }

    .service-content ul.single-service li.ser-box .ser-block .service-text p {
        font-size: 14px;
    }
}

@media (max-width: 1199px) {
    .our-service-area {
        padding: 80px 0px 0px;
    }

    .service-content {
        position: unset;
        transform: unset;
    }

    .service-content ul.single-service li.ser-box .ser-block {
        padding: 30px 20px;
    }

    .service-content ul.single-service li.ser-box .ser-block .service-text {
        margin: 14px 0px 0px 0px;
    }
}

@media (max-width: 767px) {
    .our-service-area {
        padding: 60px 0px 0px;
    }

    .service-content ul.single-service li.ser-box .ser-block {
        padding: 30px 15px;
    }
}


/*====================================
    testimonial css
=====================================*/
.testimonial-area {
    background-color: #f3e8dc;
}

.testi-info {
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--background-color-body);
    text-align: center;
}

.testi-info .testi-img img {
    padding: 3px;
    border: 2px solid var(--font-color-primary);
    border-radius: 100%;
}

.testi-info .testi-content {
    margin-top: 23px;
}

.testi-info .testi-content .testi-author {
    margin-top: 20px;
}

.testi-info .testi-content .testi-author h6 {
    font-size: 18px;
    line-height: 1;
}

.testi-info .testi-content .testi-author span {
    display: block;
    color: var(--font-color-primary);
    font-size: 30px;
    margin-top: 15px;
    line-height: 1;
}

@media (max-width: 1199px) {
    .testi-info {
        padding: 40px;
    }
}

@media (max-width: 767px) {
    .testi-info {
        padding: 30px;
    }
}

@media (max-width: 479px) {
    .testi-info {
        padding: 30px 15px;
    }
}

/*====================================
    single-contact css
=====================================*/
ul.single-contact {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    margin: -30px 0px 0px -30px;
}

ul.single-contact li.con-box {
    width: calc(33.33% - 30px);
    margin: 30px 0px 0px 30px;
}

ul.single-contact li.con-box .con-block {
    text-align: center;
}

ul.single-contact li.con-box .con-block a {
    display: block;
    color: var(--font-color-header);
    line-height: 0;
}

ul.single-contact li.con-box .con-block a svg {
    width: 32px;
    height: 32px;
}

ul.single-contact li.con-box .contact-text {
    margin-top: 27px;
    text-align: center;
}

ul.single-contact li.con-box .contact-text h6 {
    color: var(--font-color-primary);
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
}

ul.single-contact li.con-box .contact-text .contact-text-wrap {
    margin-top: 9px;
}

ul.single-contact li.con-box .contact-text span {
    display: block;
    font-size: 16px;
    margin-top: 4px;
}

ul.single-contact li.con-box .con-block .contact-text span:first-child {
    margin-top: 0px;
}

@media (max-width: 767px) {
    ul.single-contact {
        margin: -30px 0px 0px -15px;
    }

    ul.single-contact li.con-box {
        width: calc(50% - 15px);
        margin: 30px 0px 0px 15px;
    }
}

@media (max-width: 479px) {
    ul.single-contact li.con-box {
        width: calc(100% - 15px);
    }
}


/*====================================
   brand-logo css
=====================================*/
.our-brand-logo {
    background-color: var(--background-color-body);
}

.our-brand-logo .brand-logo a {
    display: block;
}

.our-brand-logo .brand-logo a span.brand-img {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.our-brand-logo .brand-logo a span.brand-img img {
    opacity: 0.5;
}

.our-brand-logo .brand-logo a span.brand-img:hover img {
    opacity: 1;
}

.our-brand-logo .brand-logo a span.brand-img img,
.our-brand-logo .brand-logo a span.brand-img:hover img {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

@media (max-width: 767px) {
    .our-brand-logo .brand-logo a span.brand-img img {
        opacity: 1;
    }
}

/*====================================
    newsletter css
=====================================*/
.news-search {
    width: 66.66%;
    margin: 0px auto;
}

.news-letter {
    padding: 100px 0px 50px 0px;
    background-color: var(--extra-bgcolor);
    position: relative;
    z-index: 0;
}

.newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: -23px 0px 0px -30px;
}

.newsletter .news-title,
.newsletter .subscribe-content {
    width: calc(50% - 30px);
    margin: 23px 0px 0px 30px;
}

.newsletter .news-title h2 {
    color: var(--font-color-secondary);
    font-size: 30px;
    font-family: 'Playfair Display', sans-serif;
}

.newsletter .news-title p {
    font-size: 16px;
    margin: 15px 0px 0px;
}

.newsletter .subscribe-content .news-content .subscribe-block {
    display: flex;
    flex-wrap: wrap;
}

.newsletter .subscribe-content .news-content .subscribe-block input {
    width: calc(100% - 60px);
    height: 50px;
    border: none;
}

.newsletter .subscribe-content .news-content .subscribe-block .email-submit button.news-sub {
    display: block;
    color: var(--font-color-header);
    font-size: 32px;
    width: 60px;
    height: 100%;
    background-color: var(--font-color-primary);
    line-height: 0;
}

.newsletter .subscribe-content .news-content .subscribe-block .email-submit button.news-sub:hover {
    color: var(--background-color-body);
    background-color: var(--font-color-header);
}

.newsletter .subscribe-content .news-content .subscribe-block .email-submit button.news-sub i {
    display: block;
    line-height: 0;
}

@media (max-width: 1199px) {
    .news-search {
        width: 100%;
    }

    .news-letter {
        padding: 80px 0px 40px 0px;
    }
}

@media (max-width: 767px) {
    .news-letter {
        padding: 60px 0px 30px 0px;
    }

    .newsletter {
        margin: -23px 0px 0px -12px;
        text-align: center;
    }

    .newsletter .news-title,
    .newsletter .subscribe-content {
        width: calc(100% - 12px);
        margin: 23px 0px 0px 12px;
    }
}

@media (max-width: 479px) {
    .newsletter {
        margin: -16px 0px 0px -30px;
    }

    .newsletter .news-title,
    .newsletter .subscribe-content {
        margin: 16px 0px 0px 30px;
    }

    .newsletter .news-title h2 {
        font-size: 24px;
    }

    .newsletter .news-title p {
        font-size: 14px;
        margin: 11px 0px 0px;
    }
}

/*====================================
    footer css
=====================================*/
.footer-top-area {
    padding: 50px 0px 100px 0px;
    background-color: var(--extra-bgcolor);
    border-top: 1px solid var(--border-color);
}

.footer-list-info {
    margin: 0px 0px 100px 0px;
}

@media (max-width: 1199px) {
    .footer-top-area {
        padding: 80px 0px;
    }

    .footer-list-info {
        margin: 0px 0px 80px 0px;
    }
}

@media (max-width: 767px) {
    .footer-top-area {
        padding: 60px 0px;
    }

    .footer-list-info {
        margin: 0px 0px 60px 0px;
    }
}

.footer-list-info ul.ft-info-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    margin: -30px 0px 0px -30px;
}

.footer-list-info ul.ft-info-wrap li.ft-info {
    margin: 30px 0px 0px 30px;
}

.footer-list-info ul.ft-info-wrap li.footer-logo {
    width: calc(33.33% - 30px);
}

.footer-list-info ul.ft-info-wrap li.footer-info {
    width: calc(33.33% - 30px);
    text-align: center;
}

.footer-list-info ul.ft-info-wrap li.footer-social {
    width: calc(33.33% - 30px);
}

@media (max-width: 1199px) {

    .footer-list-info ul.ft-info-wrap li.footer-logo,
    .footer-list-info ul.ft-info-wrap li.footer-social {
        width: calc(25% - 30px);
    }

    .footer-list-info ul.ft-info-wrap li.footer-info {
        width: calc(50% - 30px);
    }
}

@media (max-width: 767px) {
    .footer-list-info ul.ft-info-wrap {
        margin: -30px 0px 0px -12px;
    }

    .footer-list-info ul.ft-info-wrap li.ft-info {
        margin: 30px 0px 0px 12px;
    }

    .footer-list-info ul.ft-info-wrap li.footer-logo,
    .footer-list-info ul.ft-info-wrap li.footer-info,
    .footer-list-info ul.ft-info-wrap li.footer-social {
        width: calc(100% - 12px);
    }

    .footer-list-info ul.ft-info-wrap li.footer-logo,
    .footer-list-info ul.ft-info-wrap li.footer-info {
        text-align: center;
    }
}

/* footer-info css */
.footer-list-info ul.ft-info-wrap li.footer-info p {
    font-size: 16px;
}

.footer-list-info ul.ft-info-wrap li.footer-social ul.social-icon {
    justify-content: flex-end;
}

@media (max-width: 991px) {
    .footer-list-info ul.ft-info-wrap li.footer-social ul.social-icon {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .footer-list-info ul.ft-info-wrap li.footer-info p {
        max-width: 66.66%;
        margin: 0px auto;
    }
}

@media (max-width: 600px) {
    .footer-list-info ul.ft-info-wrap li.footer-info p {
        max-width: 83.33%;
    }
}

@media (max-width: 479px) {
    .footer-list-info ul.ft-info-wrap li.footer-info p {
        font-size: 14px;
        max-width: 100%;
    }
}

/* footer-list-wrap css */
.footer-list-wrap {
    max-width: 50%;
    margin: 0 auto;
    text-align: center;
}

.footer-list-wrap ul.footer-list li.ftlink-li .footer-menu h6.ft-title {
    color: var(--font-color-secondary);
    font-size: 20px;
    font-family: 'Playfair Display', sans-serif;
}

.footer-list-wrap ul.footer-list li.ftlink-li .footer-menu .footer-sublist {
    margin: 38px 0px 0px;
}

.footer-list-wrap ul.footer-list li.ftlink-li .footer-menu .footer-sublist ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -10px 0px 0px -30px;
}

.footer-list-wrap ul.footer-list li.ftlink-li .footer-menu .footer-sublist ul li.ftsublink-li {
    margin: 10px 0px 0px 30px;
}

.footer-list-wrap ul.footer-list li.ftlink-li .footer-menu .footer-sublist ul li.ftsublink-li a.ft-sublink {
    color: var(--font-color-body);
    font-size: 16px;
}

.footer-list-wrap ul.footer-list li.ftlink-li .footer-menu .footer-sublist ul li.ftsublink-li a.ft-sublink:hover {
    color: var(--font-color-primary);
}

@media (max-width: 1199px) {
    .footer-list-wrap {
        max-width: 66.66%;
    }

    .footer-list-wrap ul.footer-list li.ftlink-li .footer-menu .footer-sublist {
        margin: 28px 0px 0px;
    }
}

@media (max-width: 767px) {
    .footer-list-wrap ul.footer-list li.ftlink-li .footer-menu .footer-sublist {
        margin: 18px 0px 0px;
    }

    .footer-list-wrap ul.footer-list li.ftlink-li .footer-menu .footer-sublist ul {
        margin: -10px 0px 0px -12px;
    }

    .footer-list-wrap ul.footer-list li.ftlink-li .footer-menu .footer-sublist ul li.ftsublink-li {
        margin: 10px 0px 0px 12px;
    }
}

@media (max-width: 991px) {
    .footer-list-wrap {
        max-width: 100%;
    }
}

@media (max-width: 479px) {
    .footer-list-wrap ul.footer-list li.ftlink-li .footer-menu h6.ft-title {
        font-size: 18px;
    }

    .footer-list-wrap ul.footer-list li.ftlink-li .footer-menu .footer-sublist {
        margin: 14px 0px 0px;
    }

    .footer-list-wrap ul.footer-list li.ftlink-li .footer-menu .footer-sublist ul li.ftsublink-li a.ft-sublink {
        font-size: 14px;
    }
}

/* footer-bootam css */
.footer-bottom-area {
    padding: 10px 0px;
    background-color: var(--extra-bgcolor);
    border-top: 1px solid var(--border-color);
}

.footer-bottom-area ul.ft-bottom li.copy-right p {
    color: var(--font-color-body);
    font-size: 14px;
    text-align: center;
}

/*====================================
    button-toggler css
=====================================*/
button.toggler-button {
    display: none;
}

@media (max-width:1199px) {
    button.toggler-button {
        display: block;
    }

    button.toggler-button span {
        position: relative;
    }

    button.toggler-button span::before,
    button.toggler-button span::after {
        content: "";
        position: absolute;
    }

    button.toggler-button span,
    button.toggler-button span::before,
    button.toggler-button span::after {
        display: block;
        width: 16px;
        height: 1px;
        background-color: var(--font-color-header);
    }

    button.toggler-button span::before {
        top: -7px;
    }

    button.toggler-button span::after {
        top: 7px;
    }
}

/*====================================
    search css
=====================================*/
a.search-popup {
    display: flex;
    color: var(--font-color-header);
    font-size: 16px;
    cursor: pointer !important;
}

a.search-popup:hover {
    color: var(--font-color-primary);
}

a.search-popup i {
    line-height: 1;
}

/*====================================
    wishlist css
=====================================*/
.wishlist-four {
    position: relative;
}

.wishlist-four a.header-wishlist {
    display: flex;
    align-items: center;
    position: relative;
}

.wishlist-four a.header-wishlist span.wishlist-icon {
    display: block;
    color: var(--font-color-header);
    font-size: 16px;
    line-height: 0;
}

.wishlist-four a.header-wishlist span.wishlist-icon:hover {
    color: var(--font-color-primary);
}

.wishlist-four a.header-wishlist span.wishlist-icon i {
    display: block;
    line-height: 0;
}

.wishlist-four a.header-wishlist span.wishlist-counter {
    display: block;
    color: var(--font-color-header);
    font-size: 16px;
    position: relative;
    padding: 0px 0px 0px 12px;
    margin: 0px 0px 0px 2px;
}

.wishlist-four a.header-wishlist span.wishlist-counter::before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 50%;
    transform: translateY(50%);
    height: 1px;
    width: 10px;
    background-color: var(--border-color);
}

/*====================================
    cart css
=====================================*/
.shopping-widget .shopping-cart {
    position: relative;
}

.shopping-widget .shopping-cart a.cart-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-transition: all 0s ease-in-out 0s;
    -o-transition: all 0s ease-in-out 0s;
    transition: all 0s ease-in-out 0s;
}

.shopping-widget .shopping-cart a.cart-count span.cart-icon-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.shopping-widget .shopping-cart a.cart-count span.cart-icon-wrap span.cart-icon {
    display: block;
    color: var(--font-color-header);
    font-size: 16px;
    line-height: 0;
}

.shopping-widget .shopping-cart a.cart-count span.cart-icon-wrap span.cart-icon:hover {
    color: var(--font-color-primary);
}

.shopping-widget .shopping-cart a.cart-count span.cart-icon-wrap span.cart-icon i {
    display: block;
    line-height: 0;
}

.shopping-widget .shopping-cart a.cart-count span.cart-icon-wrap span.bigcounter {
    display: block;
    color: var(--font-color-header);
    font-size: 16px;
    position: relative;
    padding: 0px 0px 0px 12px;
    margin: 0px 0px 0px 2px;
}

.shopping-widget .shopping-cart a.cart-count span.cart-icon-wrap span.bigcounter::before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 50%;
    transform: translateY(50%);
    height: 1px;
    width: 10px;
    background-color: var(--border-color);
}

/*====================================
    back-to-top css
=====================================*/
a#top {
    position: fixed;
    bottom: 55px;
    right: 13px;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0s ease-in-out 0s;
    -o-transition: all 0s ease-in-out 0s;
    transition: all 0s ease-in-out 0s;
}

a#top.show {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

a.scroll span {
    color: var(--background-color-body);
    font-size: 24px;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--font-color-header);
}

a.scroll:hover span {
    color: var(--font-color-header);
    background-color: var(--font-color-primary);
}

a.scroll span,
a.scroll:hover span {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

a.scroll span i {
    display: block;
    line-height: 0;
}

/*====================================
    search-modal css
=====================================*/
#search-modal .modal-dialog {
    margin: 0px;
    padding: 30px 0px;
    max-width: 100%;
    background-color: var(--background-color-body);
}

#search-modal .modal-content {
    border: none;
    border-radius: 0;
}

#search-modal .modal-body {
    padding: 0px;
}

#search-modal .crap-search {
    display: flex;
    flex-direction: column;
}

#search-modal .crap-search .button-close {
    text-align: right;
    line-height: 0;
}

#search-modal .crap-search .button-close a.search-close {
    line-height: 0;
}

#search-modal .crap-search .form-search {
    position: relative;
    margin: 15px 0px 0px;
}

#search-modal .crap-search .form-search input {
    padding: 10px 0px;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--border-color);
}

#search-modal .crap-search .form-search a {
    position: absolute;
    right: 0px;
    bottom: 50%;
    transform: translateY(50%);
    line-height: 0;
}

#search-modal .crap-search .form-search a svg {
    fill: var(--font-color-body);
}

/*====================================
    payment-img css
=====================================*/
a.payment-icon {
    display: flex;
    flex-wrap: wrap;
    margin: -5px 0px 0px -5px;
}

a.payment-icon img {
    width: 38px;
    height: 24px;
    margin: 5px 0px 0px 5px;
}

/*====================================
    social-icon css
=====================================*/
ul.social-icon {
    display: flex;
    flex-wrap: wrap;
}

ul.social-icon li {
    margin: 0px 30px 0px 0px;
    line-height: 0;
}

ul.social-icon li:last-child {
    margin: 0px;
}

ul.social-icon li a {
    display: flex;
    fill: var(--font-color-body);
    font-size: 16px;
    line-height: 0;
}

ul.social-icon li a:hover {
    fill: var(--font-color-primary);
    background-color: transparent;
}

ul.social-icon li a svg {
    height: 16px;
    height: 16px;
}

@media (max-width: 767px) {
    ul.social-icon li:last-child {
        margin: 0px;
    }
}

@media (max-width: 991px) {
    ul.social-icon li {
        margin: 0px 20px 0px 0px;
    }
}

@media (max-width: 479px) {
    .footer-list-wrap ul.footer-list li.ftlink-li .footer-social {
        margin: 57px 0px 0px;
    }

    .footer-list-wrap ul.footer-list li.ftlink-li .footer-social ul.social-icon {
        justify-content: center;
    }
}

/*====================================
    banner-hover css
=====================================*/
.banner-hover a.banner-img {
    position: relative;
}

.banner-hover a.banner-img {
    display: block;
    overflow: hidden;
}

.banner-hover:hover a.banner-img img {
    -webkit-filter: brightness(0.5);
    -o-filter: brightness(0.5);
    filter: brightness(0.5);
}

.banner-hover a.banner-img img,
.banner-hover:hover a.banner-img img {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

/*====================================
    screen-bg css
=====================================*/
.screen-bg {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(51, 51, 51, 0.15);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
}

.screen-bg.active {
    opacity: 1;
    visibility: visible;
}

.screen-bg,
.screen-bg.active {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

/*====================================
    preloader css
=====================================*/
.preloader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--background-color-body);
    z-index: 999999;
}

/*====================================
    quickview-modal start  
=====================================*/
.productmodal .modal-dialog {
    max-width: 700px;
}

.productmodal .modal-body {
    padding: 15px 0px;
}

.productmodal .modal-dialog .modal-content {
    background-color: var(--background-color-body);
    border: none;
}

.productmodal .modal-dialog .modal-content .modal-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.productmodal .modal-dialog .modal-content .modal-header span.modal-quickview {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.productmodal .modal-dialog .modal-content .modal-header button.close {
    font-size: 16px;
    color: var(--font-color-header);
    position: relative;
    top: 0px;
    right: 0px;
    float: none;
    padding: 0px;
    margin: 0px;
    opacity: 1;
    line-height: 0;
}

.productmodal .modal-dialog .modal-content .modal-body .quickview-main-area {
    display: flex;
    flex-wrap: wrap;
}

.productmodal .modal-dialog .modal-content .modal-body .quickview-main-area .quickview-slider {
    width: 50%;
    padding-left: 15px;
}

.productmodal .modal-dialog .modal-content .modal-body .quickview-main-area .quick-view-content {
    width: 50%;
    padding: 0px 15px;
    overflow-y: auto;
}

@media (max-width: 600px) {
    .productmodal .modal-dialog {
        max-width: 100%;
        margin: 30px;
    }

    .productmodal .modal-dialog .modal-content .modal-body .quickview-main-area .quick-view-content {
        height: unset;
    }

    .productmodal .modal-dialog .modal-content .modal-body .quickview-main-area .quickview-slider {
        width: 100%;
        padding: 0px 15px;
    }

    .productmodal .modal-dialog .modal-content .modal-body .quickview-main-area .quick-view-content {
        max-height: unset;
        width: 100%;
        padding: 0px 15px;
        margin-top: 30px;
        overflow: unset;
    }
}

@media (max-width: 479px) {
    .productmodal .modal-dialog {
        margin: 15px;
    }
}

/*====================================
    bottom menu css  
=====================================*/
.bottom-menu {
    display: none;
    position: sticky;
    bottom: 0;
    padding: 10px 12px;
    background-color: var(--background-color-body);
    z-index: 1;
    box-shadow: 0px 0px 15px rgba(34, 34, 34, 0.15);
}

@media (max-width: 600px) {
    .bottom-menu {
        display: block;
    }
}

.bottom-menu ul.bottom-menu-element {
    display: flex;
    align-items: center;
}

.bottom-menu ul.bottom-menu-element li.bottom-menu-wrap {
    width: 20%;
}

.bottom-menu ul.bottom-menu-element li.bottom-menu-wrap .bottom-menu-wrapper a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bottom-menu ul.bottom-menu-element li.bottom-menu-wrap .bottom-menu-wrapper a span.bottom-menu-icon {
    display: block;
    color: var(--font-color-body);
    line-height: 0;
}

.bottom-menu ul.bottom-menu-element li.bottom-menu-wrap .bottom-menu-wrapper a span.bottom-menu-icon svg {
    width: 16px;
    height: 16px;
}

.bottom-menu ul.bottom-menu-element li.bottom-menu-wrap .bottom-menu-wrapper a span.bottom-menu-title {
    display: block;
    color: var(--font-size-body);
    font-size: 10px;
    margin: 5px 0px 0px;
    text-transform: uppercase;
    line-height: 1;
}

.bottom-menu ul.bottom-menu-element li.bottom-menu-wrap .bottom-menu-wrapper a span.bottom-menu-icon-wrap {
    display: block;
    position: relative;
    padding: 0px 8px 0px 0px;
}

.bottom-menu ul.bottom-menu-element li.bottom-menu-wrap .bottom-menu-wrapper a span.bottom-menu-icon-wrap span.bottom-menu-counter {
    color: var(--font-color-header);
    font-size: 12px;
    position: absolute;
    top: 0px;
    right: -12px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 100%;
}

/* quickview-silder css */
.productmodal .modal-dialog .modal-content .modal-body .quickview-main-area .quickview-slider .swiper.gallery-top {
    position: relative;
    margin: 0px 0px 15px 0px;
}

.productmodal .modal-dialog .modal-content .modal-body .quickview-main-area .quickview-slider .swiper.gallery-thumbs .swiper-slide a img {
    opacity: 0.5;
    border: 1px solid var(--border-color);
}

.productmodal .modal-dialog .modal-content .modal-body .quickview-main-area .quickview-slider .swiper.gallery-thumbs .swiper-slide.swiper-slide-thumb-active a img {
    opacity: 1;
    border: 1px solid var(--font-color-header);
}

/* quickview-content css */
.quick-view-content .product-title h6.product_title {
    font-size: 18px;
    line-height: 1;
}

.quick-view-content .price-box {
    margin: 15px 0px 0px;
}

.quick-view-content .price-box .new-price {
    font-size: 16px;
}

.quick-view-content .product-ratting {
    margin: 23px 0px 0px;
}

.quick-view-content .product-ratting .rating span.spr-badge {
    display: flex;
    align-items: center;
    line-height: 1;
}

.quick-view-content .product-ratting .spr-badge-starrating {
    display: flex;
    margin: 0px;
    line-height: 0;
}

.quick-view-content .product-ratting .spr-badge-starrating i {
    font-size: 14px;
}

.quick-view-content .product-ratting .rating span.spr-badge span.spr-badge-caption {
    margin: 0px 0px 0px 15px;
}

.quick-view-content .product-desc {
    margin: 23px 0px 0px;
}

.quick-view-content form {
    margin: 22px 0px 0px;
    padding: 30px 0px 0px;
    border-top: 1px solid var(--border-color);
}

.quick-view-content form .quick-view-select .variants_selects .selector-wrapper {
    display: flex;
    align-items: center;
    margin: 18px 0px 0px;
}

.quick-view-content form .quick-view-select .variants_selects .selector-wrapper:first-child {
    margin: 0px;
}

.quick-view-content form .quick-view-select .variants_selects .selector-wrapper label {
    display: block;
    color: var(--font-color-header);
    font-size: 16px;
    width: 75px;
    margin: 0px;
    font-weight: 500;
    line-height: 1;
}

.quick-view-content form .quick-view-select .variants_selects .selector-wrapper .select-icon {
    position: relative;
    width: calc(100% - 90px);
    margin: 0px 0px 0px 15px;
}

.quick-view-content form .quick-view-select .variants_selects .selector-wrapper .select-icon::after {
    content: "\f078";
    position: absolute;
    color: var(--font-color-header);
    font-size: 12px;
    font-family: "Font Awesome 5 Free";
    right: 15px;
    top: 15px;
    font-weight: 600;
}

.quick-view-content form .quick-view-select .variants_selects .selector-wrapper .select-icon select {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.quick-view-content form .quick-view-select .variants_selects .product-quantity-action {
    display: flex;
    align-items: center;
    margin: 30px 0px 0px;
}

.quick-view-content form .quick-view-select .variants_selects .product-quantity-action h6 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.quick-view-content form .quick-view-select .variants_selects .product-quantity-action .product-quantity {
    margin: 0px 0px 0px 15px;
}

/* quickview-buttons css */
.quick-view-content form .quickview-buttons {
    margin: 30px 0px 0px;
}

.quick-view-content form .quickview-buttons a {
    color: var(--background-color-body);
    font-size: 16px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    background-color: var(--font-color-header);
    text-align: center;
    font-weight: 600;
    border: 2px solid var(--font-color-header);
    letter-spacing: 0.5;
}

.quick-view-content form .quickview-buttons a:hover {
    color: var(--background-color-body);
    background-color: var(--font-color-primary);
    border: 2px solid var(--font-color-primary);
}

.quick-view-content form .quickview-buttons a {
    margin: 30px 0px 0px 0px;
}

.quick-view-content form .quickview-buttons a i {
    display: block;
}

.quick-view-content form .quickview-buttons a span.wishlist-text {
    font-size: 16px;
    margin: 0px 0px 0px 5px;
}

/*====================================
    tab-collection button css
=====================================*/
.product-tab-area .tab-collection {
    margin: 70px 0px 0px;
    text-align: center;
}

@media (max-width: 1199px) {
    .product-tab-area .tab-collection {
        margin: 50px 0px 0px;
    }
}

@media (max-width: 767px) {
    .product-tab-area .tab-collection {
        margin: 30px 0px 0px;
    }
}

/*====================================
    slider-arrow css
=====================================*/
.slider-content .home-slider.owl-carousel .owl-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    margin-top: 0px;
    text-align: left;
    line-height: 0;
}

.slider-content .home-slider.owl-carousel .owl-nav button {
    color: var(--background-color-body);
    font-size: 32px;
    background-color: transparent;
    position: relative;
    padding: 0px 15px 0px 0px !important;
    margin: 0px 15px 0px 0px;
    line-height: 0;
}

.slider-content .home-slider.owl-carousel .owl-nav button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background-color: var(--background-color-body);
    opacity: 0.7;
}

.slider-content .home-slider.owl-carousel .owl-nav button:last-child {
    margin: 0px;
    padding: 0px !important;
}

.slider-content .home-slider.owl-carousel .owl-nav button:hover {
    color: var(--font-color-primary);
    background-color: transparent;
}

.slider-content .home-slider.owl-carousel .owl-nav button:last-child::after {
    position: unset;
}

@media (max-width: 1199px) {
    .slider-content .home-slider.owl-carousel .owl-nav {
        bottom: 10px;
    }

    .slider-content .home-slider.owl-carousel .owl-nav button {
        font-size: 24px;
    }
}

/*====================================
    swiper-arrow css
=====================================*/
.swiper.gallery-top .swiper-button button {
    color: var(--font-color-header);
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 1;
    opacity: 0.5;
    line-height: 0;
}

.swiper .swiper-button button.swiper-prev {
    left: 10px;
}

.swiper .swiper-button button.swiper-next {
    right: 10px;
}

.swiper .swiper-button button:hover {
    color: var(--font-color-primary);
    opacity: 1;
}

/*====================================
    swiper-dots css
=====================================*/
.collection-wrap .swiper-dots {
    margin: 100px 0px 0px;
    line-height: 0;
}

.collection-wrap .swiper-dots .swiper-pagination.swiper-pagination-bullets {
    width: unset;
    position: unset;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -5px 0px 0px -5px;
}

.collection-wrap .swiper-dots .swiper-pagination.swiper-pagination-bullets span {
    width: 10px;
    height: 10px;
    margin: 5px 0px 0px 5px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 100%;
    opacity: 1;
}

.collection-wrap .swiper-dots .swiper-pagination.swiper-pagination-bullets span.swiper-pagination-bullet-active {
    background-color: var(--font-color-primary);
}

@media (max-width: 1199px) {
    .collection-wrap .swiper-dots {
        margin: 80px 0px 0px;
    }
}

@media (max-width: 767px) {
    .collection-wrap .swiper-dots {
        margin: 60px 0px 0px;
    }
}

/*====================================
   swiper-scrollbar css
=====================================*/
.product-tab-ptb .product-tab-area .tabs .product-tab-area .swiper-scrollbar {
    margin: 70px 0px 0px;
    height: 5px;
    background-color: rgba(140, 107, 66, 0.1);
    border-radius: 0;
}

.product-tab-ptb .product-tab-area .tabs .product-tab-area .swiper-scrollbar .swiper-scrollbar-drag {
    background-color: var(--font-color-secondary);
    border-radius: 0;
}

@media (max-width: 1199px) {
    .product-tab-ptb .product-tab-area .tabs .product-tab-area .swiper-scrollbar {
        margin: 50px 0px 0px;
    }
}

@media (max-width: 767px) {
    .product-tab-ptb .product-tab-area .tabs .product-tab-area .swiper-scrollbar {
        margin: 30px 0px 0px;
    }
}

/*====================================
    newletter-popup css
=====================================*/
.popup-wrapper .newsletter-info {
    padding: 50px 30px;
    background-color: var(--extra-bgcolor);
}

.popup-wrapper .modal-dialog {
    max-width: 500px;
}

.popup-wrapper .modal-content {
    border: 5px solid var(--font-color-primary);
    border-radius: var(--border-radius);
}

.popup-wrapper .modal-body {
    padding: 0px;
}

.popup-wrapper .newsletter_popup {
    display: flex;
}

.popup-wrapper button.close {
    float: none;
    color: var(--background-color-body);
    font-size: 24px;
    position: absolute;
    top: -5px;
    right: -5px;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--font-color-secondary);
    text-shadow: none;
    opacity: 1;
}

.popup-wrapper button.close:hover {
    color: var(--font-color-header);
    background-color: var(--font-color-primary);
}

.popup-wrapper .newsletter_popup button.close i {
    display: block;
    line-height: 0;
}

.popup-wrapper .newsletter_popup .newsletter-info {
    width: 250px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.popup-wrapper .newsletter-info .subscribe_area {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-direction: column;
}

.popup-wrapper .newsletter-info .subscribe_area .news-title h2 {
    font-size: 30px;
    font-family: 'Playfair Display', sans-serif;
}

.popup-wrapper .newsletter-info .popup-newsletter {
    margin: 35px 0px 0px;
    text-align: center;
}

.popup-wrapper .newsletter-info .popup-newsletter {
    font-size: 16px;
}

.popup-wrapper .newsletter-info .popup-newsletter .news-content {
    margin: 23px 0px 0px;
}

.popup-wrapper .newsletter-info .popup-newsletter .news-content .subscribe-block {
    display: flex;
    flex-wrap: wrap;
}

.popup-wrapper .newsletter-info .popup-newsletter .news-content .subscribe-block input {
    width: calc(100% - 60px);
    height: 50px;
    border: none;
}

.popup-wrapper .newsletter-info .popup-newsletter .news-content .subscribe-block .email-submit button.news-sub {
    display: block;
    color: var(--font-color-header);
    font-size: 32px;
    width: 60px;
    height: 100%;
    background-color: var(--font-color-primary);
    line-height: 0;
}

.popup-wrapper .newsletter-info .popup-newsletter .news-content .subscribe-block .email-submit button.news-sub:hover {
    color: var(--background-color-body);
    background-color: var(--font-color-header);
}

@media (max-width: 1199px) {
    .popup-wrapper .newsletter-info .popup-newsletter {
        margin: 25px 0px 0px;
    }
}

@media (max-width: 767px) {
    .popup-wrapper .newsletter-info .popup-newsletter {
        margin: 15px 0px 0px;
    }
}

@media (max-width: 479px) {
    .popup-wrapper .newsletter-info {
        padding: 30px 15px;
    }

    .popup-wrapper .newsletter-info .subscribe_area .news-title h2 {
        font-size: 24px;
    }

    .popup-wrapper .newsletter-info .popup-newsletter {
        margin: 17px 0px 0px;
    }

    .popup-wrapper .newsletter-info .popup-newsletter {
        font-size: 14px;
    }

    .popup-wrapper .newsletter-info .popup-newsletter .news-content {
        margin: 16px 0px 0px;
    }
}

/*=====================================
    cart-drawer css
=====================================*/
.cart-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -450px;
    width: 450px;
    max-width: calc(100% - 30px);
    background-color: var(--background-color-body);
    z-index: 3;
    transform: translateX(100%);
    visibility: hidden;
    overflow: hidden;
    box-shadow: var(--box-shadow-outer);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.cart-drawer.active {
    right: 0px;
    visibility: visible;
    transform: translateX(0);
}

@media screen and (max-height: 600px) {
    .cart-drawer {
        overflow-y: auto;
    }
}

/*=====================================
    drawer-contents css
=====================================*/
.cart-drawer form.drawer-contents {
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media screen and (max-height: 600px) {
    .cart-drawer form.drawer-contents {
        height: auto;
    }
}

/*=====================================
    drawer-fixed-header css
=====================================*/
.cart-drawer form.drawer-contents .drawer-fixed-header {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}

.cart-drawer form.drawer-contents .drawer-fixed-header .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-drawer form.drawer-contents .drawer-fixed-header .drawer-header h6 {
    font-size: 16px;
}

.cart-drawer form.drawer-contents .drawer-fixed-header .drawer-header .drawer-close button.drawer-close-btn {
    display: block;
    color: #929292;
}

.cart-drawer form.drawer-contents .drawer-fixed-header .drawer-header .drawer-close button.drawer-close-btn:hover {
    color: var(--font-color-header);
}

.cart-drawer form.drawer-contents .drawer-fixed-header .drawer-header .drawer-close button.drawer-close-btn span.drawer-close-icon {
    display: block;
    font-size: 20px;
    line-height: 0;
}

/*=====================================
    drawer-empty css
=====================================*/
.cart-drawer form.drawer-contents .drawer-cart-empty {
    display: none;
    height: 100%;
}

.cart-drawer form.drawer-contents .drawer-cart-empty .drawer-scrollable {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cart-drawer form.drawer-contents .drawer-cart-empty .drawer-scrollable h2 {
    color: var(--body-font-color);
    font-size: 24px;
}

.cart-drawer form.drawer-contents .drawer-cart-empty .drawer-scrollable a {
    margin-top: 21px;
}

/*=====================================
    drawer-inner css
=====================================*/
.cart-drawer form.drawer-contents .drawer-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* drawer-scrollable css */
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable {
    height: 100%;
    overflow-y: auto;
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-notes {
    padding: 10px 15px 15px;
    border-top: 1px solid var(--border-color);
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-notes label {
    display: block;
    color: var(--heading-font-color);
    margin: 0px 0px 10px;
    text-transform: uppercase;
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-notes textarea {
    width: 100%;
}

/* drawer-footer css */
.cart-drawer form.drawer-contents .drawer-inner .drawer-footer {
    padding: 10px 15px 15px;
    border-top: 1px solid var(--border-color);
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-total {
    display: flex;
    justify-content: space-between;
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-total span {
    display: block;
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-total span.drawer-subtotal {
    color: var(--heading-font-color);
    text-transform: uppercase;
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-total span.drawer-totalprice {
    color: var(--font-color-secondary);
    font-weight: 600;
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-ship-text {
    margin: 10px 0px 0px;
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-ship-text span {
    display: block;
    color: var(--heading-font-color);
    font-size: 11px;
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-cart-checkout {
    margin: 15px 0px 0px;
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-cart-checkout .cart-checkout-btn {
    display: flex;
    flex-wrap: wrap;
    margin: -15px 0px 0px -15px;
}

.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-cart-checkout .cart-checkout-btn button {
    width: calc(100% - 15px);
    margin: 15px 0px 0px 15px;
    border: none;
}

/*=====================================
    scrollbar css
======================================*/
.main-menu-area,
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable,
.productmodal .quick-view-content,
.filter-sidebar,
.shop-sidebar ul.scrollbar {
    -webkit-scrollbar-width: thin;
    scrollbar-width: thin;
}

.main-menu-area::-webkit-scrollbar,
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar,
.productmodal .quick-view-content::-webkit-scrollbar,
.filter-sidebar::-webkit-scrollbar,
.shop-sidebar ul.scrollbar::-webkit-scrollbar {
    width: 4px;
}

.main-menu-area::-webkit-scrollbar-track,
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-track,
.productmodal .quick-view-content::-webkit-scrollbar-track,
.filter-sidebar::-webkit-scrollbar-track,
.shop-sidebar ul.scrollbar::-webkit-scrollbar-track {
    background-color: #eeeeee;
}

.main-menu-area::-webkit-scrollbar-thumb,
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-thumb,
.productmodal .quick-view-content::-webkit-scrollbar-thumb,
.filter-sidebar::-webkit-scrollbar-thumb,
.shop-sidebar ul.scrollbar::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

.main-menu-area::-webkit-scrollbar-thumb:hover,
.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-thumb:hover,
.productmodal .quick-view-content::-webkit-scrollbar-thumb:hover,
.filter-sidebar::-webkit-scrollbar-thumb:hover,
.shop-sidebar ul.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-font-color);
}

@media screen and (max-height: 600px) {

    .main-menu-area,
    .cart-drawer {
        -webkit-scrollbar-width: thin;
        scrollbar-width: thin;
    }

    .main-menu-area::-webkit-scrollbar,
    .cart-drawer::-webkit-scrollbar {
        width: 4px;
    }

    .main-menu-area::-webkit-scrollbar-track,
    .cart-drawer::-webkit-scrollbar-track {
        background-color: #eeeeee;
    }

    .main-menu-area::-webkit-scrollbar-thumb,
    .cart-drawer::-webkit-scrollbar-thumb {
        background-color: #c1c1c1;
    }

    .main-menu-area::-webkit-scrollbar-thumb:hover,
    .cart-drawer::-webkit-scrollbar-thumb:hover {
        background-color: var(--primary-font-color);
    }
}

/*=====================================
    cart-item css
======================================*/
ul.cart-items {
    padding: 0px 15px;
}

ul.cart-items li.cart-item {
    padding: 20px 0px;
    border-top: 1px solid var(--border-color);
}

ul.cart-items li.cart-item:first-child {
    border-top: none;
}

/* cart-item-info css */
ul.cart-items li.cart-item .cart-item-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

ul.cart-items li.cart-item .cart-item-info .cart-item-image {
    width: 120px;
}

ul.cart-items li.cart-item .cart-item-info .cart-item-details {
    width: calc(100% - 120px);
    padding: 0px 0px 0px 15px;
}

/* cart-item-image css */
ul.cart-items li.cart-item .cart-item-info .cart-item-image a {
    display: block;
}

ul.cart-items li.cart-item .cart-item-info .cart-item-image a img {
    border: 1px solid var(--border-color);
    border-radius: 0px;
}

/* cart-item-details css */
ul.cart-items li.cart-item .cart-item-info .cart-item-details .cart-item-name a {
    display: block;
    color: var(--font-color-header);
    font-weight: 600;
    font-size: 16px;
}

ul.cart-items li.cart-item .cart-item-info .cart-item-details .cart-item-name a:hover {
    color: var(--font-color-primary);
}

ul.cart-items li.cart-item .cart-item-info .cart-item-details .cart-item-variants {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

ul.cart-items li.cart-item .cart-item-info .cart-item-details .cart-item-variants h6 {
    font-size: 14px;
}

ul.cart-items li.cart-item .cart-item-info .cart-item-details .cart-item-variants span {
    display: block;
    margin: 0px 0px 0px 5px;
}

/* cart-item-sub css */
ul.cart-items li.cart-item .cart-item-sub {
    margin: 10px 0px 0px;
}

ul.cart-items li.cart-item .cart-item-sub .cart-qty-price-remove {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

ul.cart-items li.cart-item .cart-item-sub .cart-qty-price-remove .cart-pric-button {
    display: flex;
    align-items: center;
}

ul.cart-items li.cart-item .cart-item-sub .cart-qty-price-remove .cart-item-price {
    margin-left: auto;
}

ul.cart-items li.cart-item .cart-item-sub .cart-qty-price-remove .cart-item-price span.cart-price {
    display: block;
    color: var(--font-color-secondary);
    font-weight: 500;
}

ul.cart-items li.cart-item .cart-item-sub .cart-qty-price-remove .cart-item-remove {
    margin: 0px 0px 0px 10px;
}

ul.cart-items li.cart-item .cart-item-sub .cart-qty-price-remove .cart-item-remove button {
    display: block;
    line-height: 0;
}

ul.cart-items li.cart-item .cart-item-sub .cart-qty-price-remove .cart-item-remove button.cart-remove {
    font-size: 16px;
}

ul.cart-items li.cart-item .cart-item-sub .cart-qty-price-remove .cart-item-remove button.cart-remove:hover {
    opacity: 0.5;
}

ul.cart-items li.cart-item .cart-item-sub .cart-qty-price-remove .cart-item-remove button.cart-remove span {
    display: block;
    line-height: 0;
}


/*=====================================
    quantity css
======================================*/
.js-qty-wrapper {
    width: 120px;
}

.js-qty-wrapper .js-qty-wrap {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 0px;
}

.js-qty-wrapper .js-qty-wrap button.js-qty-adjust {
    color: #929292;
    width: 30px;
    height: 30px;
}

.js-qty-wrapper .js-qty-wrap button.js-qty-adjust.ju-qty-adjust-minus {
    border-right: 1px solid var(--border-color);
}

.js-qty-wrapper .js-qty-wrap button.js-qty-adjust.ju-qty-adjust-plus {
    border-left: 1px solid var(--border-color);
}

.js-qty-wrapper .js-qty-wrap button.js-qty-adjust:hover {
    color: var(--heading-font-color);
}

.js-qty-wrapper .js-qty-wrap button.js-qty-adjust span {
    display: block;
    line-height: 0;
}

.js-qty-wrapper .js-qty-wrap button.js-qty-adjust span svg {
    width: 16px;
    height: 16px;
}

.js-qty-wrapper .js-qty-wrap input.js-qty-num {
    width: calc(100% - 60px);
    height: 30px;
    padding: 0px;
    text-align: center;
    border: none;
}

/*====================================
   animation css
=====================================*/
/* smoothScroll keyframes css */
@-webkit-keyframes smoothScroll {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@-moz-keyframes smoothScroll {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes smoothScroll {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes DropDownSlide {
    to {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }

    0% {
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        transform: translateY(10px);
    }
}

@-moz-keyframes DropDownSlide {
    to {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }

    0% {
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        transform: translateY(10px);
    }
}

@keyframes DropDownSlide {
    to {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }

    0% {
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        transform: translateY(10px);
    }
}


@-webkit-keyframes hovereffect {
    0% {
        opacity: 0.3;
        -webkit-transform: scale(0.95);
        -moz-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
    }

    50% {
        opacity: 0.5;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.1), 0px 0px 5px 5px rgba(255, 255, 255, 0.5), 0px 0px 0px 5px rgba(255, 255, 255, 0.5);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0.95);
        -moz-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
        box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.1), 0px 0px 5px 5px rgba(255, 255, 255, 0.5), 0px 0px 0px 5px rgba(255, 255, 255, 0.5);
    }
}

@-moz-keyframes hovereffect {
    0% {
        opacity: 0.3;
        -webkit-transform: scale(0.95);
        -moz-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
    }

    50% {
        opacity: 0.5;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.1), 0px 0px 5px 5px rgba(255, 255, 255, 0.5), 0px 0px 0px 5px rgba(255, 255, 255, 0.5);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0.95);
        -moz-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
        box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.1), 0px 0px 5px 5px rgba(255, 255, 255, 0.5), 0px 0px 0px 5px rgba(255, 255, 255, 0.5);
    }
}

@keyframes hovereffect {
    0% {
        opacity: 0.3;
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }

    50% {
        opacity: 0.5;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.1), 0px 0px 10px 10px rgba(255, 255, 255, 0.5), 0px 0px 0px 10px rgba(255, 255, 255, 0.5);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.1), 0px 0px 10px 10px rgba(255, 255, 255, 0.5), 0px 0px 0px 10px rgba(255, 255, 255, 0.5);
    }
}

@-webkit-keyframes slide1 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@-moz-keyframes slide1 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes slide1 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@-webkit-keyframes slide2 {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-200%);
    }
}

@-moz-keyframes slide2 {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-200%);
    }
}

@keyframes slide2 {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-200%);
    }
}




/* ===== ATTRACTIVE FOOTER (Scoped Styles) ===== */
.attractive-footer {
    background: #fff;
    color: #000;
    font-family: 'Poppins', sans-serif;
    padding: 90px 0 60px;
    border-top: 3px solid #000;
}

.attractive-footer img {
    width: 180px;
    margin-bottom: 20px;
    filter: brightness(0);
}

.attractive-footer h5 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 1.4rem;
    position: relative;
    letter-spacing: 0.5px;
}

.attractive-footer h5::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 3px;
    background: #000;
    border-radius: 2px;
}

.attractive-footer p {
    color: #111;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
    margin-bottom: 15px;
}

.attractive-footer ul {
    padding: 0;
    list-style: none;
}

.attractive-footer li {
    margin-bottom: 10px;
}

.attractive-footer a {
    color: #000;
    text-decoration: none;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.attractive-footer a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background: #000;
    transition: width 0.3s ease;
}

.attractive-footer a:hover {
    transform: translateX(4px);
    color: #000;
}

.attractive-footer a:hover::after {
    width: 100%;
}

.attractive-footer i {
    font-size: 20px;
    border: 2px solid #000;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    transition: all 0.3s ease;
}

.attractive-footer i:hover {
    background: #000;
    color: #fff;
    transform: scale(1.1);
}

.attractive-footer iframe {
    border: 2px solid #000;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.attractive-footer iframe:hover {
    transform: scale(1.02);
}

.attractive-footer hr {
    border-top: 2px solid #000;
    margin-top: 50px;
    margin-bottom: 20px;
}

.attractive-footer p:last-child {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

@media (max-width: 768px) {
    .attractive-footer {
        text-align: center;
    }

    .attractive-footer h5::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .attractive-footer i {
        margin: 5px;
    }
}

.fonts {
    font-family: "Outfit", sans-serif;
}



/* --- Animations --- */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    50% {
        box-shadow: 0 0 25px rgba(242, 201, 76, 0.35);
    }
}

/* --- Card Base --- */
.feature-card {
    border: none;
    border-radius: 28px;
    background: linear-gradient(145deg, #ffffff, #f3f3f3);
    text-align: center;
    padding: 3rem 2rem;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    animation: fadeUp 1.2s ease forwards;
}

.feature-card:hover {
    transform: translateY(-10px) scale(1.02);
    background: linear-gradient(145deg, #fff, #ebebeb);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.feature-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    bottom: -70px;
    right: -70px;
    background: radial-gradient(circle, rgba(242, 201, 76, 0.2), transparent 70%);
    border-radius: 50%;
    transition: all 0.6s ease;
}

.feature-card:hover::before {
    width: 230px;
    height: 230px;
    opacity: 0.7;
}

/* --- Icon Styling --- */
.feature-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f0f0f0, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.6rem;
    transition: all 0.4s ease;
    animation: floatIcon 3s ease-in-out infinite;
}

.feature-card:hover .feature-icon {
    background: linear-gradient(145deg, #000, #2a2a2a);
    transform: scale(1.1);
    animation: pulseGlow 2s infinite;
}

.feature-icon i {
    font-size: 2rem;
    color: #000;
    transition: all 0.4s ease;
}

.feature-card:hover .feature-icon i {
    color: #f2c94c;
}

/* --- Titles & Text --- */
.feature-card h5 {
    font-weight: 700;
    font-size: 1.35rem;
    color: #000;
    margin-bottom: 0.9rem;
    position: relative;
    display: inline-block;
}

.feature-card h5::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 45px;
    height: 3px;
    border-radius: 3px;
    background: #f2c94c;
    opacity: 0.8;
}

.feature-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.8;
    margin-top: 1.5rem;
    margin-bottom: 0;
    padding: 0 0.5rem;
}

/* --- Sequential Animation Delay --- */
.col-lg-4:nth-child(1) .feature-card {
    animation-delay: 0.2s;
}

.col-lg-4:nth-child(2) .feature-card {
    animation-delay: 0.4s;
}

.col-lg-4:nth-child(3) .feature-card {
    animation-delay: 0.6s;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .feature-card {
        padding: 2.5rem 1.8rem;
    }
}

@media (max-width: 768px) {
    .feature-card {
        padding: 2rem 1.5rem;
    }

    .feature-icon {
        width: 80px;
        height: 80px;
    }

    .feature-card h5 {
        font-size: 1.2rem;
    }

    .feature-card p {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .feature-card {
        padding: 1.8rem 1.2rem;
        border-radius: 20px;
    }

    .feature-icon {
        width: 70px;
        height: 70px;
    }

    .feature-icon i {
        font-size: 1.6rem;
    }
}


.testimonials-section {
    font-family: "Outfit", sans-serif;
    padding: 90px 0;
    text-align: center;
    background: #fafafa;
    overflow: hidden;
}

.testimonials-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #111;
    position: relative;
    display: inline-block;
}

.testimonials-section h2::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #f2c94c, #ffed8b);
    border-radius: 2px;
}

.testimonials-section p {
    color: #666;
    font-size: 1rem;
    margin-top: 1.2rem;
    margin-bottom: 3rem;
}

/* Slider Container */
.slider-container {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.testimonial-track {
    display: flex;
    gap: 25px;
    animation: scroll 40s linear infinite;
}

/* Testimonial Card */
.testimonial-card {
    flex: 0 0 calc(33.333% - 17px);
    background: #fff;
    border-radius: 20px;
    padding: 1.8rem 1.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    text-align: left;
    position: relative;
    transition: all 0.5s ease;
    border: 1px solid #eee;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
    border-color: #f2c94c;
    background: linear-gradient(145deg, #ffffff, #fffdf6);
}

.quote {
    font-size: 38px;
    color: #f2c94c;
    opacity: 0.3;
    position: absolute;
    top: 10px;
    left: 20px;
    font-family: "Outfit", sans-serif;
}

.testimonial-card p {
    color: #333;
    font-size: 1rem;
    line-height: 1.7;
    margin-top: 1.6rem;
    margin-bottom: 1rem;
    min-height: 75px;
    font-weight: 400;
}

.stars {
    color: #f2c94c;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.testimonial-user {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #000;
    color: #000;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.testimonial-card:hover .avatar {
    transform: scale(1.05);
    border-color: #f2c94c;
}

.user-info .name {
    font-weight: 600;
    color: #000;
    font-size: 1rem;
}

.user-info .location {
    color: #777;
    font-size: 0.85rem;
}

/* Infinite Scroll Animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .testimonial-card {
        flex: 0 0 calc(50% - 15px);
    }

    .testimonial-track {
        animation: scrollTablet 35s linear infinite;
    }

    @keyframes scrollTablet {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100%);
        }
    }
}

@media (max-width: 576px) {
    .testimonial-card {
        flex: 0 0 100%;
        padding: 1.5rem 1.2rem;
        border-radius: 16px;
    }

    .testimonial-card p {
        font-size: 0.95rem;
    }

    .avatar {
        width: 45px;
        height: 45px;
        font-size: 0.85rem;
    }
}


.faq-section {
    font-family: "Outfit", sans-serif;
    background: #fafafa;
    padding: 90px 0;
}

.faq-title {
    text-align: center;
    font-weight: 700;
    color: #111;
    font-size: 2rem;
    margin-bottom: 2.5rem;
    position: relative;
    display: inline-block;
}

.faq-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #f2c94c, #ffed8b);
    border-radius: 2px;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
}

.faq-columns {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.faq-col {
    flex: 1;
    min-width: 320px;
}

.accordion-item {
    border: none;
    background: #fff;
    border-radius: 16px;
    margin-bottom: 1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.accordion-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.accordion-button {
    font-weight: 600;
    color: #000;
    background-color: #fff;
    border-radius: 16px;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background: #fffaf0;
    border-left: 4px solid #f2c94c;
}

.accordion-body {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
    padding: 0 1.2rem 1.2rem;
}

.accordion-button::after {
    display: none !important;
}

.faq-icon {
    font-size: 1.4rem;
    font-weight: 700;
    color: #f2c94c;
    transition: all 0.3s ease;
    margin-left: 1rem;
    flex-shrink: 0;
}

.accordion-button:not(.collapsed) .faq-icon {
    transform: rotate(180deg);
    color: #000;
}

/* 📱 Responsive Adjustments */
@media (max-width: 992px) {
    .faq-section {
        padding: 70px 20px;
    }

    .faq-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    .faq-columns {
        gap: 25px;
    }

    .accordion-button {
        font-size: 0.95rem;
        padding: 0.9rem 1rem;
    }
}

@media (max-width: 768px) {
    .faq-col {
        flex: 100%;
    }

    .faq-section {
        padding: 60px 15px;
    }

    .accordion-item {
        border-radius: 14px;
    }

    .accordion-button {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .accordion-body {
        font-size: 0.9rem;
        padding: 0.9rem 1rem 1.1rem;
    }
}

@media (max-width: 576px) {
    .faq-section {
        padding: 50px 10px;
    }

    .faq-title {
        font-size: 1.6rem;
    }

    .accordion-button {
        font-size: 0.9rem;
        padding: 0.8rem 0.9rem;
    }

    .accordion-body {
        font-size: 0.85rem;
    }

    .faq-icon {
        font-size: 1.2rem;
    }
}

/* 🌟 Section Styling */
    .flip-about-section {
      background: linear-gradient(135deg, #f8f9fa 0%, #eef2f7 100%);
      padding: 80px 0;
      position: relative;
      overflow: hidden;
    }

    .flip-about-section h2 {
      font-weight: 800;
      font-size: 2.5rem;
      text-align: center;
      color: #000; /* ✅ Black heading */
      margin-bottom: 40px;
      text-transform: uppercase;
      letter-spacing: 1px;
      position: relative;
    }

    .flip-about-section h2::after {
      content: "";
      display: block;
      width: 80px;
      height: 4px;
      background-color: #000;
      margin: 10px auto 0;
      border-radius: 2px;
    }

    .flip-about-content p {
      text-align: justify;
      color: #444;
      line-height: 1.8;
      font-size: 1.05rem;
    }

    .flip-about-content .flip-btn-primary {
      background-color: #000;
      border-color: #000;
      border-radius: 25px;
      padding: 10px 25px;
      font-weight: 500;
      transition: all 0.3s ease;
      color: #fff;
      text-decoration: none;
      display: inline-block;
    }

    .flip-about-content .flip-btn-primary:hover {
      background-color: #333;
      border-color: #333;
      transform: scale(1.05);
      color: #fff;
    }

    /* 🌟 Flip Image Styling */
    .flip-image-wrapper {
      position: relative;
      width: 100%;
      max-width: 450px;
      height: 320px;
      margin: auto;
      perspective: 1000px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      background-color: #fff;
    }

    .flip-image {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transform: rotateY(180deg);
      transition: all 1s ease-in-out;
      border-radius: 20px;
    }

    .flip-image.active {
      opacity: 1;
      transform: rotateY(0deg);
      z-index: 2;
    }

    /* 🌟 Responsive Improvements */
    @media (max-width: 991.98px) {
      .flip-about-section {
        padding: 70px 0;
      }

      .flip-about-section h2 {
        font-size: 2.2rem;
      }

      .flip-about-content p {
        font-size: 1rem;
      }
    }

    @media (max-width: 767.98px) {
      .flip-about-section {
        padding: 60px 0;
      }

      .flip-about-section h2 {
        font-size: 1.9rem;
        margin-bottom: 25px;
      }

      .flip-about-content {
        text-align: center;
      }

      .flip-about-content .flip-btn-primary {
        display: inline-block;
        margin-top: 15px;
      }

      .flip-image-wrapper {
        max-width: 100%;
        height: 250px;
        margin-top: 30px;
      }
    }

    @media (max-width: 575.98px) {
      .flip-about-section {
        padding: 50px 15px;
      }

      .flip-about-section h2 {
        font-size: 1.7rem;
      }

      .flip-about-content p {
        font-size: 0.95rem;
        text-align: justify;
      }

      .flip-image-wrapper {
        height: 220px;
      }
    }

    @media (max-width: 400px) {
      .flip-about-section h2 {
        font-size: 1.5rem;
      }

      .flip-about-content .flip-btn-primary {
        padding: 8px 20px;
        font-size: 0.9rem;
      }

      .flip-image-wrapper {
        height: 200px;
      }
    }



     /* 🌟 mission and vision */
    .mission-vision-section {
      background: white;
      padding: 90px 0;
      position: relative;
      overflow: hidden;
    }

    .mission-vision-section h2 {
      font-weight: 800;
      font-size: 2.6rem;
      text-align: center;
      color: #000;
      margin-bottom: 65px;
      text-transform: uppercase;
      letter-spacing: 1px;
      position: relative;
    }

    .mission-vision-section h2::after {
      content: "";
      display: block;
      width: 80px;
      height: 4px;
      background-color: #000;
      margin: 12px auto 0;
      border-radius: 3px;
    }

    /* 🌟 Card Styling */
    .mission-card, .vision-card {
      background: linear-gradient(145deg, #ffffff, #f1f3f6);
      border-radius: 20px;
      padding: 35px 25px;
      text-align: center;
      transition: all 0.4s ease;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      position: relative;
      height: 100%;
      overflow: hidden;
    }

    /* 🌟 Hover Animation */
    .mission-card:hover, .vision-card:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
      background: linear-gradient(145deg, #ffffff, #f8faff);
    }

    /* 🌟 Glow Animation Background */
    .mission-card::before, .vision-card::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 193, 7, 0.12) 0%, transparent 70%);
      opacity: 0;
      transition: all 0.6s ease;
      z-index: 0;
    }

    .mission-card:hover::before, .vision-card:hover::before {
      opacity: 1;
      transform: scale(1.1);
    }

    /* 🌟 Icon Styling */
    .mission-card i, .vision-card i {
      font-size: 3.2rem;
      color: #ffc107; /* ✅ Strong Yellow */
      text-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
      transition: all 0.4s ease;
      animation: pulse 2.5s infinite ease-in-out;
      position: relative;
      z-index: 1;
    }

    .mission-card:hover i, .vision-card:hover i {
      transform: scale(1.15) rotate(5deg);
      text-shadow: 0 8px 16px rgba(255, 193, 7, 0.6);
    }

    /* 🌟 Icon Pulse Animation */
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    /* 🌟 Headings */
    .mission-card h4, .vision-card h4 {
      font-weight: 700;
      color: #000;
      margin-bottom: 15px;
      font-size: 1.5rem;
      letter-spacing: 0.5px;
      position: relative;
      z-index: 1;
    }

    /* 🌟 Text */
    .mission-card p, .vision-card p {
      color: #555;
      text-align: justify;
      line-height: 1.8;
      font-size: 1rem;
      margin-bottom: 0;
      position: relative;
      z-index: 1;
    }

    /* 🌟 Fade-Up Animation */
    .fade-up {
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.8s ease;
    }
    .fade-up.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* 🌟 Responsive Design */
    @media (max-width: 991.98px) {
      .mission-vision-section h2 {
        font-size: 2.2rem;
      }
    }

    @media (max-width: 767.98px) {
      .mission-vision-section {
        padding: 70px 0;
      }
      .mission-card, .vision-card {
        padding: 28px 20px;
      }
      .mission-vision-section h2 {
        font-size: 2rem;
      }
    }

    @media (max-width: 575.98px) {
      .mission-vision-section {
        padding: 55px 15px;
      }
      .mission-vision-section h2 {
        font-size: 1.8rem;
      }
      .mission-card h4, .vision-card h4 {
        font-size: 1.25rem;
      }
      .mission-card p, .vision-card p {
        font-size: 0.9rem;
      }
    }

    /* steps css */

    /* 🌟 Section Styling */
    .step-section {
      background: lightgray;
      padding: 120px 0;
      position: relative;
      overflow: hidden;
    }

    .step-section h2 {
      text-align: center;
      font-size: 2.8rem;
      font-weight: 900;
      color: #000;
      text-transform: uppercase;
      margin-bottom: 25px;
      letter-spacing: 1px;
      position: relative;
    }

    .step-section h2::after {
      content: "";
      display: block;
      width: 90px;
      height: 4px;
      background: linear-gradient(90deg, #ffcc00, #ffb300);
      margin: 12px auto 0;
      border-radius: 3px;
    }

    /* 🌟 BUY Description */
    .step-buy-desc {
      max-width: 900px;
      margin: 0 auto 70px;
      color: #444;
      font-size: 1rem;
      line-height: 1.8;
      text-align: justify;
      background: #fff;
      border-radius: 15px;
      padding: 25px 30px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
      border-left: 5px solid #ffcc00;
    }

    /* 🌟 Step Layout */
    .step-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
      margin-bottom: 50px;
    }

    /* 🌟 Step Card */
    .step-card {
      position: relative;
      background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
      border-radius: 25px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
      padding: 85px 30px 40px;
      width: 300px;
      min-height: 420px;
      text-align: center;
      transition: all 0.4s ease;
      border: 1px solid rgba(255, 204, 0, 0.4);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .step-card:hover {
      transform: translateY(-12px);
      background: linear-gradient(180deg, #fff4cc 0%, #ffe680 100%);
      box-shadow: 0 20px 50px rgba(255, 204, 0, 0.4);
      border-color: rgba(255, 204, 0, 0.8);
    }

    /* 🌟 Step Badge */
    .step-badge {
      position: absolute;
      top: -25px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(145deg, #ffb300, #ffcc00);
      color: #000;
      font-weight: 800;
      font-size: 0.95rem;
      padding: 10px 25px;
      border-radius: 50px;
      box-shadow: 0 5px 20px rgba(255, 204, 0, 0.5);
      text-transform: uppercase;
      transition: all 0.3s ease;
      z-index: 10;
    }

    .step-card:hover .step-badge {
      transform: translateX(-50%) scale(1.1);
      box-shadow: 0 10px 30px rgba(255, 204, 0, 0.8);
    }

    /* 🌟 Icon Circle */
    .step-icon {
      width: 90px;
      height: 90px;
      background: linear-gradient(145deg, #ffcc00, #ffb300);
      border-radius: 50%;
      margin: 0 auto 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 10px 25px rgba(255, 204, 0, 0.4);
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
    }

    .step-icon i {
      font-size: 2rem;
      color: #000;
      transition: all 0.4s ease;
      z-index: 2;
    }

    .step-card:hover .step-icon {
      background: linear-gradient(145deg, #ffd633, #ffb300);
      transform: scale(1.1);
      box-shadow: 0 12px 35px rgba(255, 204, 0, 0.6);
    }

    .step-card:hover .step-icon i {
      color: #fff;
      transform: rotate(10deg);
    }

    /* 🌟 Title */
    .step-title {
      font-weight: 800;
      color: #000;
      margin-bottom: 10px;
      font-size: 1.15rem;
      text-transform: uppercase;
    }

    /* 🌟 Description */
    .step-desc {
      color: #444;
      font-size: 0.95rem;
      line-height: 1.7;
      text-align: justify;
      flex-grow: 1;
    }

    /* 🌟 Animation */
    .step-fade {
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.8s ease;
    }

    .step-fade.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* 🌟 Responsive */
    @media (max-width: 992px) {
      .step-card {
        width: 45%;
        min-height: 400px;
      }
    }

    @media (max-width: 768px) {
      .step-card {
        width: 90%;
        min-height: 380px;
      }

      .step-section h2 {
        font-size: 2.2rem;
      }
    }


    /* Contact Section Styling */
    .contact-section {
      padding: 100px 0;
      background-color: #ffffff;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    /* Light golden gradient glow background effect */
    .contact-section::before {
      content: "";
      position: absolute;
      top: -100px;
      left: -150px;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255,204,0,0.15) 0%, transparent 70%);
      z-index: 0;
    }

    .contact-section::after {
      content: "";
      position: absolute;
      bottom: -120px;
      right: -150px;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255,204,0,0.12) 0%, transparent 70%);
      z-index: 0;
    }

    .contact-section .container {
      position: relative;
      z-index: 2;
    }

    .contact-section h2 {
      font-weight: 700;
      font-size: 2.6rem;
      color: #000;
      margin-bottom: 10px;
    }

    .contact-section p.lead {
      color: #6c757d;
      font-size: 1.05rem;
      margin-bottom: 60px;
    }

    /* Decorative underline */
    .underline {
      width: 120px;
      height: 4px;
      background: #ffcc00;
      margin: 0 auto 50px;
      border-radius: 5px;
    }

    /* Contact Box */
    .contact-box {
      background: #111;
      border-radius: 18px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
      padding: 50px 30px;
      transition: all 0.4s ease;
      color: #fff;
      position: relative;
      border: 1px solid transparent;
    }

    .contact-box:hover {
      transform: translateY(-10px);
      box-shadow: 0 18px 40px rgba(255, 204, 0, 0.25);
      border-color: #ffcc00;
    }

    /* Icon Circle */
    .contact-icon {
      width: 95px;
      height: 95px;
      background: #ffcc00;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px;
      box-shadow: 0 10px 25px rgba(255, 204, 0, 0.4);
      transition: all 0.4s ease;
    }

    .contact-box:hover .contact-icon {
      transform: scale(1.1);
      box-shadow: 0 15px 40px rgba(255, 204, 0, 0.6);
    }

    .contact-icon i {
      font-size: 2.5rem;
      color: #0d0d0d;
    }

    .contact-box h5 {
      font-weight: 600;
      font-size: 1.3rem;
      margin-bottom: 12px;
      color: #ffcc00;
    }

    .contact-box p,
    .contact-box a {
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.95rem;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .contact-box a:hover {
      color: #ffcc00;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .contact-section h2 {
        font-size: 2rem;
      }

      .contact-icon {
        width: 75px;
        height: 75px;
      }

      .contact-icon i {
        font-size: 1.8rem;
      }
    }


    /* contact form css */

    /* 🌟 Enquiry Section */
    .enquiry-section {
      font-family: "Poppins", sans-serif;
      background: #f8f8f8; /* ✅ Very light grey background */
      padding: 100px 0;
      color: #333;
      position: relative;
      overflow: hidden;
    }

    /* Decorative Background Circles */
    .enquiry-section::before,
    .enquiry-section::after {
      content: "";
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 204, 0, 0.1) 0%, transparent 70%);
      z-index: 0;
    }

    .enquiry-section::before {
      top: -100px;
      left: -150px;
    }

    .enquiry-section::after {
      bottom: -120px;
      right: -150px;
    }

    .enquiry-section .container {
      position: relative;
      z-index: 2;
    }

    /* Heading */
    .enquiry-title {
      font-size: 2.6rem;
      font-weight: 700;
      color: #000;
      text-align: center;
      margin-bottom: 10px;
    }

    .enquiry-underline {
      width: 130px;
      height: 4px;
      background: #ffcc00;
      margin: 0 auto 30px;
      border-radius: 5px;
    }

    .enquiry-subtitle {
      text-align: center;
      color: #555;
      font-size: 1.05rem;
      margin-bottom: 60px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Image */
    .enquiry-image {
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
      transition: all 0.4s ease;
    }

    .enquiry-image img {
      width: 100%;
      height: 500px;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    .enquiry-image:hover img {
      transform: scale(1.05);
    }

    /* Form Box */
    .enquiry-form {
      background: #fff;
      border-radius: 20px;
      padding: 45px 40px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
      border: 1.5px solid #ccc; /* ✅ Soft border for light background */
      transition: all 0.4s ease;
      position: relative;
    }

    .enquiry-form:hover {
      border-color: #ffcc00;
      box-shadow: 0 10px 35px rgba(255, 204, 0, 0.15);
      transform: translateY(-4px);
    }

    /* Floating Fields */
    .enquiry-floating {
      position: relative;
      margin-bottom: 25px;
    }

    .enquiry-floating input,
    .enquiry-floating textarea {
      border-radius: 12px;
      border: 1.8px solid #bbb;
      background: #fdfdfd;
      height: 58px;
      font-size: 1rem;
      padding: 0.75rem 1rem;
      color: #222;
      transition: all 0.3s ease;
      box-shadow: none;
    }

    .enquiry-floating textarea {
      height: 120px;
      resize: none;
    }

    .enquiry-floating label {
      color: #666;
      padding: 1rem;
      transition: all 0.3s ease;
    }

    .enquiry-floating input:focus,
    .enquiry-floating textarea:focus {
      border-color: #ffcc00;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(255, 204, 0, 0.2);
      color: #000;
    }

    /* Floating Label Animation */
    .enquiry-floating > .form-control:focus ~ label,
    .enquiry-floating > .form-control:not(:placeholder-shown) ~ label,
    .enquiry-floating > textarea:focus ~ label,
    .enquiry-floating > textarea:not(:placeholder-shown) ~ label {
      transform: scale(0.85) translateY(-1.3rem) translateX(0.4rem);
      color: #ffcc00;
      background: #fff;
      padding: 0 6px;
      font-weight: 600;
    }

    /* Button */
    .enquiry-btn {
      background: #333;
      color: #ffcc00;
      border: none;
      border-radius: 12px;
      padding: 14px 25px;
      font-weight: 600;
      transition: all 0.3s ease;
      width: 100%;
      font-size: 1rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .enquiry-btn:hover {
      background: #ffcc00;
      color: #000;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(255, 204, 0, 0.25);
    }

    @media (max-width: 992px) {
      .enquiry-section {
        padding: 70px 0;
      }

      .enquiry-image img {
        height: 350px;
      }

      .enquiry-form {
        margin-top: 30px;
        padding: 35px;
      }
    }

    @media (max-width: 768px) {
      .enquiry-title {
        font-size: 2rem;
      }
    }


   /* Floating Sidebar */
.floating-sidebar {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 9999;
}

/* Subtle shadow */
.fx-elevate {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18));
}

/* FAB Buttons */
.fab-item {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  overflow: visible; /* ✅ important: allows tooltip to be visible */
  text-decoration: none;
  transition: all 0.25s ease;
  z-index: 2;
}

/* Icon Image */
.fab-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  z-index: 3;
}

/* Color Accents */
.fab-item.call { --brand: #2d8cff; }
.fab-item.whatsapp { --brand: #25D366; }

/* Soft glow */
.fab-item .fab-ring {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%, var(--brand) 0%, transparent 60%);
  opacity: 0.2;
  z-index: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover effect */
.fab-item:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}
.fab-item:hover .fab-ring {
  opacity: 0.4;
  transform: scale(1.05);
}

/* ✅ Tooltip Styling (now visible) */
.fab-item::before {
  content: attr(data-label);
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: rgba(17, 17, 17, 0.9);
  color: #fff;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 10; /* ✅ bring tooltip above everything */
}

/* Tooltip Arrow */
.fab-item::after {
  content: "";
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: rgba(17, 17, 17, 0.9);
  opacity: 0;
  transition: all 0.25s ease;
  z-index: 10;
}

/* ✅ Show Tooltip on Hover */
.fab-item:hover::before,
.fab-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* WhatsApp Pulse */
.fab-item.whatsapp {
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 6px 14px rgba(0, 0, 0, 0.12);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 12px 26px rgba(0, 0, 0, 0.18);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .fab-item { width: 50px; height: 50px; }
  .fab-item::before,
  .fab-item::after { display: none; }
}


/* latest product cards css */


        .latest { font-family: "Outfit", sans-serif !important; }

    /* Wider container */
    .latest-container { max-width: 1320px; }

    /* Heading centered and large */
    .latest-heading {
      text-align: center;
      position: relative;
      margin-bottom: 2.5rem;
    }
    .latest-heading::before,
    .latest-heading::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 35%;
      height: 1px;
      background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
      transform: translateY(-50%);
    }
    .latest-heading::before { left: 0; }
    .latest-heading::after  { right: 0; }
    .latest-heading .latest-title {
      display: inline-block;
      background: #fff;
      padding: 0 1rem;
      font-weight: 800;
      font-size: 2rem;
      color: #0f172a;
      letter-spacing: .4px;
    }

    /* Slider setup */
    .latest-carousel-window { overflow: hidden; position: relative; }
    .latest-carousel-track  { display: flex; transition: transform .55s ease; }
    .latest-product-slide   { flex: 0 0 100%; padding: .9rem; }
    @media (min-width: 576px) { .latest-product-slide { flex-basis: 50%; } }
    @media (min-width: 992px) { .latest-product-slide { flex-basis: 25%; } }

    /* Product Card */
    .latest-product-card {
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(0,0,0,.05);
      background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
      box-shadow: 0 10px 28px rgba(0,0,0,.08);
      transition: all .3s ease;
      height: 100%;
    }
    .latest-product-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 48px rgba(0,0,0,.16);
    }

    .latest-media-wrap { overflow: hidden; position: relative; }
    .latest-product-img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      transition: transform .5s ease;
    }
    .latest-product-card:hover .latest-product-img { transform: scale(1.07); }

    /* Text + Price */
    .latest-product-title { font-weight: 700; font-size: 1.1rem; color: #111827; margin: 0; }
    .latest-tiny { font-size: .85rem; color: #6b7280; }
    .latest-price { display: flex; align-items: baseline; gap: .6rem; }
    .latest-price .latest-mrp { color: #9ca3af; text-decoration: line-through; }
    .latest-price .latest-sale { color: #000; font-weight: 800; }

    /* Buttons */
    .latest-btn-row { display: flex; gap: .6rem; }
    .latest-btn-row .btn { flex: 1; font-weight: 600; border-radius: 10px; }
    .latest-btn-cart {
      background: linear-gradient(135deg, #fde047, #facc15) !important;
      border: 1px solid #eab308 !important;
      color: #111827 !important;
      box-shadow: 0 8px 20px rgba(250,204,21,.35);
    }
    .latest-btn-cart:hover {
      box-shadow: 0 10px 28px rgba(250,204,21,.45);
      transform: translateY(-1px);
    }
    .latest-btn-outline {
      border: 1px solid #e2e8f0 !important;
      background: #fff !important;
      color: #334155 !important;
    }
    .latest-btn-outline:hover {
      background: #f8fafc !important;
      border-color: #cbd5e1 !important;
    }

    /* Nav Arrows (black) */
    .latest-nav {
      display: flex;
      justify-content: center;
      gap: .6rem;
      margin-top: 1rem;
    }
    .latest-nav-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(0,0,0,.15);
      background: #fff;
      color: #000;
      box-shadow: 0 5px 18px rgba(0,0,0,.08);
      transition: all .25s ease;
      font-size: 1.1rem;
    }
    .latest-nav-btn:hover {
      background: #000;
      color: #fff;
      transform: translateY(-2px);
    }

    .latest #latest-products .card-body { padding: 18px 18px 20px; }

    /* (Optional) tiny responsiveness boost for small phones */
    @media (max-width: 360px) {
      .latest-heading .latest-title { font-size: 1.6rem; }
      .latest-product-img { height: 220px; }
    }


    /* ===================== REGISTER ===================== */
.register {
    font-family: "Outfit", sans-serif !important;
    min-height: 30dvh;
    display: grid;
    align-items: center;
    padding: clamp(16px, 3vw, 40px);
    background: radial-gradient(120% 120% at -10% -20%, #e9f3ec 0, transparent 60%),
        radial-gradient(120% 120% at 110% -10%, #fff0da 0, transparent 60%),
        linear-gradient(180deg, #f8fafc 0, #f2f5f7 100%);
}
.register-card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 42px 100px rgba(15, 23, 42, 0.16);
    background-image: radial-gradient(ellipse at 20% 10%, rgba(34, 197, 94, 0.05), transparent 45%),
        radial-gradient(ellipse at 80% 0, rgba(234, 179, 8, 0.06), transparent 45%);
}
.register-hero {
    background: linear-gradient(180deg, #f6fff7 0, #fffdf7 100%);
    position: relative;
}
.register-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.12;
    border-radius: inherit;
    pointer-events: none;
    background-image: url('data:image/svg+xml;utf8,<svgxmlns="http://www.w3.org/2000/svg"width="160"height="160"viewBox="00160160"><filterid="n"><feTurbulencetype="fractalNoise"baseFrequency="0.6"numOctaves="2"stitchTiles="stitch"/></filter><rectwidth="100%"height="100%"filter="url(%23n)"opacity="0.35"/></svg>');
    mix-blend-mode: multiply;
}
.register-brand { font-weight: 800; font-size:24px; color: #0f172a; }
.register-title { font-weight: 800; line-height: 1.12; color: #0f172a; }
.register-copy { color: #475569; font-size:20px; }

.register-chip {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 8.8px 14.72px; /* 0.55rem 0.92rem */
    display: inline-flex;
    align-items: center;
    gap: 8.8px; /* 0.55rem */
    font-weight: 600;
    font-size: 20px;
    color: #0f172a;
    box-shadow: 0 8px 18px rgba(2, 8, 23, 0.06);
}
.register-chip i { color: #10b981; }

.register-pad { padding: clamp(22px, 3.2vw, 44px); }
.register-heading { font-weight: 800; color: #0f172a; font-size: 22px; }
.register-muted { color: #667085 !important; font-size: 20px; }

.register-field { position: relative; }
.register-input {
    width: 100%;
    border: 1px solid #e6e9f0;
    border-radius: 16px;
    height: 56px;
    padding: 20px 68px 8px 16px; /* 1.25rem 4.25rem 0.5rem 1rem */
    background: #fff;
    transition: all 0.2s ease;
    outline: 0;
    background-image: radial-gradient(120% 120% at 0 0, rgba(250, 204, 21, 0.06), transparent 60%);
    font-size: 16px; /* 1rem */
    color: #0f172a;
}
.register-input:hover { border-color: #cfd6e4; background: #fafafa; transform: translateY(-1px); }
.register-input:focus {
    border-color: #0f172a;
    background: #fff;
    box-shadow: 0 0 0 4.48px rgba(15, 23, 42, 0.1), 0 14px 28px rgba(2, 8, 23, 0.06); /* 0.28rem */
    transform: none;
}

.register-label {
    position: absolute;
    left: 16px; /* 1rem */
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: #97a3b2;
    pointer-events: none;
    transition: all 0.18s ease;
    background: transparent;
}
.register-input:focus + .register-label,
.register-input:not(:placeholder-shown) + .register-label {
    top: 8.8px;      /* 0.55rem */
    transform: none;
    font-size: 12px; /* 0.75rem */
    color: #0f172a;
}

.register-ico {
    position: absolute;
    right: 46.4px; /* 2.9rem */
    top: 50%;
    transform: translateY(-50%);
    color: #97a3b2;
    pointer-events: none;
    transition: 0.2s;
}
.register-field:has(.register-input:focus) .register-ico {
    color: #0f172a;
    transform: translateY(-50%) scale(1.06);
}
.register-toggle {
    position: absolute;
    right: 16px; /* 1rem */
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #97a3b2;
    cursor: pointer;
    z-index: 3;
}
.register-toggle:hover { color: #0f172a; }

.register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.18s ease;
    border: 1px solid transparent;
}
.register-btn-yellow {
    color: #0f172a;
    background-image: linear-gradient(135deg, #fde047, #facc15);
    border-color: #eab308;
    box-shadow: 0 14px 28px rgba(250, 204, 21, 0.32);
}
.register-btn-yellow:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(250, 204, 21, 0.42);
}
.register-btn-outline { color: #0f172a; background: #fff; border-color: #e4e7ee; }
.register-btn-outline:hover { background: #f8fafc; transform: translateY(-1px); }

.register-help { font-size: 14.4px; /* 0.9rem */ color: #6b7280; }

@media (max-width: 420px) {
    .register-input { padding-right: 73.6px; } /* 4.6rem */
}

/* ===================== LOGIN ===================== */
.login {
    font-family: "Outfit", sans-serif !important;
    min-height: 20dvh;
    display: grid;
    align-items: center;
    padding: clamp(16px, 3vw, 40px);
    background: radial-gradient(120% 120% at -10% -20%, #e9f3ec 0, transparent 60%),
        radial-gradient(120% 120% at 110% -10%, #fff0da 0, transparent 60%),
        linear-gradient(180deg, #f8fafc 0, #f2f5f7 100%);
}
.login-card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 42px 100px rgba(15, 23, 42, 0.16);
    background-image: radial-gradient(ellipse at 20% 10%, rgba(34, 197, 94, 0.05), transparent 45%),
        radial-gradient(ellipse at 80% 0, rgba(234, 179, 8, 0.06), transparent 45%);
}
.login-hero { background: linear-gradient(180deg, #f6fff7 0, #fffdf7 100%); position: relative; }
.login-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.12;
    border-radius: inherit;
    pointer-events: none;
    background-image: url('data:image/svg+xml;utf8,<svgxmlns="http://www.w3.org/2000/svg"width="160"height="160"viewBox="00160160"><filterid="n"><feTurbulencetype="fractalNoise"baseFrequency="0.6"numOctaves="2"stitchTiles="stitch"/></filter><rectwidth="100%"height="100%"filter="url(%23n)"opacity="0.35"/></svg>');
    mix-blend-mode: multiply;
}
.login-brand { font-weight: 800; color: #0f172a; }
.login-title { font-weight: 800; line-height: 1.12; color: #0f172a; }
.login-copy { color: #475569; }

.login-chip {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 8.8px 14.72px; /* 0.55rem 0.92rem */
    display: inline-flex;
    align-items: center;
    gap: 8.8px; /* 0.55rem */
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 8px 18px rgba(2, 8, 23, 0.06);
}
.login-chip i { color: #10b981; }

.login-pad { padding: clamp(22px, 3.2vw, 44px); }
.login-heading { font-weight: 800; color: #0f172a; }
.login-muted { color: #667085 !important; }

.login-field { position: relative; }
.login-input {
    width: 100%;
    height: 56px;
    border: 1px solid #e6e9f0;
    border-radius: 16px;
    outline: 0;
    padding: 20px 68px 8px 16px; /* 1.25rem 4.25rem 0.5rem 1rem */
    background: #fff;
    transition: all 0.2s ease;
    font-size: 16px; /* 1rem */
    color: #0f172a;
    background-image: radial-gradient(120% 120% at 0 0, rgba(250, 204, 21, 0.06), transparent 60%);
}
.login-input:hover { border-color: #cfd6e4; background: #fafafa; transform: translateY(-1px); }
.login-input:focus {
    border-color: #0f172a;
    background: #fff;
    box-shadow: 0 0 0 4.48px rgba(15, 23, 42, 0.1), 0 14px 28px rgba(2, 8, 23, 0.06); /* 0.28rem */
    transform: none;
}

.login-label {
    position: absolute;
    left: 16px; /* 1rem */
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: #97a3b2;
    pointer-events: none;
    transition: all 0.18s ease;
}
.login-input:focus + .login-label,
.login-input:not(:placeholder-shown) + .login-label {
    top: 8.8px;      /* 0.55rem */
    transform: none;
    font-size: 12px; /* 0.75rem */
    color: #0f172a;
}

.login-ico {
    position: absolute;
    right: 46.4px; /* 2.9rem */
    top: 50%;
    transform: translateY(-50%);
    color: #97a3b2;
    pointer-events: none;
    transition: 0.2s;
}
.login-field:has(.login-input:focus) .login-ico {
    color: #0f172a;
    transform: translateY(-50%) scale(1.06);
}
.login-toggle {
    position: absolute;
    right: 16px; /* 1rem */
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #97a3b2;
    cursor: pointer;
    z-index: 3;
}
.login-toggle:hover { color: #0f172a; }

.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.18s ease;
    border: 1px solid transparent;
}
.login-btn-yellow {
    color: #0f172a;
    background-image: linear-gradient(135deg, #fde047, #facc15);
    border-color: #eab308;
    box-shadow: 0 14px 28px rgba(250, 204, 21, 0.32);
}
.login-btn-yellow:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(250, 204, 21, 0.42);
}
.login-btn-outline { color: #0f172a; background: #fff; border-color: #e4e7ee; }
.login-btn-outline:hover { background: #f8fafc; transform: translateY(-1px); }

@media (max-width: 420px) {
    .login-input { padding-right: 73.6px; } /* 4.6rem */
}







       .shop {
      --brand:#ffc107;
      --ink:#111111;
      --muted:#6c757d;
      --card-radius:16px;
      --btn-radius:12px;
      --pag-size:44px;
      font-family: "Outfit", sans-serif !important;
      background: linear-gradient(180deg,#fff 0,#fffaf0 340px,#fff 341px);
    }

    .shop .section-head{max-width:920px;margin-inline:auto}
    .shop .eyebrow{letter-spacing:2.5px;text-transform:uppercase;font-weight:700;font-size:12px;color:var(--muted)}

    /* ===== Controls Bar ===== */
    .shop .controls-bar{
      background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:14px 16px;
      box-shadow:0 8px 16px rgba(0,0,0,.05); gap:12px;
    }

    .shop .results-chip{
      display:inline-flex; align-items:center; gap:8px; padding:7px 12px;
      background:#fffdf4; color:#3b3b3b; border-radius:50px; border:1px solid #f1e2a3;
      box-shadow:0 4px 8px rgba(0,0,0,.04);
    }
    .shop .results-chip .count{
      display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px;
      padding:0 8px; border-radius:50px; background:#fff; color:#111; font-weight:800;
      box-shadow:inset 0 0 0 2px #ffe38a;
      line-height:1;
    }
    .shop .results-chip small{opacity:.8; font-weight:600;font-size:13px}

    .shop .select-caption{
      font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#6c757d;
    }
    .shop .select-wrap{position:relative; min-width:260px;}
    .shop .select-wrap .bi{
      position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#111; opacity:.9;
    }
    .shop .select-wrap .form-select{
      padding-left:36px; border-radius:12px; font-weight:700;
      background-color:#fff; border:2px solid #ffe38a; color:#111;
      box-shadow:0 6px 12px rgba(0,0,0,.06);
      font-family: "Outfit", sans-serif !important;
      background-image:none; appearance:none;
    }
    .shop .select-wrap::after{
      content:"\f282"; font-family:"bootstrap-icons";
      position:absolute; right:12px; top:50%; transform:translateY(-50%);
      font-size:16px; color:#111; pointer-events:none;
    }

    /* ===== Product Cards ===== */
    .shop .product-card{
      position:relative;border:0;border-radius:var(--card-radius);overflow:hidden;background:#fff;
      transition:0.25s ease; box-shadow:0 10px 20px rgba(17,17,17,.08);
      border:1px solid rgba(0,0,0,.06)
    }
    .shop .product-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px rgba(17,17,17,.12)}

    .shop .product-img-wrap{position:relative;background:#fff7cf}
    .shop .ratio-16x10{aspect-ratio:16/10}
    .shop .product-img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;border-bottom:1px solid rgba(0,0,0,.06)}
    .shop .product-card:hover .product-img{transform:scale(1.03)}

    .shop .card-body{padding:16px}
    .shop .card-title{font-weight:700;font-size:16px;color:var(--ink);margin-bottom:6px}
    .shop .sub{color:#4b5563;font-size:14px;margin-bottom:6px}
    .shop .price-row .mrp{opacity:.7;font-size:14px}
    .shop .price-row .sell{font-size:18px;font-weight:900;color:#198754}
    .shop .rent-chip{
      display:inline-block;border-radius:10px;border:1px dashed #e5c651;
      padding:4px 8px;font-weight:700;font-size:13px;color:#111;background:#fff9d6
    }

    /* Product tags */
    .shop .tag{
      display:inline-block;
      font-weight:700;
      color:#111;
      background:#fff9d6;
      border:1px solid #ffe38a;
      border-radius:50px;
      font-size:13px;
      padding:4px 10px;
      margin-bottom:10px;
    }

    /* Buttons */
    .shop .btn-primary{
      background-color:var(--ink);
      border-color:var(--ink);
      border-radius:var(--btn-radius);
      font-weight:700;
      display:inline-flex;
      align-items:center;
      font-family: "Outfit", sans-serif !important;
      gap:6px;
      font-size:14px;
      padding:8px 16px;
    }
    .shop .btn-primary:hover{
      background-color:#000;border-color:#000;
    }

    .shop .btn-soft{
      border:1px solid rgba(0,0,0,.12);
      background:#fff;
      color:#111;
      border-radius:var(--btn-radius);
      font-weight:700;
      display:inline-flex;
      font-family: "Outfit", sans-serif !important;
      align-items:center;
      gap:6px;
      font-size:14px;
      padding:8px 16px;
    }
    .shop .btn-soft:hover{background:var(--brand);border-color:var(--brand)}

    /* Pagination */
    .shop .pagination{gap:6px}
    .shop .pagination .page-link{
      width:44px; height:44px;
      border-radius:50%!important; border:2px solid var(--ink);
      display:flex; align-items:center; justify-content:center;
      font-weight:700; color:var(--ink);
      background:#fff; transition:all 0.15s ease;
      box-shadow:0 4px 8px rgba(0,0,0,.05);
    }
    .shop .pagination .page-item .page-link:hover{background:var(--brand);border-color:var(--ink)}
    .shop .pagination .page-item.active .page-link{background:var(--ink);color:#fff}
    .shop .pagination .page-item.disabled .page-link{opacity:.45}

        .shop .pd-wrap{padding:32px 0}
    .shop .pd-title{font-size:28px; font-weight:800; color:var(--ink); margin:6px 0 8px}
    .shop .pd-meta{color:#6b7280; font-size:14px}

    .shop .pd-tag{
      display:inline-block; font-weight:700; color:#111; background:#fff9d6; border:1px solid #ffe38a;
      border-radius:999px; font-size:13px; padding:4px 10px; margin-right:8px;
    }

    .shop .pd-short{
      font-size:15px; color:#4b5563; background:#fffdf4; border:1px solid #f1e2a3;
      border-radius:12px; padding:12px 14px; margin-bottom:12px;
    }

    /* Gallery */
    .shop .pd-gallery{
      background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:12px;
      box-shadow:0 8px 16px rgba(0,0,0,.04);
    }
    .shop .pd-main{
      width:100%; aspect-ratio:4/3; background:#fff7cf; border-radius:12px; overflow:hidden;
      display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.06);
    }
    .shop .pd-main img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
    .shop .pd-main:hover img{transform:scale(1.02)}
    .shop .pd-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
    .shop .pd-thumb{
      flex:1 0 22%; height:68px; border-radius:10px; overflow:hidden; border:1px solid rgba(0,0,0,.06); background:#fff7cf;
    }
    .shop .pd-thumb img{width:100%; height:100%; object-fit:cover}

    /* Price + Rent */
    .shop .pd-pricebox{
      background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:16px;
      box-shadow:0 8px 16px rgba(0,0,0,.05);
    }
    .shop .pd-sell{font-size:24px; font-weight:900; color:#198754}
    .shop .pd-mrp{font-size:14px; color:#6b7280; text-decoration:line-through; margin-left:10px}
    .shop .pd-tax{font-size:12px; color:#6b7280}

    .shop .pd-rentbox{
      background:#fff9d6; border:1px dashed #e5c651; border-radius:14px; padding:10px 12px;
      display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
      font-family: "Outfit", sans-serif !important;
    }
    .shop .pd-rentprice{font-size:16px; font-weight:800; color:#111}
    .shop .pd-rentlabel{font-size:12px; color:#6b7280}

    /* Inputs */
    .shop .pd-label{font-size:12px; color:#6c757d; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px}
    .shop .pd-input{
      height:38px; border:2px solid #ffe38a; border-radius:10px; padding:0 12px; font-weight:600; color:#111; width:100%;
    }

    /* Quantity */
    .shop .pd-qty{
      display:flex; align-items:center; gap:0;
      border:2px solid #ffe38a; border-radius:12px; overflow:hidden; width:max-content;
    }
    .shop .pd-qty button{
      background:var(--ink); color:#fff; border:0; width:38px; height:38px; font-weight:700;
      display:flex; align-items:center; justify-content:center; cursor:pointer;
    }
    .shop .pd-qty input{
      width:70px; height:38px; border:0; text-align:center; font-weight:700; font-size:15px;
      -moz-appearance:textfield;
    }
    .shop .pd-qty input::-webkit-outer-spin-button,
    .shop .pd-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

    /* Buttons */
    .shop .btn-primary{
      background-color:var(--ink); border-color:var(--ink); border-radius:var(--btn-radius);
      font-weight:700; display:inline-flex; align-items:center; gap:6px; font-size:14px; padding:10px 18px;
    }
    .shop .btn-primary:hover{background:#000;border-color:#000}
    .shop .btn-soft{
      border:1px solid rgba(0,0,0,.12); background:#fff; color:#111; border-radius:var(--btn-radius);
      font-weight:700; display:inline-flex; align-items:center; gap:6px; font-size:14px; padding:10px 18px;
    }
    .shop .btn-soft:hover{background:var(--brand); border-color:var(--brand)}

    /* Info icons */
    .shop .pd-icons{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
    .shop .pd-icon{
      background:#fffdf4; border:1px solid #f1e2a3; border-radius:12px; padding:10px 12px; font-size:14px; color:#111;
      display:flex; gap:8px; align-items:flex-start;
    }
    .shop .pd-icon i{font-size:18px; margin-top:2px}

    /* Long Description & Specs */
    .shop .pd-section-title{font-size:18px; font-weight:800; margin:20px 0 10px; color:#111}
    .shop .pd-desc{font-size:18px; text-align: justify; color:#4b5563}
    .shop .pd-specs{
      width:100%; border:1px solid rgba(0,0,0,.06); border-radius:12px; overflow:hidden; background:#fff;
    }
    .shop .pd-specs th, .shop .pd-specs td{padding:12px 14px; font-size:14px}
    .shop .pd-specs th{width:200px; color:#6b7280; background:#fffaf0; font-weight:700}
    .shop .pd-specs tr+tr td, .shop .pd-specs tr+tr th{border-top:1px solid rgba(0,0,0,.06)}

    /* Related mini cards */
    .shop .mini-card{
      border:1px solid rgba(0,0,0,.06); border-radius:16px; overflow:hidden; background:#fff;
      box-shadow:0 8px 16px rgba(0,0,0,.05);
    }
    .shop .mini-img{width:100%; aspect-ratio:16/10; object-fit:cover; background:#fff7cf}
    .shop .mini-body{padding:12px}
    .shop .mini-title{font-size:16px; font-weight:700; color:#111; margin:0 0 4px}
    .shop .mini-sell{font-size:16px; font-weight:900; color:#198754}
    .shop .mini-mrp{font-size:13px; color:#6b7280; text-decoration:line-through; margin-left:8px}

    /* Responsive */
    @media (max-width: 767.98px){
      .shop .pd-wrap{padding:20px 0}
      .shop .pd-title{font-size:22px}
      .shop .pd-icons{grid-template-columns:1fr}
      .shop .cta-stack .btn{width:100%}
      .shop .pd-rentbox{flex-direction:column; align-items:flex-start}
      .shop .pd-thumb{flex:1 0 48%; height:56px}
    }

        .shop .cart-wrap{padding:32px 0}
    .shop .title{font-size:28px;font-weight:800;color:var(--ink);margin:0 0 8px}
    .shop .subtitle{color:#6b7280;font-size:14px;margin-bottom:16px}

    /* Cart card */
    .shop .cart-card{
      background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:12px;
      box-shadow:0 8px 16px rgba(0,0,0,.05);
    }

    /* Item row */
    .shop .cart-item{
      display:grid;grid-template-columns:86px 1fr auto;gap:12px;align-items:center;padding:10px 6px;
      border-top:1px solid rgba(0,0,0,.06);
    }
    .shop .cart-item:first-child{border-top:0}
    .shop .cart-img{
      width:86px;height:64px;border-radius:10px;object-fit:cover;background:#fff7cf;border:1px solid rgba(0,0,0,.06);
    }
    .shop .item-title{font-size:16px;font-weight:700;color:#111;margin:0}
    .shop .item-meta{font-size:13px;color:#6b7280}
    .shop .price-wrap{display:flex;gap:8px;align-items:baseline}
    .shop .price-sell{font-size:16px;font-weight:900;color:#198754}
    .shop .price-mrp{font-size:13px;color:#6b7280;text-decoration:line-through}

    /* Quantity group */
    .shop .qty-group{
      display:flex;align-items:center;gap:0;border:2px solid #ffe38a;border-radius:12px;overflow:hidden;width:max-content;
    }
    .shop .qty-group button{
      background:var(--ink);color:#fff;border:0;width:36px;height:36px;font-weight:700;
      display:flex;align-items:center;justify-content:center;cursor:pointer;
    }
    .shop .qty-group input{
      width:66px;height:36px;border:0;text-align:center;font-weight:700;font-size:15px;-moz-appearance:textfield;
    }
    .shop .qty-group input::-webkit-outer-spin-button,
    .shop .qty-group input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; }

    /* Line total + remove */
    .shop .line-total{font-size:16px;font-weight:800;color:#111}
    .shop .btn-remove{
      border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;border-radius:12px;font-weight:700;
      display:inline-flex;align-items:center;gap:6px;padding:8px 12px;
    }
    .shop .btn-remove:hover{background:#ffc107;border-color:#ffc107}

    /* Summary */
    .shop .summary{
      background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:16px;
      box-shadow:0 8px 16px rgba(0,0,0,.05);
      position:sticky;top:20px;
    }
    .shop .summary-title{font-size:18px;font-weight:800;color:#111;margin:0 0 10px}
    .shop .sum-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:8px 0}
    .shop .sum-row.muted{color:#6b7280}
    .shop .sum-total{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:18px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.08)}
    .shop .btn-checkout{
      width:100%;background-color:var(--ink);border-color:var(--ink);color:#fff;border-radius:12px;font-weight:800;padding:12px 16px;margin-top:12px;
    }
    .shop .btn-checkout:hover{background:#000;border-color:#000}

    /* Continue shopping button */
    .shop .btn-continue{
      border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;border-radius:12px;font-weight:700;padding:10px 16px;margin-top:16px;
    }
    .shop .btn-continue:hover{background:#ffc107;border-color:#ffc107}

    /* Responsive */
    @media (max-width: 767.98px){
      .shop .cart-wrap{padding:20px 0}
      .shop .title{font-size:24px}
      .shop .cart-item{
        grid-template-columns:74px 1fr;grid-auto-rows:auto;align-items:start;
      }
      .shop .item-actions{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;margin-top:6px}
      .shop .summary{position:static;margin-top:16px}
      .shop .btn-checkout{padding:12px}
    }

    
    .shop .wrap{padding:32px 0}
    .shop .title{font-size:28px;font-weight:800;color:var(--ink);margin:0 0 8px}
    .shop .subtitle{color:#6b7280;font-size:14px;margin-bottom:16px}

    /* Card */
    .shop .cardx{
      background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:16px;
      box-shadow:0 8px 16px rgba(0,0,0,.05); margin-bottom:16px;
    }
    .shop .cardx h3{
      font-size:18px;font-weight:800;color:#111;margin:0 0 12px;
    }

    /* Labels & inputs */
    .shop .label{
      font-size:12px;color:#6c757d;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;
    }
    .shop .input{
      height:40px;border:2px solid #ffe38a;border-radius:12px;padding:0 12px;font-weight:600;color:#111;width:100%;
    }
    .shop .textarea{
      min-height:96px;border:2px solid #ffe38a;border-radius:12px;padding:10px 12px;font-weight:600;color:#111;width:100%;resize:vertical;
    }

    /* Radio pill */
    .shop .radio-pill{
      display:flex;align-items:center;gap:10px;border:2px solid #ffe38a;border-radius:12px;padding:10px 12px;background:#fff;
      font-weight:700;color:#111;
    }
    .shop .radio-pill input{width:18px;height:18px}

    /* Summary */
    .shop .summary{
      background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:16px;
      box-shadow:0 8px 16px rgba(0,0,0,.05);position:sticky;top:20px;
    }
    .shop .sum-title{font-size:18px;font-weight:800;color:#111;margin:0 0 10px}
    .shop .sum-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:8px 0}
    .shop .sum-row.muted{color:#6b7280}
    .shop .sum-total{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:18px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.08)}
    .shop .items-list{border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:10px}
    .shop .item{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid rgba(0,0,0,.06)}
    .shop .item:first-child{border-top:0}
    .shop .thumb{width:60px;height:44px;border-radius:10px;object-fit:cover;background:#fff7cf;border:1px solid rgba(0,0,0,.06)}
    .shop .item-title{font-weight:700;color:#111;font-size:14px;margin:0}
    .shop .qty{font-size:12px;color:#6b7280;font-weight:700}
    .shop .price{margin-left:auto;font-weight:800;color:#111;font-size:14px}

    /* Buttons */
    .shop .btn-primary{
      background-color:var(--ink);border-color:var(--ink);color:#fff;border-radius:12px;font-weight:800;padding:12px 16px;
    }
    .shop .btn-primary:hover{background:#000;border-color:#000}
    .shop .btn-soft{
      border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;border-radius:12px;font-weight:700;padding:10px 16px;
    }
    .shop .btn-soft:hover{background:#ffc107;border-color:#ffc107}

    /* Responsive */
    @media (max-width: 767.98px){
      .shop .wrap{padding:20px 0}
      .shop .title{font-size:24px}
      .shop .summary{position:static;margin-top:8px}
      .shop .stack .btn{width:100%}
    }

        .shop .wrap{padding:32px 0}
    .shop .title{font-size:28px;font-weight:800;color:var(--ink);margin:0 0 8px}
    .shop .subtitle{color:#6b7280;font-size:14px;margin-bottom:16px}

    /* Controls */
    .shop .bar{
      background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:12px 14px;
      box-shadow:0 8px 16px rgba(0,0,0,.05);display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px;
    }
    .shop .chip{
      display:inline-flex;align-items:center;gap:8px;background:#fffdf4;border:1px solid #f1e2a3;border-radius:999px;
      padding:7px 12px;color:#3b3b3b;font-weight:600;
    }
    .shop .chip .count{
      min-width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;background:#fff;box-shadow:inset 0 0 0 2px #ffe38a;color:#111;
    }

    /* Cards */
    .shop .wish-card{
      background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;overflow:hidden;
      box-shadow:0 8px 16px rgba(17,17,17,.08);transition:transform .25s ease;
      height:100%;display:flex;flex-direction:column;
    }
    .shop .wish-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px rgba(17,17,17,.12)}
    .shop .imgbox{background:#fff7cf;border-bottom:1px solid rgba(0,0,0,.06)}
    .shop .imgbox img{width:100%;height:180px;object-fit:cover}
    .shop .body{padding:12px}
    .shop .tag{display:inline-block;font-weight:700;color:#111;background:#fff9d6;border:1px solid #ffe38a;border-radius:999px;font-size:13px;padding:4px 10px;margin-bottom:8px}
    .shop .name{font-size:16px;font-weight:700;color:#111;margin:0 0 4px}
    .shop .meta{font-size:13px;color:#6b7280;margin-bottom:8px}
    .shop .price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
    .shop .sell{font-size:16px;font-weight:900;color:#198754}
    .shop .mrp{font-size:13px;color:#6b7280;text-decoration:line-through}
    .shop .rent{display:inline-block;border:1px dashed #e5c651;background:#fff9d6;color:#111;border-radius:10px;padding:4px 8px;font-weight:700;font-size:13px}

    .shop .actions{display:flex;gap:8px;margin-top:auto;padding:12px}
    .shop .btn-primary{
      background-color:var(--ink);border-color:var(--ink);color:#fff;border-radius:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;
    }
    .shop .btn-primary:hover{background:#000;border-color:#000}
    .shop .btn-soft{
      border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;border-radius:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;
    }
    .shop .btn-soft:hover{background:#ffc107;border-color:#ffc107}

    /* Empty state */
    .shop .empty{
      text-align:center;border:1px dashed rgba(0,0,0,.15);border-radius:16px;padding:24px;background:#fffdf4;
    }
    .shop .empty h3{font-size:20px;font-weight:800;margin-bottom:6px}
    .shop .empty p{color:#6b7280;margin-bottom:12px}

    /* Pagination (optional) */
    .shop .pagination{gap:6px;justify-content:center}
    .shop .page-link{
      width:44px;height:44px;border-radius:50%!important;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink);background:#fff;
      box-shadow:0 4px 8px rgba(0,0,0,.05);
    }
    .shop .page-item.active .page-link{background:var(--ink);color:#fff}

    /* Responsive */
    @media (max-width: 767.98px){
      .shop .wrap{padding:20px 0}
      .shop .imgbox img{height:160px}
      .shop .actions{flex-direction:column}
      .shop .actions .btn{width:100%}
    }

    /* order confirm  */

    .shop .wrap{padding:32px 0}

    /* Success hero */
    .shop .hero{
      background:linear-gradient(180deg,#fff 0,#fffaf0 360px,#fff 361px);
      border:1px solid rgba(0,0,0,.06);
      border-radius:16px;
      padding:18px;
      box-shadow:0 10px 20px rgba(0,0,0,.05);
      text-align:center;
      margin-bottom:16px;
    }
    .shop .badge-check{
      width:64px;height:64px;border-radius:50%;
      background:#111;color:#fff;display:inline-flex;align-items:center;justify-content:center;
      box-shadow:0 12px 20px rgba(17,17,17,.18), inset 0 0 0 3px #ffe38a;
      font-size:30px;margin-bottom:10px;
    }
    .shop .title{font-size:26px;font-weight:900;color:#111;margin:6px 0 6px}
    .shop .subtitle{color:#6b7280;font-size:14px}

    /* Meta & cards */
    .shop .cardx{
      background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:16px;
      box-shadow:0 8px 16px rgba(0,0,0,.05); margin-bottom:16px;
    }
    .shop .cardx h3{font-size:18px;font-weight:800;color:#111;margin:0 0 10px}

    .shop .meta-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
    .shop .meta{
      background:#fffdf4;border:1px solid #f1e2a3;border-radius:12px;padding:10px 12px;
    }
    .shop .meta .k{font-size:12px;color:#6b7280;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
    .shop .meta .v{font-size:15px;font-weight:800;color:#111;margin-top:2px}

    /* Address blocks */
    .shop .addr{
      border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:12px;height:100%;
    }
    .shop .addr .label{font-size:12px;color:#6c757d;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
    .shop .addr .name{font-weight:800;color:#111}
    .shop .addr p{margin:6px 0;color:#374151;font-size:14px}

    /* Items list */
    .shop .items{border:1px solid rgba(0,0,0,.06);border-radius:16px;overflow:hidden}
    .shop .item{display:grid;grid-template-columns:74px 1fr 100px 110px;gap:12px;align-items:center;padding:10px 12px;border-top:1px solid rgba(0,0,0,.06)}
    .shop .item:first-child{border-top:0}
    .shop .thumb{width:74px;height:54px;border-radius:10px;object-fit:cover;background:#fff7cf;border:1px solid rgba(0,0,0,.06)}
    .shop .iname{font-weight:800;color:#111;font-size:15px;margin:0}
    .shop .muted{color:#6b7280;font-size:13px}
    .shop .qty{font-weight:800;color:#111;text-align:center}
    .shop .amt{font-weight:900;color:#111;text-align:right}

    /* Totals */
    .shop .totals{border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:16px}
    .shop .rowx{display:flex;justify-content:space-between;align-items:center;margin:6px 0;font-size:14px}
    .shop .rowx.muted{color:#6b7280}
    .shop .grand{font-weight:900;font-size:18px;border-top:1px solid rgba(0,0,0,.08);padding-top:10px;margin-top:10px}

    /* Buttons */
    .shop .btn-primary{
      background:#111;border-color:#111;color:#fff;border-radius:12px;font-weight:800;padding:12px 16px;
    }
    .shop .btn-primary:hover{background:#000;border-color:#000}
    .shop .btn-soft{
      border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;border-radius:12px;font-weight:700;padding:10px 16px;
    }
    .shop .btn-soft:hover{background:#ffc107;border-color:#ffc107}

    /* ETA pill */
    .shop .eta{
      display:inline-flex;align-items:center;gap:8px;background:#fff9d6;border:1px dashed #e5c651;border-radius:999px;
      padding:6px 10px;font-weight:700;color:#111
    }

    /* Responsive */
    @media (max-width: 991.98px){
      .shop .meta-list{grid-template-columns:repeat(2,minmax(0,1fr))}
      .shop .item{grid-template-columns:64px 1fr 80px 100px}
    }
    @media (max-width: 767.98px){
      .shop .wrap{padding:20px 0}
      .shop .title{font-size:22px}
      .shop .item{grid-template-columns:64px 1fr;grid-auto-rows:auto}
      .shop .qty,.shop .amt{justify-self:end}
      .shop .amt{margin-top:4px}
      .shop .btn-stack .btn{width:100%}
    }

    /* order list */

    .shop .wrap{padding:32px 0}
    .shop .title{font-size:28px;font-weight:900;color:var(--ink);margin:0 0 8px}
    .shop .subtitle{color:#6b7280;font-size:14px;margin-bottom:16px}

    /* Top controls */
    .shop .controls{
      background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:12px;
      box-shadow:0 8px 16px rgba(0,0,0,.05);display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;
    }
    .shop .chip{
      display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#fffdf4;border:1px solid #f1e2a3;color:#3b3b3b;font-weight:600;
    }
    .shop .chip .count{min-width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#fff;box-shadow:inset 0 0 0 2px #ffe38a;font-weight:800;color:#111}
    .shop .select-wrap{position:relative;min-width:220px}
    .shop .select-wrap .form-select{border:2px solid #ffe38a;border-radius:12px;font-weight:700;padding-left:12px;color:#111;background-image:none}

    /* Orders table card */
    .shop .cardx{
      background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:12px;
      box-shadow:0 8px 16px rgba(0,0,0,.05);
    }

    .shop .table thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;border-bottom:1px solid rgba(0,0,0,.06)}
    .shop .table td{vertical-align:middle}
    .shop .order-id{font-weight:800;color:#111}
    .shop .status{
      display:inline-block;font-weight:800;border-radius:999px;padding:6px 10px;font-size:12px;border:1px solid #ffe38a;background:#fff9d6;color:#111;
    }
    .shop .status.paid{background:#e9ffe9;border-color:#b8e6b8}
    .shop .status.pending{background:#fff9d6;border-color:#ffe38a}
    .shop .status.cancel{background:#ffe9e9;border-color:#f2b3b3}

    .shop .btn-primary{
      background:#111;border-color:#111;color:#fff;border-radius:12px;font-weight:800;padding:8px 14px;
    }
    .shop .btn-primary:hover{background:#000;border-color:#000}
    .shop .btn-soft{
      border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;border-radius:12px;font-weight:700;padding:8px 14px;
    }
    .shop .btn-soft:hover{background:#ffc107;border-color:#ffc107}

    /* Mobile cards */
    .shop .mcard{
      border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:12px;background:#fff;box-shadow:0 8px 16px rgba(0,0,0,.05);
    }
    .shop .rowx{display:flex;justify-content:space-between;gap:10px;margin:4px 0}
    .shop .k{color:#6b7280;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
    .shop .v{font-weight:800;color:#111}
    .shop .muted{color:#6b7280}

    /* Pagination */
    .shop .pagination{gap:6px;justify-content:center;margin-top:16px}
    .shop .page-link{
      width:44px;height:44px;border-radius:50%!important;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink);background:#fff;
      box-shadow:0 4px 8px rgba(0,0,0,.05);
    }
    .shop .page-item.active .page-link{background:var(--ink);color:#fff}

    /* Responsive */
    @media (max-width: 767.98px){
      .shop .wrap{padding:20px 0}
      .shop .title{font-size:24px}
      .shop .table-wrap{display:none}           /* hide table on phones */
      .shop .mobile-list{display:block}
    }
    @media (min-width: 768px){
      .shop .mobile-list{display:none}
    }