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

    Project: Cluum

    Description: Cluum - Single product multipurpose bootstrap html eCommerce template

    Author: Spacingtech

    Support: spacingtech10@gmail.com

    Version: 1.0.0

    Primary use: Suitable E-Commerce business startups

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



/*----------------------------------[Table of contents]----------------------------------

# font css

# root css (including color-codes & typography)

# general css

# 'html', 'body', 'h1 to h6' css

# 'section' css

# 'p' css

# 'container', 'container-fluid' css

# 'row' css

# 'a' css

# 'button' css

# 'ul' css

# 'input', 'textarea', 'select' css

# preloader css

# notification-bar css

# header css

# header-menu css

# breadcrumb-area css

# footer-brand-logo css

# footer css

# mobile-menu css

# search-modal css

# cart-drawer css

# bottom-menu css

# bg-screen css

# back-to-top css

# banner-hover css

# quantity css

# add-to-cart css

# review-ratting css

# social-icon css

# custom-checkbox, radio, switch css

# pagination css

# magnific-popup css

# slider-swiper css

# slider-arrow css

# slider-dot css

# view-button css

# scrollbar css

# keyframes css

# animation css

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



/************************************* font start *************************************/

/*====================================

    google font

====================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/************************************* font end *************************************/



/************************************* root start *************************************/

/*=====================================

    root

=====================================*/

:root {

    /* body */

    --body-font-color: #808080;

    --body-font-size: 16px;

    --body-bgcolor: #f7f7f7;

    --body-font-family: 'Inter', sans-serif;

    --body-font-weight: 400;

    --body-font-style: normal;

    --body-font-letter-spacing: 0px;



    /* heading */

    --heading-font-color: #333333;

    --heading-font-family: 'Inter', sans-serif;

    --heading-font-weight: 600;

    --heading-font-style: normal;



    /* section-heading */

    --section-heading-font-color: #333333;

    --section-heading-font-family: 'Inter', sans-serif;

    --section-heading-font-text: none;

    --section-heading-font-weight: 600;

    --section-heading-font-style: normal;

    --section-heading-font-line-height: 1.2;



    /* paragraph */

    --paragraph-font-line-height: 25px;



    /* general color */

    --dominant-font-color: #000;

    --secondary-font-color: #333333;

    --extra-font-color: #ffffff;

    --extra-bgcolor: #ffffff;

    --product-new-sale-label-bgcolor: #333333;

    --product-discount-label-bgcolor: #3cb371;

    --product-sold-label-bgcolor: #b02b28;

    --product-review-color: #ffb703;



    /* border */

    --border-color: 128,128,128;

    --border-opacity: 0.15;

    --border-radius: 5px;

    --border-radius2: 25px;



    /* box-shadow */

    --box-shadow-outer: 51, 51, 51;

    --box-shadow-outer-opacity: 0.15;

    --box-shadow-inner: 51, 51, 51;

    --box-shadow-inner-opacity: 0.15;

}

/************************************* root end *************************************/



/************************************* general start *************************************/

/*=====================================

    body property css

=====================================*/

.body-color,

.body-dominant-color,

.body-secondary-color {

    color: var(--body-font-color);

}

.dominant-link {

    color: var(--heading-font-color);

}

.body-dominant-color,

.body-secondary-color,

.dominant-link {

    -webkit-transition: color 0.3s ease-in-out;

    transition: color 0.3s ease-in-out;

}

.body-dominant-color:hover,

.dominant-link:hover {

    color: var(--dominant-font-color);

}

.body-secondary-color:hover {

    color: var(--secondary-font-color);

}

.body-bg {

    background-color: var(--body-bgcolor);

}

.body-weight {

    font-weight: var(--body-font-weight);

}



/*=====================================

    heading property css

=====================================*/

.heading-color {

    color: var(--heading-font-color);

}

.heading-weight {

    font-weight: var(--heading-font-weight);

}

.section-heading-family {

    font-family: var(--section-heading-font-family);

}

.section-heading-text {

    text-transform: var(--section-heading-font-text);

}

.section-heading-weight {

    font-weight: var(--section-heading-font-weight);

}

.section-heading-lh {

    line-height: var(--section-heading-font-line-height);

}



/*=====================================

    general property css

=====================================*/

.dominant-color {

    color: var(--dominant-font-color);

}

.dominant-bg {

    background-color: var(--dominant-font-color);

}

.secondary-color {

    color: var(--secondary-font-color);

}

.secondary-bg {

    background-color: var(--secondary-font-color);

}

.extra-color {

    color: var(--extra-font-color);

}

.extra-bg {

    background-color: var(--extra-bgcolor);

}

.dominant-btn {

    color: var(--extra-font-color);

    background-color: var(--dominant-font-color);

    border: 1px solid var(--dominant-font-color);

}

.dominant-btn:hover {

    color: var(--extra-font-color);

    background-color: var(--secondary-font-color);

    border-color: var(--secondary-font-color);

}

.secondary-btn {

    color: var(--extra-font-color);

    background-color: var(--secondary-font-color);

    border: 1px solid var(--secondary-font-color);

}

.secondary-btn:hover {

    color: var(--extra-font-color);

    background-color: var(--dominant-font-color);

    border-color: var(--dominant-font-color);    

}

.tertiary-btn {

    color: var(--extra-font-color);

    background-color: var(--dominant-font-color);

    border: 1px solid var(--dominant-font-color);

}

.tertiary-btn:hover {

    color: var(--dominant-font-color);

    background-color: transparent;

    border-color: var(--dominant-font-color);

}

.quaternary-btn {

    color: var(--secondary-font-color);

    background-color: transparent;

    border: 1px solid var(--secondary-font-color);

}

.quaternary-btn:hover {

    color: var(--extra-font-color);

    background-color: var(--secondary-font-color);

    border-color: var(--secondary-font-color);

}

.dominant-btn, .secondary-btn, .tertiary-btn, .quaternary-btn {

    -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;

    transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;

}

.link-btn {

    display: inline-block;

    color: var(--dominant-font-color);

    font-size: 16px;

    text-transform: uppercase;

    font-weight: var(--heading-font-weight);

    border-bottom: 2px solid;

}

.link-body-dominant, .link-body-secondary {

    color: var(--body-font-color);

}

.link-dominant-color {

    color: var(--dominant-font-color);

}

.link-secondary-color {

    color: var(--secondary-font-color);

}

.link-body-dominant, .link-body-secondary, .link-dominant-color, .link-secondary-color {

    display: inline-block;

    text-transform: uppercase;

    font-weight: var(--heading-font-weight);

    border-bottom: 2px solid;

    -webkit-transition: color 0.3s ease-in-out,border-color 0.3s ease-in-out;

    transition: color 0.3s ease-in-out,border-color 0.3s ease-in-out;

}

.link-body-dominant:hover, .link-dominant-color:hover {

    color: var(--dominant-font-color);

}

.link-body-secondary:hover, .link-secondary-color:hover {

    color: var(--secondary-font-color);

}



/*=====================================

    extra property css

=====================================*/

.review-color {

    color: var(--product-review-color);

}

.review-bg {

    background-color: var(--product-review-color);

}

/************************************* general end *************************************/



/************************************* 'html', 'body', 'h1 to h6' start *************************************/

/*=====================================

    html css

=====================================*/

html {

    scroll-behavior: smooth;

}



/*=====================================

    body css

=====================================*/

body {

    color: var(--body-font-color);

    font-size: var(--body-font-size);

    background-color: var(--body-bgcolor);

    font-family: var(--body-font-family);

    font-weight: var(--body-font-weight);

    font-style: var(--body-font-style);

    line-height: normal;

    letter-spacing: var(--body-font-letter-spacing);

    word-break: break-word;

}



/*=====================================

    heading css

=====================================*/

h1, h2, h3, h4, h5, h6 {

    color: var(--heading-font-color);

    margin: 0;

    padding: 0;

    font-family: var(--heading-font-family);

    font-weight: var(--heading-font-weight);

    font-style: var(--heading-font-style);

    line-height: normal;

}

/************************************* 'html', 'body', 'h1 to h6' end *************************************/



/************************************* section start *************************************/

/*=====================================

    section-capture css

=====================================*/

.section-capture {

    margin-bottom: 30px;

}

@media (min-width: 1200px) {

    .section-capture {

        margin-bottom: 50px;

    }

}



/*=====================================

    section-heading css

=====================================*/

.section-heading {

    color: var(--section-heading-font-color);

    font-size: 24px;

    font-family: var(--section-heading-font-family);

    text-transform: var(--section-heading-font-text);

    font-weight: var(--section-heading-font-weight);

    font-style: var(--section-heading-font-style);

    line-height: var(--section-heading-font-line-height);

}

@media (min-width: 1200px) {

    .section-heading {

        font-size: 40px;

    }

}



/*=====================================

    section padding css

=====================================*/

.section-ptb {

    padding-top: 50px;

    padding-bottom: 50px;

}

.section-pt {

    padding-top: 50px;

}

.section-pb {

    padding-bottom: 50px;

}

@media (min-width: 1200px) {

    .section-ptb {

        padding-top: 100px;

        padding-bottom: 100px;

    }

    .section-pt {

        padding-top: 100px;

    }

    .section-pb {

        padding-bottom: 100px;

    }

}



/*=====================================

    section-bgimg css

=====================================*/

.bg-img {

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

}

/************************************* section end *************************************/



/************************************* 'p' start *************************************/

/*=====================================

    paragraph css

=====================================*/

p {

    margin: 0;

    line-height: var(--paragraph-font-line-height);

}

.p-mtm15, .p-mtm20, .p-mtm30 {

    display: flex;

    flex-wrap: wrap;

}

.p-mtm15>*, .p-mtm20>*, .p-mtm30>* {

    width: 100%;

}



/*=====================================

    p-mtm15 css

=====================================*/

.p-mtm15 {

    margin-top: -2px;

}

.p-mtm15>* {

    margin-top: 2px;

}



/*=====================================

    p-mtm20 css

=====================================*/

.p-mtm20 {

    margin-top: -7px;

}

.p-mtm20>* {

    margin-top: 7px;

}



/*=====================================

    p-mtm30 css

=====================================*/

.p-mtm30 {

    margin-top: -17px;

}

.p-mtm30>* {

    margin-top: 17px;

}



/*=====================================

    p-bullets css

=====================================*/

.p-bullets {

    position: relative;

    padding-left: 17px;

}

.p-bullets::before {

    content: "\f3c1";

    font-family: remixicon;

    color: var(--heading-font-color);

    font-size: 7px;

    position: absolute;

    left: 0;

    font-weight: var(--heading-font-weight);

}

/************************************* 'p' end *************************************/



/************************************* 'container', 'container-fluid' start *************************************/

/*=====================================

    'container' css

=====================================*/

.container {

    padding-left: 15px;

    padding-right: 15px;

}

@media (min-width: 1600px) {

    .container {

        max-width: 1380px;

    }

}



/*=====================================

    'container-fluid' css

=====================================*/

.container-fluid {

    padding-left: 15px;

    padding-right: 15px;

}

@media (min-width: 1500px) {

    .container-fluid {

        padding-left: 30px;

        padding-right: 30px;

    }

}

@media (min-width: 1600px) {

    .container-fluid {

        padding-left: 80px;

        padding-right: 80px;

    }

}

/************************************* 'container', 'container-fluid' end *************************************/



/************************************* 'row' start *************************************/

/*=====================================

    row, col css

=====================================*/

.row {

    margin-left: -7.5px;

    margin-right: -7.5px;

}

.row>* {

    padding-left: 7.5px;

    padding-right: 7.5px;

}

@media (min-width: 768px) {

    .row {

        margin-left: -15px;

        margin-right: -15px;

    }

    .row>* {

        padding-left: 15px;

        padding-right: 15px;

    }

}



/*=====================================

    row-mtm15 css

=====================================*/

.row-mtm15 {

    margin-top: -15px;

}

.row-mtm15>* {

    margin-top: 15px;

}



/*=====================================

    row-mtm20 css

=====================================*/

.row-mtm20 {

    margin-top: -12px;

}

.row-mtm20>* {

    margin-top: 12px;

}



/*=====================================

    row-mtm-20 css

=====================================*/

.row-mtm-20 {

    margin-top: -20px;

}

.row-mtm-20>* {

    margin-top: 20px;

}



/*=====================================

    row-pmtm20 css

=====================================*/

.row-pmtm20 {

    margin-top: -7px;

}

.row-pmtm20>* {

    margin-top: 7px;

}



/*=====================================

    row-mtm css

=====================================*/

.row-mtm {

    margin-top: -30px;

}

.row-mtm>* {

    margin-top: 30px;

}



/*=====================================

    row-mtm30 css

=====================================*/

.row-mtm30 {

    margin-top: -15px;

}

.row-mtm30>* {

    margin-top: 15px;

}

@media (min-width: 768px) {

    .row-mtm30 {

        margin-top: -30px;

    }

    .row-mtm30>* {

        margin-top: 30px;

    }

}



/*=====================================

    row-mtm50 css

=====================================*/

.row-mtm50 {

    margin-top: -30px;

}

.row-mtm50>* {

    margin-top: 30px;

}

@media (min-width: 1200px) {

    .row-mtm50 {

        margin-top: -50px;

    }

    .row-mtm50>* {

        margin-top: 50px;

    }

}



/*=====================================

    row-mtm100 css

=====================================*/

.row-mtm100 {

    margin-top: -50px;

}

.row-mtm100>* {

    margin-top: 50px;

}

@media (min-width: 1200px) {

    .row-mtm100 {

        margin-top: -100px;

    }

    .row-mtm100>* {

        margin-top: 100px;

    }

}

/************************************* 'row' end *************************************/



/************************************* 'a' start *************************************/

/*=====================================

    'a' tag css

=====================================*/

a {

    color: var(--heading-font-color);

    text-decoration: none;

}

a:focus, .page-link:focus, .active>.page-link, .page-link.active {

    outline: none;

    box-shadow: none;

}

/************************************* 'a' end *************************************/



/************************************* button start *************************************/

/*=====================================

    'button' tag css

=====================================*/

button {

    display: inline-block;

    padding: 0px;

    background: 0 0;

    font-family: var(--body-font-family);

    border: none;

}

button, button:focus {

    outline: none;

    box-shadow: none;

}

.btn:focus, .btn:active:focus, .btn.active:focus {

    outline: none;

    box-shadow: none;

}



/*=====================================

    btn-row css

=====================================*/

.btn-row {

    margin-top: -15px;

}

.btn-row>* {

    margin-top: 15px;

}



/*=====================================

    btn-row15 css

=====================================*/

.btn-row15 {

    margin-top: -15px;

    margin-left: -7.5px;

    margin-right: -7.5px;

}

.btn-row15>* {

    margin-top: 15px;

    padding-left: 7.5px;

    padding-right: 7.5px;

}



/*=====================================

    btn-style css

=====================================*/

.btn-style {

    height: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 30px;

    text-align: center;

    text-transform: uppercase;

    font-weight: var(--heading-font-weight);

    border-radius: var(--border-radius);

}



/*====================================

    disabled css

====================================*/

button.disabled, a.disabled {

    pointer-events: none;

    opacity: 0.5;

}

/************************************* button end *************************************/



/************************************* ul start *************************************/

/*=====================================

    'ul' tag css

=====================================*/

ul {

    list-style: none;

    margin: 0;

    padding: 0;

}

.ul-row, .ul-mt5, .ul-mt10, .ul-mt15, .ul-mtm15, .ul-mtm-15, .ul-mtm20, .ul-mt30, .ul-mtm30, .ul-ft {

    display: flex;

    flex-wrap: wrap;

}

.ul-mtm-15>*, .ul-mtm20>*, .ul-mtm30>*, .ul-ft>* {

    width: 100%;

}

.ul-row, .ul-mt15, .ul-mtm15, .ul-mt30 {

    margin-left: -7.5px;

    margin-right: -7.5px;

}

.ul-row>*, .ul-mt15>*, .ul-mtm15>*, .ul-mt30>* {

    padding-left: 7.5px;

    padding-right: 7.5px;

}

@media (min-width: 768px) {

    .ul-row, .ul-mtm15, .ul-mt30 {

        margin-left: -15px;

        margin-right: -15px;

    }

    .ul-row>*, .ul-mtm15>*, .ul-mt30>* {

        padding-left: 15px;

        padding-right: 15px;

    }

}



/*=====================================

    ul-mt5 css

=====================================*/

.ul-mt5 {

    margin-top: -5px;

    margin-left: -2.5px;

    margin-right: -2.5px;

}

.ul-mt5>* {

    margin-top: 5px;

    padding-left: 2.5px;

    padding-right: 2.5px;

}



/*=====================================

    ul-mt10 css

=====================================*/

.ul-mt10 {

    margin-top: -10px;

    margin-left: -5px;

    margin-right: -5px;

}

.ul-mt10>* {

    margin-top: 10px;

    padding-left: 5px;

    padding-right: 5px;

}



/*=====================================

    'ul-row', 'ul-mt15' css

=====================================*/

.ul-row, .ul-mt15 {

    margin-top: -15px;

}

.ul-row>*, .ul-mt15>* {

    margin-top: 15px;

}



/*=====================================

    ul-mtm15 css

=====================================*/

.ul-mtm15 {

    margin-top: -7px;

}

.ul-mtm15>* {

    margin-top: 7px;

}



/*=====================================

    ul-mtm-15 css

=====================================*/

.ul-mtm-15 {

    margin-top: -7px;

}

.ul-mtm-15>* {

    margin-top: 7px;

}



/*=====================================

    ul-mtm20 css

=====================================*/

.ul-mtm20 {

    margin-top: -12px;

}

.ul-mtm20>* {

    margin-top: 12px;

}



/*=====================================

    ul-mt30 css

=====================================*/

.ul-mt30 {

    margin-top: -15px;

}

.ul-mt30>* {

    margin-top: 15px;

}

@media (min-width: 768px) {

    .ul-mt30 {

        margin-top: -30px;

    }

    .ul-mt30>* {

        margin-top: 30px;

    }

}



/*=====================================

    ul-mtm30 css

=====================================*/

.ul-mtm30 {

    margin-top: -22px;

}

.ul-mtm30>* {

    margin-top: 22px;

}



/*=====================================

    ul-ft css

=====================================*/

.ul-ft {

    margin-top: -12px;

}

.ul-ft>* {

    margin-top: 12px;

}

/************************************* ul end *************************************/



/************************************* input, select, textarea start *************************************/

/*=====================================

    'input', 'select', 'textarea' tag css

=====================================*/

input, select, textarea {

    color: var(--body-font-color);

    font-size: var(--body-font-size);

    background-color: var(--extra-bgcolor);

    font-family: var(--body-font-family);

    font-weight: var(--body-font-weight);

    border: 1px solid rgba(var(--border-color),var(--border-opacity));

    border-radius: var(--border-radius);

}

input, select {

    height: 50px;

}

input, textarea {

    padding: 10px 15px;

}

textarea {

    display: block;

}



/*=====================================

    placeholder css

=====================================*/

input::-webkit-input-placeholder, input::placeholder, textarea::-webkit-input-placeholder, textarea::placeholder {

    color: var(--body-font-color);

}



/*=====================================

    msg_error css

=====================================*/

input.msg_error, textarea.msg_error {

    color: var(--extra-font-color);

    --bs-bg-opacity: 0.5;

    --bs-danger-opacity: 0.5;

    background-color: rgba(var(--bs-danger-rgb),var(--bs-bg-opacity));

    border-color: rgba(var(--bs-danger-rgb), var(--bs-danger-opacity));

}

input.msg_error::-webkit-input-placeholder, input.msg_error::placeholder, textarea.msg_error::-webkit-input-placeholder, textarea.msg_error::placeholder {

    color: var(--extra-font-color);

}



/*=====================================

    focus css

=====================================*/

input:focus, input:active, select:focus, select:active, textarea:focus, textarea:active {

    outline: none;

    border-color: rgba(var(--border-color),var(--border-opacity));

    box-shadow: none;

}



/*=====================================

    select css

=====================================*/

select {

    cursor: pointer;

    -webkit-appearance: none;

    appearance: none;

    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);

    background-repeat: no-repeat;

    background-position: right .75rem center;

    background-size: 16px 12px;

    padding: 10px 30px 10px 15px;

}



/*=====================================

    field-row css

=====================================*/

.field-row {

    margin-top: -16px;

}

.field-row>* {

    margin-top: 16px;

}

@media (min-width: 768px) {

    .field-row {

        margin-top: -26px;

    }

    .field-row>* {

        margin-top: 26px;

    }

}



/*====================================

    input[type=file] attachment css

====================================*/

.field-row .field-col .field-attachment {

    position: relative;

    z-index: 1;

    border: 1px dashed var(--dominant-font-color);

    border-radius: var(--border-radius);

    overflow: hidden;

}

.field-row .field-col .field-attachment::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: var(--dominant-font-color);

    opacity: 0.1;

    z-index: -1;

}

.field-row .field-col .field-attachment label {

    cursor: pointer;

}

.field-row .field-col .field-attachment .field-attached button {

    font-size: 12px;

    top: -4px;

    right: -4px;

    width: 16px;

    height: 16px;

}

.field-row .field-col .field-attachment .field-attached img {

    width: 88px;

}



/*=====================================

    input-password css

=====================================*/

.field-row .field-col label.field-label {

    display: block;

    margin: 0px 0px 11px 0px;

}

.field-row .field-col .field-pwd {

    height: 50px;

    padding: 10px 15px;

    background-color: var(--extra-bgcolor);

    border: 1px solid rgba(var(--border-color),var(--border-opacity));

    border-radius: var(--border-radius);

}

/************************************* input, textarea, select end *************************************/



/************************************* preloader css start *************************************/

/*====================================

    preloader css

====================================*/

.preloader {

    -webkit-transition: opacity 0.15s ease-in-out,visibility 0.15s ease-in-out;

    transition: opacity 0.15s ease-in-out,visibility 0.15s ease-in-out;

}

body.is-loaded .preloader {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

/************************************* preloader css end *************************************/



/************************************* notification-bar css start *************************************/

/*====================================

    notification-bar css

====================================*/

.main-header.notification-border .header-top-area .notification-bar .notification-bar-line {

    position: relative;

}

.main-header.notification-border .header-top-area .notification-bar .notification-bar-line::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 1px;

    background-color: rgba(var(--border-color),var(--border-opacity));

}



/*====================================

    notification-marquee css

====================================*/

.notification-bar .notification-marquee .notification-marquee-row {

    -webkit-animation: slide-left 40s linear infinite;

    animation: slide-left 40s linear infinite;

}

.notification-bar:hover .notification-marquee .notification-marquee-row,

.notification-bar:focus .notification-marquee .notification-marquee-row {

    -webkit-animation-play-state: paused;

    animation-play-state: paused

}

/************************************* notification-bar css end *************************************/



/************************************* header css start *************************************/

/*====================================

    header-top-area css

====================================*/

.main-header .header-top-area .header-top-first.header-border {

    position: relative;

}

.main-header .header-top-area .header-top-first.header-border::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 1px;

    background-color: rgba(var(--border-color),var(--border-opacity));

}

.main-header .header-top-area .header-top-first .header-top-first-box {

    padding: 14px 15px;

}

.main-header.header-sticky .header-top-area .header-top-first .header-top-first-box {

    padding: 14px 0px;

}

@media (min-width: 1200px) {

    .main-header .header-top-area .header-top-first .header-top-first-box {

        padding: 20px 30px;

    }

    .main-header.header-sticky .header-top-area .header-top-first .header-top-first-box {

        padding: 20px 0px;

    }

}

/************************************* header css end *************************************/



/*====================================

    header-link css

====================================*/

.header-link-block ul li {

    position: relative;

}

.header-link-block ul li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 1px;

    background-color: rgba(var(--border-color), var(--border-opacity));

}

.header-link-block ul li:first-child::before {

    display: none;

}



/*====================================

    header-icon css

====================================*/

.header-icon-block ul.header-icon-element li.header-icon-wrap .header-icon-wrapper a span.header-block-icon-wrap span.header-block-counter::before {

    content: "(";

}

.header-icon-block ul.header-icon-element li.header-icon-wrap .header-icon-wrapper a span.header-block-icon-wrap span.header-block-counter::after {

    content: ")";

}



/************************************* header-menu css start *************************************/

/*====================================

    mainmenu-content css

====================================*/

.mainmenu-content {

    margin: 0px -15px;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li a.menu-link {

    color: var(--secondary-font-color);

    -webkit-transition: color 0.3s ease-in-out;

    transition: color 0.3s ease-in-out;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li:hover a.menu-link {

    color: var(--dominant-font-color);

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li a.menu-link span.menu-title {

    position: relative;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li a.menu-link span.menu-title::after {

    content: "";

    position: absolute;

    bottom: 0px;

    left: 0;

    right: 0;

    width: 0%;

    height: 1px;

    margin: 0px auto;

    background-color: var(--dominant-font-color);

    -webkit-transition: width 0.3s linear;

    transition: width 0.3s linear;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li:hover a.menu-link span.menu-title::after {

    width: 100%;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li:hover .menu-dropdown.collapse:not(.show) {

    display: block;

}



/*====================================

    menu-sub css

====================================*/

.mainmenu-content .main-wrap ul.menu-ul li.menu-li.menu-right {

    position: relative;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub {

    min-width: 230px;

    border-radius: var(--border-radius);

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li.menu-right .menu-dropdown.menu-sub {

    left: auto;

    right: 0;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menu-sublink a {

    color: var(--body-font-color);

    -webkit-transition: color 0.3s ease-in-out;

    transition: color 0.3s ease-in-out;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li:hover .menu-sublink a {

    color: var(--dominant-font-color);

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown {

    top: 0;

    left: 100%;

    overflow-y: auto;

    border-radius: var(--border-radius);

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li.menu-bottom .menusub-dropdown {

    top: auto;

    bottom: 0;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li.menu-right .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown,

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li.menu-right .menusub-dropdown {

    left: auto;

    right: 100%;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li:hover .menusub-dropdown.collapse:not(.show) {

    display: block;

}



/*====================================

    menu-mega css

====================================*/

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-mega .menu-overview {

    column-count: 5;

    column-gap: 30px;

}

/************************************* header-menu css end *************************************/



/************************************* breadcrumb-area css start *************************************/

/*====================================

    breadcrumb-area css

====================================*/

.breadcrumb-area {

    position: relative;

    z-index: 1;

}

.breadcrumb-area::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: #000000;

    opacity: 0.3;

    z-index: -1;

}

.breadcrumb-area span a {

    -webkit-transition: opacity 0.3s ease-in-out;

    transition: opacity 0.3s ease-in-out;

}

.breadcrumb-area span a:hover {

    opacity: 0.7;

}

/************************************* breadcrumb-area css end *************************************/



/************************************* footer-brand-logo css start *************************************/

/*====================================

    brand-logo swiper css

====================================*/

.brand-logo .brand-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) {

    width: 50%;

}

.brand-logo .brand-slider.swiper .swiper-slide {

    padding-left: 15px;

    padding-right: 15px;

}

.brand-logo .brand-slider.swiper .swiper-slide.swiper-slide-visible {

    border-left: 1px solid rgba(var(--border-color),var(--border-opacity));

}

.brand-logo .brand-slider.swiper .swiper-slide.swiper-slide-visible.swiper-slide-active {

    border: none;

}

@media (min-width: 576px) {

    .brand-logo .brand-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) {

        width: 33.33%;

    }

}

@media (min-width: 992px) {

    .brand-logo .brand-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) {

        width: 25%;

    }

}

@media (min-width: 1200px) {

    .brand-logo .brand-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) {

        width: 20%;

    }

}



/*====================================

    brand-content css

====================================*/

@media (min-width: 1200px) {

    .brand-logo .brand-slider .brand-content a span img {

        -webkit-filter: opacity(0.3) grayscale(1);

        filter: opacity(0.3) grayscale(1);

        -webkit-transition: filter 0.3s ease-in-out;

        transition: filter 0.3s ease-in-out;

    }

    .brand-logo .brand-slider .brand-content:hover a span img {

        -webkit-filter: opacity(1) grayscale(0);

        filter: opacity(1) grayscale(0);

    }

}

/************************************* footer-brand-logo css end *************************************/



/************************************* footer css start *************************************/

/*====================================

    footer-news css

====================================*/

.footer-news .news-form .news-wrap input {

    border-radius: var(--border-radius) 0px 0px var(--border-radius);

}

.footer-news .news-form .news-wrap button {

    border-radius: 0px var(--border-radius) var(--border-radius) 0px;

}



/*====================================

    footer-social css

====================================*/

.footer-social ul.social-ul li.social-li a {

    -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;

    transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;

}

.footer-social ul.social-ul li.social-li a:hover {

    color: var(--extra-font-color);

    background-color: var(--dominant-font-color);

    border-color: var(--dominant-font-color);

}

/************************************* footer css end *************************************/



/************************************* mobile-menu css start *************************************/

/*====================================

    mobile-menu css

====================================*/

.mobile-menu {

    left: -350px;

    width: 350px;

    max-width: 100%;

    overflow: hidden;

    -webkit-transition: left 0.3s ease-in-out,visibility 0.3s ease-in-out;

    transition: left 0.3s ease-in-out,visibility 0.3s ease-in-out;

}

.mobile-menu.active {

    left: 0px;

}

@media screen and (max-height: 600px) {

    .mobile-menu {

        overflow-y: auto;

    }

}



/* mobile-contents css */

.mobile-menu .mobile-contents {

    height: 100%;

}

@media screen and (max-height: 600px) {

    .mobile-menu .mobile-contents {

        height: auto;

    }

}



/*====================================

    mobilemenu-content css

====================================*/

.mobilemenu-content {

    overflow-y: auto;

}

.mobilemenu-content .main-wrap ul.menu-ul {

    margin-top: -1px;

}

.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button,

.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="false"],

.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn span a {

    color: var(--body-font-color);

}

.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="true"],

.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="true"] + span a {

    color: var(--dominant-font-color);

}

.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="true"] i::before {

    content: "\f1af";

}

/************************************* mobile-menu css end *************************************/



/************************************* search-modal css start *************************************/

/*====================================

    search-results css

====================================*/

.search-bar .search-results .search-for span::before {

    content: '"';

}

.search-bar .search-results .search-for span::after {

    content: '"';

}

.search-bar .search-results ul.search-ul {

    margin-top: -1px;

    max-height: 206px;

    overflow-y: auto;

}

/************************************* search-modal css end *************************************/



/************************************* cart-drawer css start *************************************/

/*====================================

    cart-drawer css

====================================*/

.cart-drawer {

    right: -450px;

    width: 450px;

    max-width: 100%;

    overflow: hidden;

    -webkit-transition: right 0.3s ease-in-out,visibility 0.3s ease-in-out;

    transition: right 0.3s ease-in-out,visibility 0.3s ease-in-out;

}

.cart-drawer.active {

    right: 0px;

}

@media screen and (max-height: 600px) {

    .cart-drawer {

        overflow-y: auto;

    }

}



/*====================================

    drawer-contents css

====================================*/

.cart-drawer form.drawer-contents {

    height: 100%;

}

@media screen and (max-height: 600px) {

    .cart-drawer form.drawer-contents {

        height: auto;

    }

}



/*====================================

    drawer-inner css

====================================*/

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable {

    margin-top: -1px;

}



/*============================================

    drawer-recommended-product swiper css

============================================*/

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product-slider.swiper:not(.swiper-initialized) .swiper-slide:not([style]) {

    width: 33.33%;

}



/* drawer-recommended product-image css */

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-image a.pro-img {

    display: block;

    border-radius: var(--border-radius);

    overflow: hidden;

}



/* drawer-recommended product-content css */

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content {

    text-align: center;

}

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content .pro-content {

    display: flex;

    flex-direction: column;

    padding-top: 12px;

}

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content .pro-content .product-price {

    margin-top: 6px;

}

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-recommended-product .drawer-recommended-product-wrap .drawer-recommended-product .drawer-recommended-single-product-wrap .product-content .pro-content .product-price .price-box {

    justify-content: center;

}



/*====================================

    drawer-instruction css

====================================*/

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-instruction a span.drawer-instruction-icon,

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-instruction a[aria-expanded="false"] span.drawer-instruction-icon {

    -webkit-transition: transform 0.3s ease-in-out;

    transition: transform 0.3s ease-in-out;

}

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable .drawer-instruction a[aria-expanded="true"] span.drawer-instruction-icon {

    transform: scaleY(-1);

}



/*====================================

    drawer-footer css

====================================*/

.cart-drawer form.drawer-contents .drawer-inner .drawer-footer .drawer-cart-checkout .drawer-cart-box {

    margin-top: -4px;

}

/************************************* cart-drawer css end *************************************/



/************************************* bottom-menu css start *************************************/

/*====================================

    bottom-menu css

====================================*/

.bottom-menu .bottom-menu-element a span.bottom-menu-icon-wrap {

    margin-left: -1.5px;

    margin-right: -1.5px;

}

.bottom-menu .bottom-menu-element a span.bottom-menu-icon-wrap>* {

    padding-left: 1.5px;

    padding-right: 1.5px;

}

.bottom-menu .bottom-menu-element a span.bottom-menu-icon-wrap span.bottom-menu-counter::before {

    content: "(";

}

.bottom-menu .bottom-menu-element a span.bottom-menu-icon-wrap span.bottom-menu-counter::after {

    content: ")";

}

/************************************* bottom-menu css end *************************************/



/************************************* bg-screen css start *************************************/

/*====================================

    bg-screen css

====================================*/

.bg-screen .bg-back,

.bg-screen .bg-shop,

.without-shop-sidebar .bg-screen .bg-back {

    -webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;

    transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;

}

@media (min-width: 1200px) {

    .bg-screen .bg-back {

        display: none;

    }

    .without-shop-sidebar .bg-screen .bg-back {

        display: block;

    }

}

/************************************* bg-screen css end *************************************/



/************************************* back-to-top css start *************************************/

/*====================================

    back-to-top css

====================================*/

a#top {

    bottom: 60px;

    right: 15px;

    -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out,border-color 0.3s ease-in-out;

    transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out,border-color 0.3s ease-in-out;

}

@media (min-width: 768px) {

    a#top {

        right: 30px;

    }

}

@media (min-width: 1600px) {

    a#top {

        right: 100px;

    }

}

/************************************* back-to-top css end *************************************/



/************************************* banner-hover css start *************************************/

/*====================================

    banner-hover css

====================================*/

.banner-hover .banner-img .banner-icon {

    transform: translate(-50%,-50%);

    opacity: 0;

    visibility: hidden;

    -webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;

    transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;

}

.banner-hover .banner-img .banner-btn {

    opacity: 0;

    visibility: hidden;

    -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;

    transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;

}

.banner-hover:hover .banner-img .banner-btn,

.banner-hover:hover .banner-img .banner-icon {

    opacity: 1;

    visibility: visible;

}

.banner-hover .banner-img img {

    -webkit-transition: transform 0.3s ease-in-out,filter 0.3s ease-in-out;

    transition: transform 0.3s ease-in-out,filter 0.3s ease-in-out;

}

.banner-hover:hover .banner-btn img,

.banner-hover:hover .banner-img img {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}

.banner-hover:hover .banner-img .banner-btn + img,

.banner-hover:hover .banner-img .banner-icon + img {

    -webkit-filter: brightness(0.7);

    filter: brightness(0.7);

}



/*====================================

    video css

====================================*/

.video .video-loader {

    display: none;

}

.video .video-loader::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: var(--body-bgcolor);

    opacity: 0.8;

}

.video .video-loader span svg {

    width: 56px;

    -webkit-animation: rotator 1s linear infinite;

    animation: rotator 1s linear infinite;

}

.video .video-loader span svg circle {

    stroke-dashoffset: 0;

    stroke-dasharray: 280;

    transform-origin: center;

    -webkit-animation: dash 1s ease-in-out infinite;

    animation: dash 1s ease-in-out infinite;

}

.video .video-img .banner-video-icon {

    position: relative;

}

.video .video-img .banner-video-icon::before,

.video .video-img .banner-video-icon::after {

    content: '';

    position: absolute;

    top: -8px;

    right: -8px;

    bottom: -8px;

    left: -8px;

    background-color: var(--extra-bgcolor);

    z-index: -1;

    border-radius: 100%;

}

.video .video-img .banner-video-icon::before {

    -webkit-animation: hoverEffect 2s linear infinite;

    animation: hoverEffect 2s linear infinite;

}

.video .video-img .banner-video-icon::after {

    -webkit-animation: hoverEffect 4s linear infinite;

    animation: hoverEffect 4s linear infinite;

}

.video .video-img img,

.video video {

    -webkit-filter: brightness(0.7);

    filter: brightness(0.7);

}

.video .video-frame {

    display: none;

}

.video video {

    display: none;

    object-fit: cover;

    object-position: center;

}

/************************************* banner-hover css end *************************************/



/************************************* quantity css start *************************************/

/*====================================

    quantity css

====================================*/

.js-qty-wrapper {

    width: 104px;

}

.js-qty-wrapper .js-qty-wrap button.js-qty-adjust {

    width: 32px;

    height: 32px;

}

.js-qty-wrapper .js-qty-wrap input.js-qty-num {

    width: calc(100% - 64px);

    height: 32px;

}



/* Chrome, Safari, Edge, Opera */

.js-qty-wrapper .js-qty-wrap input.js-qty-num::-webkit-outer-spin-button,

.js-qty-wrapper .js-qty-wrap input.js-qty-num::-webkit-inner-spin-button {

    -webkit-appearance: none;

}



/* Firefox */

.js-qty-wrapper .js-qty-wrap input.js-qty-num[type=number] {

    -moz-appearance: textfield;

    appearance: textfield;

}



.js-qty-wrapper .js-qty-wrap input.js-qty-num[type="number"]:hover,

.js-qty-wrapper .js-qty-wrap input.js-qty-num[type="number"]:focus {

    -moz-appearance: number-input;

    appearance: number-input;

}

/************************************* quantity css end *************************************/



/************************************* add-to-cart css start *************************************/

/*====================================

    add-to-cart css start

====================================*/

.add-to-cart.loading span.product-icon span.product-bag-icon,

.add-to-cart.done span.product-icon span.product-bag-icon {

    display: none;

}

.add-to-cart span.product-icon span.product-loader-icon {

    display: none;

    -webkit-animation: spin 1s linear infinite;

    animation: spin 1s linear infinite;

}

.add-to-cart.loading span.product-icon span.product-loader-icon {

    display: block;

}

.add-to-cart span.product-icon span.product-check-icon {

    display: none;

}

.add-to-cart.done span.product-icon span.product-check-icon {

    display: block;

}

/************************************* add-to-cart css end *************************************/



/************************************* review-ratting css start *************************************/

/*====================================

    review-ratting css

====================================*/

span.review-ratting {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

}

span.review-ratting span.review-star {

    color: var(--product-review-color);

    display: flex;

    flex-wrap: wrap;

    line-height: 1;

}

span.review-ratting span.review-star i {

    margin: 0px 0px 0px 3px;

}

span.review-ratting span.review-star i:first-child {

    margin: 0;

}

span.review-ratting span.review-caption {

    display: none;

    font-size: 14px;

    margin-left: 5px;

    line-height: 1;

}

span.review-ratting span.review-caption::before {

    content: "(";

}

span.review-ratting span.review-caption::after {

    content: ")";

}

/************************************* review-ratting css end *************************************/



/************************************* social-icon css start *************************************/

/*====================================

    social-icon css

====================================*/

.behance {

    color: #3a67fa;

}

.bg-behance {

    background-color: #3a67fa;

}

.dribbble {

    color: #ea4c89;

}

.bg-dribbble {

    background-color: #ea4c89;

}

.facebook {

    color: #3b5998;

}

.bg-facebook {

    background-color: #3b5998;

}

.instagram {

    background-image: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}

.bg-instagram {

    background-image: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);

}

.linkedin {

    color: #0a66c2;

}

.bg-linkedin {

    background-color: #0a66c2;

}

.pinterest {

    color: #e60023;

}

.bg-pinterest {

    background-color: #e60023;

}

.twitter {

    color: #00acee;

}

.bg-twitter {

    background-color: #00acee;

}

.youtube {

    color: #cd201f;

}

.bg-youtube {

    background-color: #cd201f;

}

/************************************* social-icon css end *************************************/



/************************************* custom-checkbox, radio, switch css start *************************************/

/*====================================

    custom-checkbox css

====================================*/

label.cust-checkbox-label {

    display: table;

    position: relative;

    -webkit-user-select: none;

    user-select: none;

    cursor: pointer;

}

label.cust-checkbox-label input.cust-checkbox {

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 0;

    opacity: 0;

    cursor: pointer;

}

label.cust-checkbox-label span.cust-check {

    float: left;

    position: relative;

    top: 3px;

    width: 15px;

    height: 15px;

    background-color: var(--extra-bgcolor);

    margin: 0px 5px 0px 0px;

    border: 1px solid rgba(var(--border-color),var(--border-opacity));

    border-radius: var(--border-radius);

}

label.cust-checkbox-label:hover span.cust-check,

label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check {

    box-shadow: inset 0px 0px 5px rgba(var(--box-shadow-inner),var(--box-shadow-inner-opacity));

}

label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check {

    background-color: var(--secondary-font-color);

    border-color: var(--secondary-font-color);

}

label.cust-checkbox-label span.cust-check::after {

    display: none;

    content: "\eb7a";

    font-family: 'remixicon' !important;

    color: var(--extra-font-color);

    font-size: 13px;

}

label.cust-checkbox-label input.cust-checkbox:checked ~ span.cust-check::after {

    display: block;

}



/*====================================

    custom-checkbox img css

====================================*/

label.cust-checkbox-label img {

    width: 48px;

    border: 1px solid transparent;

    border-radius: var(--border-radius);

}

label.cust-checkbox-label input.cust-checkbox:checked ~ img {

    border-color: var(--secondary-font-color);

}



/*====================================

    custom-radio css

====================================*/

label.cust-radio-label {

    display: table;

    position: relative;

    -webkit-user-select: none;

    user-select: none;

    cursor: pointer;

}

label.cust-radio-label input {

    position: absolute;

    left: 0;

    width: 0;

    height: 0;

    opacity: 0;

    cursor: pointer;

}

label.cust-radio-label span.cust-check {

    float: left;

    position: relative;

    width: 20px;

    height: 20px;

    background-color: var(--body-bgcolor);

    margin: 0px 5px 0px 0px;

    border: 1px solid rgba(var(--border-color),var(--border-opacity));

    border-radius: 50%;

}

label.cust-radio-label input:checked ~ span.cust-check {

    border-color: var(--secondary-font-color);

}

label.cust-radio-label span.cust-check::after {

    display: none;

    content: "";

    position: absolute;

    bottom: 50%;

    left: 50%;

    transform: translate(-50%, 50%);

    width: 10px;

    height: 10px;

    background-color: var(--secondary-font-color);

    border-radius: 50%;

}

label.cust-radio-label input:checked ~ span.cust-check::after {

    display: block;

}

label.cust-radio-label span.cust-text span.cust-other-text {

    font-size: 12px;

}



/*====================================

    custom-switch css

====================================*/

label.cust-switch-label {

    position: relative;

    width: 30px;

    height: 10px;

}

label.cust-switch-label input {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

}

label.cust-switch-label span.cust-switch-slide {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    display: flex;

    align-items: center;

    background-color: var(--extra-bgcolor);

    cursor: pointer;

    border-radius: 25px;

    border: 1px solid rgba(var(--border-color),var(--border-opacity));

    -webkit-transition: background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;

    transition: background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;

}

label.cust-switch-label input:checked ~ span.cust-switch-slide {

    background-color: var(--dominant-font-color);

    border-color: var(--extra-bgcolor);

}

label.cust-switch-label span.cust-switch-slide::before {

    content: "";

    position: absolute;

    left: 0px;

    transform: translateX(0%);

    width: 10px;

    height: 20px;

    background-color: var(--dominant-font-color);

    border-radius: 25px;

    border: 1px solid var(--dominant-font-color);

    -webkit-transition: background-color 0.3s ease-in-out,transform 0.3s ease-in-out,border-color 0.3s ease-in-out;

    transition: background-color 0.3s ease-in-out,transform 0.3s ease-in-out,border-color 0.3s ease-in-out;

}

label.cust-switch-label input:checked ~ span.cust-switch-slide::before {

    background-color: var(--extra-bgcolor);

    transform: translateX(200%);

    border-color: rgba(var(--border-color),var(--border-opacity));

}

/************************************* custom-checkbox, radio, switch css end *************************************/



/************************************* pagination css start *************************************/

/*====================================

    pagination css

====================================*/

.paginatoin-area ul.pagination-box li.page-item a.page-link {

    color: var(--heading-font-color);

    background-color: var(--extra-bgcolor);

    -webkit-transition: color 0.3s ease-in-out;

    transition: color 0.3s ease-in-out;

}

.paginatoin-area ul.pagination-box li.page-item a.page-link:not(.icon-16) {

    font-size: var(--body-font-size);

}

.paginatoin-area ul.pagination-box li.page-item:not(.first,.last) a.page-link {

    width: 32px;

    height: 32px;

}



/* pagination page-link active css */

.paginatoin-area ul.pagination-box li.page-item a.page-link:hover {

    color: var(--dominant-font-color);

}

.paginatoin-area ul.pagination-box li.page-item a.page-link.active {

    color: var(--extra-font-color);

    background-color: var(--dominant-font-color);

}



/* pagination disabled css */

.paginatoin-area ul.pagination-box li.page-item.disabled a.page-link {

    opacity: 0.5;

}

/************************************* pagination css end *************************************/



/************************************* magnific-popup css start *************************************/

/*==============================

    magnific-popup css

==============================*/

.mfp-with-zoom .mfp-container,

.mfp-with-zoom.mfp-bg {

    opacity: 0;

    -webkit-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;

}

.mfp-with-zoom.mfp-ready .mfp-container {

    opacity: 1;

}

.mfp-with-zoom.mfp-ready.mfp-bg {

    opacity: 0.95;

}

.mfp-with-zoom.mfp-removing .mfp-container,

.mfp-with-zoom.mfp-removing.mfp-bg {

    opacity: 0;

}

.mfp-container.mfp-iframe-holder {

    width: auto;

    left: 15px;

    right: 15px;

}

.mfp-iframe-holder .mfp-close {

    display: block!important;

    font-size: 16px;

    padding: 0;

    height: auto;

    width: auto;

    position: absolute;

    top: -20px;

    right: 0;

    background-color: transparent!important;

    line-height: 1;

}

.mfp-iframe-scaler iframe {

    border: none;

    border-radius: var(--border-radius);

}

/************************************* magnific-popup css end *************************************/



/************************************* slider-swiper css start *************************************/

/*====================================

    product slider-swiper css

====================================*/

.collection-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) {

    width: 50%;

}

@media (min-width: 768px) {

    .collection-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) {

        width: 33.33%;

    }

}



/*====================================

    blog slider-swiper css

====================================*/

.blog-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) {

    width: 100%;

}

@media (min-width: 768px) {

    .blog-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) {

        width: 50%;

    }

}

@media (min-width: 992px) {

    .blog-wrap .swiper:not(.swiper-initialized) .swiper-slide:not([style]) {

        width: 33.33%;

    }

}

/************************************* slider-swiper css end *************************************/



/************************************* slider-arrow css start *************************************/

/*====================================

    slider-arrow css

====================================*/

.shop-cat-wrap,

.cat-wrap,

.collection-wrap,

.testi-wrap,

.blog-wrap {

    position: relative;

}

.shop-cat-wrap .swiper-buttons,

.cat-wrap .swiper-buttons,

.collection-wrap .swiper-buttons,

.testi-wrap .swiper-buttons,

.blog-wrap .swiper-buttons {

    display: none;

    margin-top: 30px;

    text-align: center;

    line-height: 0;

}

.shop-cat-wrap .swiper-buttons .swiper-buttons-wrap,

.cat-wrap .swiper-buttons .swiper-buttons-wrap,

.collection-wrap .swiper-buttons .swiper-buttons-wrap,

.testi-wrap .swiper-buttons .swiper-buttons-wrap,

.blog-wrap .swiper-buttons .swiper-buttons-wrap {

    display: inline-flex;

}

@media (min-width: 768px) {

    .shop-cat-wrap .swiper-buttons,

    .cat-wrap .swiper-buttons,

    .collection-wrap .swiper-buttons,

    .testi-wrap .swiper-buttons,

    .blog-wrap .swiper-buttons {

        margin-top: 0px;

    }

    .shop-cat-wrap .swiper-buttons .swiper-buttons-wrap,

    .cat-wrap .swiper-buttons .swiper-buttons-wrap,

    .collection-wrap .swiper-buttons .swiper-buttons-wrap,

    .testi-wrap .swiper-buttons .swiper-buttons-wrap,

    .blog-wrap .swiper-buttons .swiper-buttons-wrap {

        display: block;

    }

}



/* slider-arrow button css */

.shop-cat-wrap .swiper-buttons button,

.cat-wrap .swiper-buttons button,

.collection-wrap .swiper-buttons button,

.testi-wrap .swiper-buttons button,

.blog-wrap .swiper-buttons button {

    color: var(--secondary-font-color);

    font-size: 20px;

    width: 40px;

    height: 40px;

    background-color: var(--extra-bgcolor);

    margin-right: 10px;

    border: 1px solid rgba(var(--border-color),var(--border-opacity));

    border-radius: 100%;

    box-shadow: rgba(var(--box-shadow-outer),var(--box-shadow-outer-opacity));

    -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;

    transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,border-color 0.3s ease-in-out;

}

.shop-cat-wrap .swiper-buttons button:last-child,

.cat-wrap .swiper-buttons button:last-child,

.collection-wrap .swiper-buttons button:last-child,

.testi-wrap .swiper-buttons button:last-child,

.blog-wrap .swiper-buttons button:last-child {

    margin: 0px;

}

.shop-cat-wrap .swiper-buttons button:hover,

.cat-wrap .swiper-buttons button:hover,

.collection-wrap .swiper-buttons button:hover,

.testi-wrap .swiper-buttons button:hover,

.blog-wrap .swiper-buttons button:hover {

    color: var(--extra-font-color);

    background-color: var(--dominant-font-color);

    border-color: var(--dominant-font-color);

}

@media (min-width: 768px) {

    .shop-cat-wrap .swiper-buttons button,

    .cat-wrap .swiper-buttons button,

    .collection-wrap .swiper-buttons button,

    .testi-wrap .swiper-buttons button,

    .blog-wrap .swiper-buttons button {

        position: absolute;

        z-index: 1;

        margin-right: 0px;

    }

    .shop-cat-wrap .swiper-buttons button.swiper-prev,

    .cat-wrap .swiper-buttons button.swiper-prev,

    .collection-wrap .swiper-buttons button.swiper-prev,

    .testi-wrap .swiper-buttons button.swiper-prev,

    .blog-wrap .swiper-buttons button.swiper-prev {

        left: 0;

        transform: translateX(-50%);

    }

    .shop-cat-wrap .swiper-buttons button.swiper-next,

    .cat-wrap .swiper-buttons button.swiper-next,

    .collection-wrap .swiper-buttons button.swiper-next,

    .testi-wrap .swiper-buttons button.swiper-next,

    .blog-wrap .swiper-buttons button.swiper-next {

        right: 0;

        transform: translateX(50%);

    }

}

/************************************* slider-arrow css end *************************************/



/************************************* slider-dot css start *************************************/

/*====================================

    swiper slider-dots css

====================================*/

.shop-cat-wrap .swiper-dots,

.cat-wrap .swiper-dots,

.collection-wrap .swiper-dots,

.testi-wrap .swiper-dots,

.blog-wrap .swiper-dots {

    display: none;

    margin-top: 30px;

    line-height: 0;

}

@media (min-width: 1200px) {

    .shop-cat-wrap .swiper-dots,

    .cat-wrap .swiper-dots,

    .collection-wrap .swiper-dots,

    .testi-wrap .swiper-dots,

    .blog-wrap .swiper-dots {

        margin-top: 50px;

    }

}



/* swiper slider-dots button css */

.shop-cat-wrap .swiper-dots .swiper-pagination,

.cat-wrap .swiper-dots .swiper-pagination,

.collection-wrap .swiper-dots .swiper-pagination,

.testi-wrap .swiper-dots .swiper-pagination,

.blog-wrap .swiper-dots .swiper-pagination {

    width: unset;

    position: unset;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    margin: -5px 0px 0px -5px;

}

.shop-cat-wrap .swiper-dots .swiper-pagination span,

.cat-wrap .swiper-dots .swiper-pagination span,

.collection-wrap .swiper-dots .swiper-pagination span,

.testi-wrap .swiper-dots .swiper-pagination span,

.blog-wrap .swiper-dots .swiper-pagination span {

    width: 10px;

    height: 10px;

    background-color: transparent;

    margin: 5px 0px 0px 5px;

    opacity: 1;

    border: 1px solid var(--dominant-font-color);

}

.shop-cat-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active,

.cat-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active,

.collection-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active,

.testi-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active,

.blog-wrap .swiper-dots .swiper-pagination span.swiper-pagination-bullet-active {

    background-color: var(--dominant-font-color);

    border-color: var(--dominant-font-color);

}

/************************************* slider-dot css end *************************************/



/************************************* view-button css start *************************************/

/*====================================

    view-button css

====================================*/

.view-button {

    margin-top: 30px;

    text-align: center;

}

@media (min-width: 1200px) {

    .view-button {

        margin-top: 50px;

    }

}

/************************************* view-button css end *************************************/



/************************************* scrollbar css start *************************************/

/*====================================

    scrollbar css

====================================*/

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown,

.mobile-menu .mobilemenu-content,

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable,

.search-bar .search-results ul,

.shop-filter-sidebar,

.tce-area .ck.ck-editor__editable_inline {

    -webkit-scrollbar-width: thin;

    scrollbar-width: thin;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar,

.mobile-menu .mobilemenu-content::-webkit-scrollbar,

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar,

.search-bar .search-results ul::-webkit-scrollbar,

.shop-filter-sidebar::-webkit-scrollbar,

.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar {

    width: 2px;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar-track,

.mobile-menu .mobilemenu-content::-webkit-scrollbar-track,

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-track,

.search-bar .search-results ul::-webkit-scrollbar-track,

.shop-filter-sidebar::-webkit-scrollbar-track,

.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar-track {

    background-color: #eeeeee;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar-thumb,

.mobile-menu .mobilemenu-content::-webkit-scrollbar-thumb,

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-thumb,

.search-bar .search-results ul::-webkit-scrollbar-thumb,

.shop-filter-sidebar::-webkit-scrollbar-thumb,

.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar-thumb {

    background-color: #c1c1c1;

}

.mainmenu-content .main-wrap ul.menu-ul li.menu-li .menu-dropdown.menu-sub ul.menudrop-ul li.menudrop-li .menusub-dropdown::-webkit-scrollbar-thumb:hover,

.mobile-menu .mobilemenu-content::-webkit-scrollbar-thumb:hover,

.cart-drawer form.drawer-contents .drawer-inner .drawer-scrollable::-webkit-scrollbar-thumb:hover,

.search-bar .search-results ul::-webkit-scrollbar-thumb:hover,

.shop-filter-sidebar::-webkit-scrollbar-thumb:hover,

.tce-area .ck.ck-editor__editable_inline::-webkit-scrollbar-thumb:hover {

    background-color: var(--dominant-font-color);

}

@media (min-width: 768px) {

    .quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info {

        -webkit-scrollbar-width: thin;

        scrollbar-width: thin;

    }

    .quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar {

        width: 2px;

    }

    .quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar-track {

        background-color: #eeeeee;

    }

    .quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar-thumb {

        background-color: #c1c1c1;

    }

    .quickview-modal .quickview-modal-content .quickview-info .quickview-detail-info::-webkit-scrollbar-thumb:hover {

        background-color: var(--dominant-font-color);

    }

}

@media screen and (max-height: 600px) {

    .mobile-menu,

    .cart-drawer {

        -webkit-scrollbar-width: thin;

        scrollbar-width: thin;

    }

    .mobile-menu::-webkit-scrollbar,

    .cart-drawer::-webkit-scrollbar {

        width: 2px;

    }

    .mobile-menu::-webkit-scrollbar-track,

    .cart-drawer::-webkit-scrollbar-track {

        background-color: #eeeeee;

    }

    .mobile-menu::-webkit-scrollbar-thumb,

    .cart-drawer::-webkit-scrollbar-thumb {

        background-color: #c1c1c1;

    }

    .mobile-menu::-webkit-scrollbar-thumb:hover,

    .cart-drawer::-webkit-scrollbar-thumb:hover {

        background-color: var(--dominant-font-color);

    }

}

/************************************* scrollbar css end *************************************/



/************************************* keyframes css start *************************************/

/*====================================

    loaderProgress keyframes css

====================================*/

@-webkit-keyframes loaderProgress {

    0% {

        -webkit-transform: scaleX(0);

        transform: scaleX(0);

    } 100% {

        -webkit-transform: scaleX(1);

        transform: scaleX(1);

    }

}

@keyframes loaderProgress {

    0% {

        -webkit-transform: scaleX(0);

        transform: scaleX(0);

    } 100% {

        -webkit-transform: scaleX(1);

        transform: scaleX(1);

    }

}



/*====================================

    loaderText keyframes css

====================================*/

@-webkit-keyframes loaderText {

    0% {

        width: 0%;

    } 100% {

        width: 100%;

    }

}

@keyframes loaderText {

    0% {

        width: 0%;

    } 100% {

        width: 100%;

    }

}



/*====================================

    slide-left keyframes css

====================================*/

@-webkit-keyframes slide-left {

    0% {

        transform: translate3d(0, 0, 0);

    }

    100% {

        transform: translate3d(-50%, 0, 0);

    }

}

@keyframes slide-left {

    0% {

        transform: translate3d(0, 0, 0);

    }

    100% {

        transform: translate3d(-50%, 0, 0);

    }

}



/*====================================

    DropDownSlide keyframes css

====================================*/

@media (min-width: 1200px) {

    .DropDownSlide {

        -webkit-animation-name: DropDownSlide;

        animation-name: DropDownSlide;

        -webkit-animation-duration: 0.3s;

        animation-duration: 0.3s;

        -webkit-animation-fill-mode: both;

        animation-fill-mode: both;

    }

}

@-webkit-keyframes DropDownSlide {

    0% {

        opacity: 0;

        visibility: hidden;

    } 100% {

        opacity: 1;

        visibility: visible;

    }

}

@keyframes DropDownSlide {

    0% {

        opacity: 0;

        visibility: hidden;

        -webkit-transform: translateY(10px);

        transform: translateY(10px);

    } 100% {

        opacity: 1;

        visibility: visible;

        -webkit-transform: translateY(0);

        transform: translateY(0);

    }

}



/*====================================

    hoverEffect keyframes css

====================================*/

@-webkit-keyframes hoverEffect { 

    0% {

        opacity: 1;

        -webkit-transform: scale(0.1);

        transform: scale(0.1)

    } 100% {

        opacity: 0;

        -webkit-transform: scale(1.1);

        transform: scale(1.1)

    }

}

@keyframes hoverEffect {

    0% {

        opacity: 1;

        -webkit-transform: scale(0.5);

        transform: scale(0.5)

    } 100% {

        opacity: 0;

        -webkit-transform: scale(1.1);

        transform: scale(1.1)

    }

}



/*====================================

    rotator keyframes css

====================================*/

@-webkit-keyframes rotator {

    0% {

        transform: rotate(0deg);

    } 100% {

        transform: rotate(270deg);

    }

}

@keyframes rotator {

    0% {

        transform: rotate(0deg);

    } 100% {

        transform: rotate(270deg);

    }

}



/*====================================

    dash keyframes css

====================================*/

@-webkit-keyframes dash {

    0% {

        stroke-dashoffset: 280;

    } 50% {

        stroke-dashoffset: 75;

        transform: rotate(135deg);

    } 100% {

        stroke-dashoffset: 280;

        transform: rotate(450deg);

    }

}

@keyframes dash {

    0% {

        stroke-dashoffset: 280;

    } 50% {

        stroke-dashoffset: 75;

        transform: rotate(135deg);

    } 100% {

        stroke-dashoffset: 280;

        transform: rotate(450deg);

    }

}



/*====================================

    spin keyframes css

====================================*/

.spin {

    -webkit-animation: spin 4s linear infinite;

    animation: spin 4s linear infinite;

}

@-webkit-keyframes spin {

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    } 100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@keyframes spin {

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    } 100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

/************************************* keyframes css end *************************************/



/************************************* animation css start *************************************/

/*====================================

    animation css

====================================*/

[data-animate] {

    opacity: 0

}

[data-animate].animate__animated {

    opacity: 1

}

/************************************* animation css end *************************************/