@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Smooch+Sans:wght@100..900&display=swap");



/* ========================= Css Variables Start ======================== */

:root {

    /* Font Family */

    --heading-font: "Smooch Sans", serif;

    --body-font: "IBM Plex Sans Condensed", serif;

    /* ========================= Theme Color Start ============================= */

    /* Base Color */

    --base-h: 94;

    --base-s: 100%;

    --base-l: 72%;

    --base: var(--base-h) var(--base-s) var(--base-l);

    --base-d-100: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.1);

    --base-d-200: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.2);

    --base-d-300: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.3);

    --base-d-400: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.4);

    --base-d-500: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.5);

    --base-d-600: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.6);

    --base-d-700: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.7);

    --base-d-800: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.8);

    --base-d-900: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.9);

    --base-d-1000: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 1);

    --base-l-100: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.1);

    --base-l-200: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.2);

    --base-l-300: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.3);

    --base-l-400: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.4);

    --base-l-500: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.5);

    --base-l-600: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.6);

    --base-l-700: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.7);

    --base-l-800: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.8);

    --base-l-900: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.9);

    --base-l-1000: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 1);

    /* Base Two Color */

    --base-two-h: 274;

    --base-two-s: 100%;

    --base-two-l: 72%;

    --base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l);

    --base-two-d-100: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.1);

    --base-two-d-200: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.2);

    --base-two-d-300: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.3);

    --base-two-d-400: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.4);

    --base-two-d-500: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.5);

    --base-two-d-600: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.6);

    --base-two-d-700: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.7);

    --base-two-d-800: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.8);

    --base-two-d-900: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.9);

    --base-two-d-1000: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 1);

    --base-two-l-100: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.1);

    --base-two-l-200: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.2);

    --base-two-l-300: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.3);

    --base-two-l-400: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.4);

    --base-two-l-500: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.5);

    --base-two-l-600: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.6);

    --base-two-l-700: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.7);

    --base-two-l-800: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.8);

    --base-two-l-900: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.9);

    --base-two-l-1000: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 1);

    /* ========================= Theme Color End ============================= */

    /* ========================= Color Variables Start =========================== */

    --white: 0 0% 100%;

    --black: 0 0% 0%;

    --light: 210 20% 98%;

    --dark: 224 71% 4%;

    --body-color: 215 19% 35%;

    --heading-color: 217 33% 17%;

    --border-color: 240 10% 4%;

    --section-bg: 210 40% 98%;

    --background-color: var(--black);

    --bs-border-color: hsl(var(--border-color));

    /* ================================ Box Shadow Start =============================== */

    --box-shadow: 0px 2px 15px hsl(var(--black) / 0.05);

    /* ================================ Box Shadow End =============================== */

    /* ============================== Bootstrap Modifier Start ============================== */

    /* Primary Color */

    --primary-h: 238;

    --primary-s: 100%;

    --primary-l: 40%;

    --primary: var(--primary-h) var(--primary-s) var(--primary-l);

    --primary-d-100: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.1);

    --primary-d-200: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.2);

    --primary-d-300: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.3);

    --primary-d-400: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.4);

    --primary-d-500: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.5);

    --primary-l-100: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1);

    --primary-l-200: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2);

    --primary-l-300: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3);

    --primary-l-400: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4);

    --primary-l-500: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5);

    /* Secondary Color */

    --secondary-h: 208;

    --secondary-s: 7%;

    --secondary-l: 46%;

    --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l);

    --secondary-d-100: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.1);

    --secondary-d-200: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.2);

    --secondary-d-300: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.3);

    --secondary-d-400: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.4);

    --secondary-d-500: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.5);

    --secondary-l-100: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1);

    --secondary-l-200: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2);

    --secondary-l-300: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3);

    --secondary-l-400: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4);

    --secondary-l-500: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5);

    /* Success Color */

    --success-h: 112;

    --success-s: 100%;

    --success-l: 40%;

    --success: var(--success-h) var(--success-s) var(--success-l);

    --success-d-100: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.1);

    --success-d-200: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.2);

    --success-d-300: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.3);

    --success-d-400: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.4);

    --success-d-500: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.5);

    --success-l-100: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.1);

    --success-l-200: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.2);

    --success-l-300: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.3);

    --success-l-400: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.4);

    --success-l-500: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.5);

    /* Danger Color */

    --danger-h: 0;

    --danger-s: 96%;

    --danger-l: 63%;

    --danger: var(--danger-h) var(--danger-s) var(--danger-l);

    --danger-d-100: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.1);

    --danger-d-200: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.2);

    --danger-d-300: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.3);

    --danger-d-400: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.4);

    --danger-d-500: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.5);

    --danger-l-100: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.1);

    --danger-l-200: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.2);

    --danger-l-300: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.3);

    --danger-l-400: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.4);

    --danger-l-500: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.5);

    /* Warning Color */

    --warning-h: 40;

    --warning-s: 100%;

    --warning-l: 46%;

    --warning: var(--warning-h) var(--warning-s) var(--warning-l);

    --warning-d-100: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.1);

    --warning-d-200: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.2);

    --warning-d-300: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.3);

    --warning-d-400: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.4);

    --warning-d-500: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.5);

    --warning-l-100: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1);

    --warning-l-200: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.2);

    --warning-l-300: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.3);

    --warning-l-400: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.4);

    --warning-l-500: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5);

    /* Info Color */

    --info-h: 196;

    --info-s: 100%;

    --info-l: 50%;

    --info: var(--info-h) var(--info-s) var(--info-l);

    --info-d-100: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.1);

    --info-d-200: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.2);

    --info-d-300: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.3);

    --info-d-400: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.4);

    --info-d-500: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.5);

    --info-l-100: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.1);

    --info-l-200: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.2);

    --info-l-300: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.3);

    --info-l-400: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.4);

    --info-l-500: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.5);

    /* ============================== Bootstrap Modifier End ============================== */

}



:root:has(.dashboard) {

    --border-color: 214 32% 91%;

}



/* ========================= Css Variables End =========================== */

/* Fully Fit image Css */

.fit-image {

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

}



/* ============================= Display Flex Css Start ============================= */

.flex-wrap,

.form--radio {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.flex-align,

.action-buttons {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}



.flex-center {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}



.flex-between {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}



/* ============================= Display Flex Css End ============================= */

/* ===================== Font Size For responsive devices Start =================== */

.fs-10 {

    font-size: 0.625rem;

}



.fs-11 {

    font-size: 0.6875rem;

}



.fs-12 {

    font-size: 0.75rem;

}



.fs-13 {

    font-size: 0.8125rem;

}



.fs-14 {

    font-size: 0.875rem;

}



.fs-15 {

    font-size: 0.9375rem;

}



.fs-16 {

    font-size: 1rem;

}



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

    .fs-16 {

        font-size: 0.9375rem;

    }

}



.fs-17 {

    font-size: 1.0625rem;

}



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

    .fs-17 {

        font-size: 1rem;

    }

}



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

    .fs-17 {

        font-size: 0.9375rem;

    }

}



.fs-18 {

    font-size: 1.125rem !important;

}



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

    .fs-18 {

        font-size: 1.0625rem !important;

    }

}



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

    .fs-18 {

        font-size: 1rem !important;

    }

}



.fs-20 {

    font-size: 1.25rem;

}



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

    .fs-20 {

        font-size: 1.125rem;

    }

}



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

    .fs-20 {

        font-size: 1.0625rem;

    }

}



/* ===================== Font Size For responsive devices End =================== */

/* ================================= Common Typography Css Start =========================== */

* {

    margin: 0;

    padding: 0;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



body {

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

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

    word-break: break-word;

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

    min-height: 100vh;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    font-weight: 400;

    font-size: 1rem;

}



body>main {

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

}



p {

    font-size: 1.25rem;

    font-weight: 400;

    margin: 0;

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

}



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

    p {

        font-size: 1rem;

    }

}



hr {

    opacity: 1;

    border-top-color: hsl(var(--black)/0.1);

}



span {

    display: inline-block;

}



h1,

.h1,

h2,

.h2,

h3,

.h3,

h4,

.h4,

h5,

.h5,

h6,

.h6 {

    margin: 0 0 20px 0;

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

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

    line-height: 1.3;

    font-weight: 700;

}



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



    h1,

    .h1,

    h2,

    .h2,

    h3,

    .h3,

    h4,

    .h4,

    h5,

    .h5,

    h6,

    .h6 {

        margin: 0 0 15px 0;

    }

}



h1,

.h1 {

    font-size: 5rem;

}



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



    h1,

    .h1 {

        font-size: 3.75rem;

    }

}



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



    h1,

    .h1 {

        font-size: 3.125rem;

    }

}



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



    h1,

    .h1 {

        font-size: 3.4375rem;

    }

}



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



    h1,

    .h1 {

        font-size: 2.8125rem;

    }

}



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



    h1,

    .h1 {

        font-size: 1.875rem;

    }

}



h2,

.h2 {

    font-size: 2.5rem;

}



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



    h2,

    .h2 {

        font-size: 2.1875rem;

    }

}



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



    h2,

    .h2 {

        font-size: 1.875rem;

    }

}



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



    h2,

    .h2 {

        font-size: 1.75rem;

    }

}



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



    h2,

    .h2 {

        font-size: 1.5625rem;

    }

}



h3,

.h3 {

    font-size: 2rem;

}



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



    h3,

    .h3 {

        font-size: 1.75rem;

    }

}



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



    h3,

    .h3 {

        font-size: 1.5625rem;

    }

}



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



    h3,

    .h3 {

        font-size: 1.4375rem;

    }

}



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



    h3,

    .h3 {

        font-size: 1.375rem;

    }

}



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



    h3,

    .h3 {

        font-size: 1.25rem;

    }

}



h4,

.h4 {

    font-size: 1.5rem;

}



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



    h4,

    .h4 {

        font-size: 1.3125rem;

    }

}



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



    h4,

    .h4 {

        font-size: 1.25rem;

    }

}



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



    h4,

    .h4 {

        font-size: 1.1875rem;

    }

}



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



    h4,

    .h4 {

        font-size: 1.125rem;

    }

}



h5,

.h5 {

    font-size: 1.25rem;

}



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



    h5,

    .h5 {

        font-size: 1.1875rem;

    }

}



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



    h5,

    .h5 {

        font-size: 1.125rem;

    }

}



h6,

.h6 {

    font-size: 1.125rem;

}



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



    h6,

    .h6 {

        font-size: 1rem;

    }

}



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



    h6,

    .h6 {

        font-size: 0.875rem;

    }

}



h1>a,

.h1>a,

h2>a,

.h2>a,

h3>a,

.h3>a,

h4>a,

.h4>a,

h5>a,

.h5>a,

h6>a,

.h6>a {

    font-weight: inherit;

    font-size: inherit;

    color: inherit;

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

    line-height: inherit;

}



a {

    display: inline-block;

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

    text-decoration: none;

    color: hsl(var(--dark));

}



a.underline {

    text-decoration: underline;

}



a:hover {

    color: hsl(var(--base-d-400));

}



img {

    max-width: 100%;

    height: auto;

}



select {

    cursor: pointer;

}



ul,

ol {

    padding: 0;

    margin: 0;

    list-style: none;

}



b,

strong {

    font-weight: 700;

}



button {

    border: 0;

    background-color: transparent;

}



button:focus {

    outline: none;

    -webkit-box-shadow: none;

    box-shadow: none;

}



.form-select:focus {

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

}



.dashboard-body h1,

.dashboard-body h2,

.dashboard-body h3,

.dashboard-body h4,

.dashboard-body h5,

.dashboard-body h6 {

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

}



/* ================================= Common Typography Css End =========================== */

/* ================================= Custom Classes Css Start =========================== */

.tooltip {

    --bs-tooltip-bg: hsl(var(--base));

    --bs-tooltip-color: hsl(var(--dark));

}



.tooltip--dashboard-sidebar {

    display: none !important;

}



body:has(.dashboard.collapsed) .tooltip--dashboard-sidebar {

    display: block !important;

}



@media screen and (min-width: 1400px) {



    .container,

    .container-lg,

    .container-md,

    .container-sm,

    .container-xl,

    .container-xxl {

        max-width: 1392px !important;

    }

}



/* Column Extra Small Screen */

@media screen and (min-width: 1500px) {

    .col-xxxl-1 {

        width: 8.3333333333%;

    }

}



@media screen and (min-width: 1500px) {

    .col-xxxl-2 {

        width: 16.6666666667%;

    }

}



@media screen and (min-width: 1500px) {

    .col-xxxl-3 {

        width: 25%;

    }

}



@media screen and (min-width: 1500px) {

    .col-xxxl-4 {

        width: 33.3333333333%;

    }

}



@media screen and (min-width: 1500px) {

    .col-xxxl-5 {

        width: 41.6666666667%;

    }

}



@media screen and (min-width: 1500px) {

    .col-xxxl-6 {

        width: 50%;

    }

}



@media screen and (min-width: 1500px) {

    .col-xxxl-7 {

        width: 58.3333333333%;

    }

}



@media screen and (min-width: 1500px) {

    .col-xxxl-8 {

        width: 66.6666666667%;

    }

}



@media screen and (min-width: 1500px) {

    .col-xxxl-9 {

        width: 75%;

    }

}



@media screen and (min-width: 1500px) {

    .col-xxxl-10 {

        width: 83.3333333333%;

    }

}



@media screen and (min-width: 1500px) {

    .col-xxxl-11 {

        width: 91.6666666667%;

    }

}



@media screen and (min-width: 1500px) {

    .col-xxxl-12 {

        width: 100%;

    }

}



@media screen and (min-width: 1400px) {

    .col-xxxl-6 {

        width: 50%;

    }

}



@media screen and (min-width: 425px) and (max-width: 575px) {

    .col-xsm-6 {

        width: 50%;

    }

}



/* Section Background */

.section-bg {

    background-color: hsl(var(--section-bg));

}



.text-muted {

    color: hsl(var(--black)/0.6) !important;

}



.fw-medium {

    font-weight: 500;

}



.decoration-underline {

    text-decoration: underline;

}



.decoration-none {

    text-decoration: none;

}



/* Bg Image Css */

.bg-img {

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;

}



/* Hide Scroll bar Css For Custom Modal */

.scroll-hide {

    position: absolute;

    overflow-y: hidden;

    padding-right: 17px;

    top: 0;

    left: 0;

    width: 100%;

}



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

    .scroll-hide {

        padding-right: 0;

    }

}



.scroll-hide-sm {

    position: absolute;

    overflow-y: hidden;

    top: 0;

    left: 0;

    width: calc(100% - 0px);

}



.body-overlay {

    width: 100%;

    height: 100%;

    position: fixed;

    inset: 0;

    z-index: 999;

    background-color: hsl(var(--black)/0.5);

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

    visibility: hidden;

    opacity: 0;

}



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

    .body-overlay.show {

        visibility: visible;

        opacity: 1;

    }

}



.gradient-text {

    background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(var(--base-d-200))), to(hsl(var(--base))));

    background-image: linear-gradient(180deg, hsl(var(--base-d-200)) 0%, hsl(var(--base)) 100%);

    -webkit-text-fill-color: transparent;

    -webkit-background-clip: text;

    background-clip: text;

}



.gradient-text::-moz-selection {

    color: hsl(var(--white));

    -webkit-text-fill-color: hsl(var(--white));

    background: transparent;

}



.gradient-text::selection {

    color: hsl(var(--white));

    -webkit-text-fill-color: hsl(var(--white));

    background: transparent;

}



.sidebar-overlay {

    width: 100%;

    height: 100%;

    position: fixed;

    inset: 0;

    z-index: 1049;

    background-color: hsl(var(--black)/0.5);

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

    visibility: hidden;

    opacity: 0;

}



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

    .sidebar-overlay.show {

        visibility: visible;

        opacity: 1;

    }

}



@media screen and (min-width: 991px) {

    .position-md-relative {

        position: relative;

    }

}



.mw-100 {

    max-width: 100%;

}



/* ================================= Custom Classes Css End =========================== */

/* ====================== Section Heading ==================== */

.section-heading {

    text-align: center;

    position: relative;

    z-index: 1;

    max-width: 565px;

    margin-bottom: 25px;

}



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

    .section-heading {

        margin-bottom: 20px;

    }

}



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

    .section-heading {

        margin-bottom: 15px;

    }

}



.section-heading__title {

    margin-bottom: 25px;

    font-size: 5rem;

    position: relative;

    line-height: 1;

}



@media screen and (min-width: 1400px) {

    .section-heading__title {

        letter-spacing: -2px;

    }

}



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

    .section-heading__title {

        font-size: 3.75rem;

    }

}



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

    .section-heading__title {

        font-size: 2.5rem;

        margin-bottom: 16px;

    }

}



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

    .section-heading__title {

        font-size: 1.875rem;

    }

}



.section-heading__desc {

    max-width: 670px;

    margin-left: auto;

    margin-right: auto;

    line-height: 1.5;

    font-size: clamp(1rem, 0.9431rem + 0.2427vw, 1.125rem);

    color: hsl(var(--black)/0.6);

    font-weight: 400;

}



.section-heading.style-left {

    text-align: left;

}



.section-heading.style-left .section-heading__title::before {

    left: 0;

    -webkit-transform: translateX(0);

    transform: translateX(0);

}



.section-heading.style-left .section-heading__desc {

    margin-left: 0;

}



/* ====================== Section Heading End ==================== */

/* ================================= Background Color Css Start =========================== */

.bg--base {

    background-color: hsl(var(--base)) !important;

}



.bg--base-two {

    background-color: hsl(var(--base-two)) !important;

}



.bg--primary {

    background-color: hsl(var(--primary)) !important;

}



.bg--secondary {

    background-color: hsl(var(--secondary)) !important;

}



.bg--success {

    background-color: hsl(var(--success)) !important;

}



.bg--danger {

    background-color: hsl(var(--danger)) !important;

}



.bg--warning {

    background-color: hsl(var(--warning)) !important;

}



.bg--info {

    background-color: hsl(var(--info)) !important;

}



/* ================================= Background Color Css End =========================== */

/* ================================= Color Css Start =========================== */

.text--base {

    color: hsl(var(--base)) !important;

}



.text--base-two {

    color: hsl(var(--base-two)) !important;

}



.text--body {

    color: hsl(var(--body)) !important;

}



.text--heading {

    color: hsl(var(--heading)) !important;

}



.text--primary {

    color: hsl(var(--primary)) !important;

}



.text--secondary {

    color: hsl(var(--secondary)) !important;

}



.text--success {

    color: hsl(var(--success)) !important;

}



.text--danger {

    color: hsl(var(--danger)) !important;

}



.text--warning {

    color: hsl(var(--warning)) !important;

}



.text--info {

    color: hsl(var(--info)) !important;

}



/* ================================= Color Css End =========================== */

.py-120 {

    padding-block: 120px;

}



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

    .py-120 {

        padding-block: 80px;

    }

}



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

    .py-120 {

        padding-block: 60px;

    }

}



.pt-120 {

    padding-top: 120px;

}



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

    .pt-120 {

        padding-top: 80px;

    }

}



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

    .pt-120 {

        padding-top: 60px;

    }

}



.pb-120 {

    padding-bottom: 120px;

}



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

    .pb-120 {

        padding-bottom: 80px;

    }

}



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

    .pb-120 {

        padding-bottom: 60px;

    }

}



.py-60 {

    padding-block: 60px;

}



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

    .py-60 {

        padding-block: 40px;

    }

}



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

    .py-60 {

        padding-block: 30px;

    }

}



.pt-60 {

    padding-top: 60px;

}



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

    .pt-60 {

        padding-top: 40px;

    }

}



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

    .pt-60 {

        padding-top: 30px;

    }

}



.pb-60 {

    padding-bottom: 60px;

}



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

    .pb-60 {

        padding-bottom: 40px;

    }

}



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

    .pb-60 {

        padding-bottom: 30px;

    }

}



.py-30 {

    padding-block: 30px;

}



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

    .py-30 {

        padding-block: 25px;

    }

}



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

    .py-30 {

        padding-block: 18px;

    }

}



.pt-30 {

    padding-top: 30px;

}



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

    .pt-30 {

        padding-top: 25px;

    }

}



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

    .pt-30 {

        padding-top: 18px;

    }

}



.pb-30 {

    padding-bottom: 30px;

}



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

    .pb-30 {

        padding-bottom: 25px;

    }

}



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

    .pb-30 {

        padding-bottom: 18px;

    }

}



.my-120 {

    margin-block: 120px;

}



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

    .my-120 {

        margin-block: 80px;

    }

}



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

    .my-120 {

        margin-block: 60px;

    }

}



.mt-120 {

    margin-top: 120px;

}



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

    .mt-120 {

        margin-top: 80px;

    }

}



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

    .mt-120 {

        margin-top: 60px;

    }

}



.mb-120 {

    margin-bottom: 120px;

}



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

    .mb-120 {

        margin-bottom: 80px;

    }

}



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

    .mb-120 {

        margin-bottom: 60px;

    }

}



.my-60 {

    margin-block: 60px;

}



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

    .my-60 {

        margin-block: 40px;

    }

}



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

    .my-60 {

        margin-block: 30px;

    }

}



.mt-60 {

    margin-top: 60px;

}



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

    .mt-60 {

        margin-top: 40px;

    }

}



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

    .mt-60 {

        margin-top: 30px;

    }

}



.mb-60 {

    margin-bottom: 60px;

}



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

    .mb-60 {

        margin-bottom: 40px;

    }

}



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

    .mb-60 {

        margin-bottom: 30px;

    }

}



.my-30 {

    margin-block: 30px;

}



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

    .my-30 {

        margin-block: 25px;

    }

}



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

    .my-30 {

        margin-block: 18px;

    }

}



.mt-30 {

    margin-top: 30px;

}



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

    .mt-30 {

        margin-top: 25px;

    }

}



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

    .mt-30 {

        margin-top: 18px;

    }

}



.mb-30 {

    margin-bottom: 30px;

}



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

    .mb-30 {

        margin-bottom: 25px;

    }

}



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

    .mb-30 {

        margin-bottom: 18px;

    }

}



/* ================================= Border Color Css Start =========================== */

.border--base {

    border-color: hsl(var(--base)) !important;

}



.border--base-two {

    border-color: hsl(var(--base-two)) !important;

}



.border--primary {

    border-color: hsl(var(--primary)) !important;

}



.border--secondary {

    border-color: hsl(var(--secondary)) !important;

}



.border--success {

    border-color: hsl(var(--success)) !important;

}



.border--danger {

    border-color: hsl(var(--danger)) !important;

}



.border--warning {

    border-color: hsl(var(--warning)) !important;

}



.border--info {

    border-color: hsl(var(--info)) !important;

}



/* ================================= Border Color Css End =========================== */

/* =========================== Accordion Css start ============================= */

.custom--accordion {

    --accordion-padding: 24px;

}



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

    .custom--accordion {

        --accordion-padding: 18px;

    }

}



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

    .custom--accordion {

        --accordion-padding: 15px;

    }

}



.custom--accordion .accordion-item {

    border: 0;

    border-top: 1px solid hsl(var(--heading-color));

    background-color: transparent !important;

    overflow: hidden;

    border-radius: 0;

}



.custom--accordion .accordion-item:last-child {

    border-bottom: none;

}



.custom--accordion .accordion-item:first-child {

    border-top: none;

}



.custom--accordion .accordion-header {

    line-height: 1;

}



.custom--accordion .accordion-button {

    font-size: 1.25rem;

    font-weight: 600;

    line-height: 1.4;

    padding: 0;

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

    padding-block: var(--accordion-padding);

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

    -webkit-transition-delay: 0.1s;

    transition-delay: 0.1s;

}



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

    .custom--accordion .accordion-button {

        font-size: 1.125rem;

    }

}



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

    .custom--accordion .accordion-button {

        font-size: 1rem;

    }

}



.custom--accordion .accordion-button::after {

    background-image: none;

}



.custom--accordion .accordion-button:focus {

    -webkit-box-shadow: none;

    box-shadow: none;

}



.custom--accordion .accordion-button:not(.collapsed) {

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

    background-color: transparent !important;

    -webkit-box-shadow: none;

    box-shadow: none;

}



.custom--accordion .accordion-button:not(.collapsed)::after {

    background-image: none;

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

}



.custom--accordion .accordion-button[aria-expanded=true]::after,

.custom--accordion .accordion-button[aria-expanded=false]::after {

    font-family: "Line Awesome Free";

    font-weight: 900;

    content: "\f068";

    display: inline-block;

    position: absolute;

    top: calc(var(--accordion-padding) / 2 + 12px);

    right: 15px;

    height: unset;

    border: 1px solid hsl(var(--border-color));

    width: 25px;

    height: 25px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-transform: unset !important;

    transform: unset !important;

    background-color: hsl(var(--dark));

    color: hsl(var(--white));

}





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



    .custom--accordion .accordion-button[aria-expanded=true]::after,

    .custom--accordion .accordion-button[aria-expanded=false]::after {

        top: calc(var(--accordion-padding) / 2 + 8px);

    }

}



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



    .custom--accordion .accordion-button[aria-expanded=true]::after,

    .custom--accordion .accordion-button[aria-expanded=false]::after {

        top: calc(var(--accordion-padding) / 2 + 6px);

    }

}



.custom--accordion .accordion-button[aria-expanded=false]::after {

    content: "\f067";

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

    background-color: transparent;

    color: hsl(var(--dark));

}



.shipping-list .custom--accordion .accordion-button[aria-expanded=true]::after,

.shipping-list .custom--accordion .accordion-button[aria-expanded=false]::after {

    content: "\f06e";

    font-size: 14px;

    background-color: transparent !important;

    color: hsl(var(--dark)) !important;

}



.shipping-list .custom--accordion .accordion-button[aria-expanded=false]::after {

    content: "\f070";

}



.custom--accordion .accordion-item {

    border-top: 1px solid hsl(var(--border-color));

}



.shipping-list .custom--accordion .accordion-item {

    border-top: 1px solid hsl(var(--black)/ 0.1);

}



.custom--accordion .accordion-button[aria-expanded=true] {

    padding-bottom: 16px;

}



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

    .custom--accordion .accordion-button[aria-expanded=true] {

        padding-bottom: 14px;

    }

}



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

    .custom--accordion .accordion-button[aria-expanded=true] {

        padding-bottom: 12px;

    }

}



.custom--accordion .accordion-body {

    padding: 0;

    padding-bottom: var(--accordion-padding);

}



.custom--accordion .accordion-body .text {

    line-height: 1.5;

    font-size: 1rem;

}



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

    .custom--accordion .accordion-body .text {

        font-size: 0.875rem;

        font-weight: 400;

    }

}



.custom--accordion:first-of-type .accordion-button.collapsed {

    border-radius: 5px;

}



.custom--accordion:last-of-type .accordion-button.collapsed {

    border-radius: 5px;

}



/* ================================= Accordion Css End =========================== */

/* ================================= Button Css Start =========================== */

.btn-check:checked+.btn,

.btn.active,

.btn.show,

.btn:first-child:active,

:not(.btn-check)+.btn:active {

    color: none;

    background-color: none;

    border-color: none;

}



.pill {

    border-radius: 40px !important;

}



.btn {

    font-weight: 700;

    padding: 15px 32px;

    border-radius: 4px;

    position: relative;

    border: 1px solid transparent;

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

    font-size: 1rem;

    line-height: 1.5;

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

    transition: all 0.3s ease-in-out;

}



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

    .btn {

        padding: 14px 25px;

        font-size: 0.875rem;

    }

}



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

    .btn {

        padding-block: 12px;

    }

}



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

    .btn {

        padding-block: 10px;

    }

}



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

    .btn {

        padding-block: 10px;

    }

}



.btn:hover,

.btn:focus,

.btn:focus-visible {

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

}



.btn--lg {

    padding: 20px 38px;

}



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

    .btn--lg {

        padding: 18px 30px;

    }

}



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

    .btn--lg {

        padding: 16px 25px;

    }

}



.btn--sm {

    padding: 10px 18px;

    font-weight: 600;

    font-size: 1rem;

}



.btn--xs {

    padding: 5px 15px;

    font-weight: 600;

    font-size: 1rem;

}



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

    .btn--sm {

        padding: 8px 15px;

        font-size: 0.875rem;

    }



    .btn--xs {

        font-size: 0.875rem;

    }

}



.btn--icon {

    font-size: 1rem;

    padding-right: 10px;

}



.btn--base {

    background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%) !important;

    color: white !important;

    border: none !important;

    box-shadow: 0 4px 15px rgba(251, 146, 60, 0.3) !important;

}



.btn--base:hover,

.btn--base:focus,

.btn--base:focus-visible {

    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #dc2626 100%) !important;

    color: white !important;

    border: none !important;

    box-shadow: 0 6px 20px rgba(251, 146, 60, 0.4) !important;

    transform: translateY(-2px) !important;

}



.btn-outline--base {

    background-color: transparent !important;

    border: 1px solid hsl(var(--base)) !important;

    color: hsl(var(--base-d-700)) !important;

}



.btn-outline--base.active,

.btn-outline--base:hover,

.btn-outline--base:active,

.btn-outline--base:focus,

.btn-outline--base:focus-visible {

    background-color: hsl(var(--base)) !important;

    color: hsl(var(--heading-color)) !important;

}



.btn--base-two {

    background-color: hsl(var(--base-two)) !important;

    color: hsl(var(--white)) !important;

}



.btn--base-two:hover,

.btn--base-two:focus,

.btn--base-two:focus-visible {

    background-color: hsl(var(--base-two-d-200)) !important;

    border: 1px solid hsl(var(--base-two-d-200)) !important;

}



.btn-outline--base-two {

    background-color: transparent !important;

    border: 1px solid hsl(var(--base-two)) !important;

    color: hsl(var(--base-two)) !important;

}



.btn-outline--base-two.active,

.btn-outline--base-two:active,

.btn-outline--base-two:hover,

.btn-outline--base-two:focus,

.btn-outline--base-two:focus-visible {

    background-color: hsl(var(--base-two)) !important;

    color: hsl(var(--white)) !important;

}



.btn--dark {

    background-color: hsl(var(--dark)) !important;

    color: hsl(var(--white)) !important;

}



.btn--dark:hover,

.btn--dark:focus,

.btn--dark:focus-visible {

    background-color: hsl(var(--dark)/0.7) !important;

    border: 1px solid hsl(var(--dark)) !important;

}



.btn-outline--dark {

    background-color: transparent !important;

    border: 1px solid hsl(var(--dark)) !important;

    color: hsl(var(--dark)) !important;

}



.btn-outline--dark.active,

.btn-outline--dark:active,

.btn-outline--dark:hover,

.btn-outline--dark:focus,

.btn-outline--dark:focus-visible {

    background-color: hsl(var(--dark)) !important;

    color: hsl(var(--white)) !important;

}



.btn--primary {

    background-color: hsl(var(--primary)) !important;

    color: hsl(var(--white)) !important;

}



.btn--primary:hover,

.btn--primary:focus,

.btn--primary:focus-visible {

    background-color: hsl(var(--primary-d-200)) !important;

    border: 1px solid hsl(var(--primary-d-200)) !important;

    color: hsl(var(--white)) !important;

}



.btn-outline--primary {

    background-color: transparent !important;

    border: 1px solid hsl(var(--primary)) !important;

    color: hsl(var(--primary)) !important;

}



.btn-outline--primary.active,

.btn-outline--primary:active,

.btn-outline--primary:hover,

.btn-outline--primary:focus,

.btn-outline--primary:focus-visible {

    background-color: hsl(var(--primary)) !important;

    color: hsl(var(--white)) !important;

}



.btn--secondary {

    background-color: hsl(var(--secondary)) !important;

    color: hsl(var(--white)) !important;

}



.btn--secondary:hover,

.btn--secondary:focus,

.btn--secondary:focus-visible {

    background-color: hsl(var(--secondary-d-200)) !important;

    border: 1px solid hsl(var(--secondary-d-200)) !important;

    color: hsl(var(--white)) !important;

}



.btn-outline--secondary {

    background-color: transparent !important;

    border: 1px solid hsl(var(--secondary)) !important;

    color: hsl(var(--secondary)) !important;

}



.btn-outline--secondary.active,

.btn-outline--secondary:active,

.btn-outline--secondary:hover,

.btn-outline--secondary:focus,

.btn-outline--secondary:focus-visible {

    background-color: hsl(var(--secondary)) !important;

    color: hsl(var(--white)) !important;

}



.btn-outline--success {

    background-color: transparent !important;

    border: 1px solid hsl(var(--success)) !important;

    color: hsl(var(--success)) !important;

}



.btn-outline--success:hover,

.btn-outline--success:focus,

.btn-outline--success:focus-visible {

    background-color: hsl(var(--success)) !important;

    color: hsl(var(--white)) !important;

}



.btn--danger {

    background-color: hsl(var(--danger)) !important;

    color: hsl(var(--white)) !important;

}



.btn--danger:hover,

.btn--danger:focus,

.btn--danger:focus-visible {

    background-color: hsl(var(--danger-d-200)) !important;

    border: 1px solid hsl(var(--danger-d-200)) !important;

    color: hsl(var(--white)) !important;

}



.btn-outline--danger {

    background-color: transparent !important;

    border: 1px solid hsl(var(--danger)) !important;

    color: hsl(var(--danger)) !important;

}



.btn-outline--danger.active,

.btn-outline--danger:active,

.btn-outline--danger:hover,

.btn-outline--danger:focus,

.btn-outline--danger:focus-visible {

    background-color: hsl(var(--danger)) !important;

    color: hsl(var(--white)) !important;

}



.btn--warning {

    background-color: hsl(var(--warning)) !important;

    color: hsl(var(--white)) !important;

}



.btn--warning:hover,

.btn--warning:focus,

.btn--warning:focus-visible {

    background-color: hsl(var(--warning-d-200)) !important;

    border: 1px solid hsl(var(--warning-d-200)) !important;

}



.btn-outline--warning {

    background-color: transparent !important;

    border: 1px solid hsl(var(--warning)) !important;

    color: hsl(var(--warning)) !important;

}



.btn-outline--warning.active,

.btn-outline--warning:active,

.btn-outline--warning:hover,

.btn-outline--warning:focus,

.btn-outline--warning:focus-visible {

    background-color: hsl(var(--warning)) !important;

    color: hsl(var(--white)) !important;

}



.btn--info {

    background-color: hsl(var(--info)) !important;

    color: hsl(var(--white)) !important;

}



.btn--info:hover,

.btn--info:focus,

.btn--info:focus-visible {

    background-color: hsl(var(--info-d-200)) !important;

    border: 1px solid hsl(var(--info-d-200)) !important;

}



.btn-outline--info {

    background-color: transparent !important;

    border: 1px solid hsl(var(--info)) !important;

    color: hsl(var(--white)) !important;

}



.btn-outline--info.active,

.btn-outline--info:active,

.btn-outline--info:hover,

.btn-outline--info:focus,

.btn-outline--info:focus-visible {

    background-color: hsl(var(--info)) !important;

    color: hsl(var(--white)) !important;

}



.btn.btn--light {

    background-color: hsl(var(--dark)/0.09) !important;

    color: hsl(var(--dark)) !important;

}



.btn.btn--light:hover,

.btn.btn--light:focus,

.btn.btn--light:focus-visible {

    background-color: hsl(var(--dark)/0.2) !important;

    border: 1px solid hsl(var(--light)) !important;

}



.btn.btn-outline--light {

    background-color: transparent !important;

    border: 1px solid hsl(var(--dark)) !important;

    color: hsl(var(--dark)) !important;

}



.btn.btn-outline--light.active,

.btn.btn-outline--light:active,

.btn.btn-outline--light:hover,

.btn.btn-outline--light:focus,

.btn.btn-outline--light:focus-visible {

    background-color: hsl(var(--dark)/0.09) !important;

    color: hsl(var(--dark)) !important;

}



.btn-group--switch>.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.btn-group--switch>.btn:not(.active):active,

.btn-group--switch>.btn:not(.active):hover,

.btn-group--switch>.btn:not(.active):focus,

.btn-group--switch>.btn:not(.active):focus-visible {

    background-color: transparent !important;

}



/* ================================= Button Css End =========================== */

/* ================================= Card Css Start =========================== */

.custom--card {

    border-radius: 5px;

    background-color: hsl(var(--white));

    border: 1px solid hsl(var(--black)/0.1);

}



.custom--card .table {

    border: none;

}



.custom--card .card-header {

    padding: 12px 24px;

    background-color: transparent;

    border-bottom: 1px solid hsl(var(--black)/0.1);

}



.custom--card:has(.collapse:not(.show)) .card-header {

    border-bottom: none;

}



.custom--card .card-header .title {

    margin-bottom: 0;

}



.custom--card .card-body {

    background-color: hsl(var(--white));

    padding: 24px;

    border-radius: 5px;

}



.custom--card .card-footer {

    padding: 12px 24px;

    background-color: transparent;

    border-top: 1px solid hsl(var(--black)/0.1);

}



.printarea--card .toggle-btn {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    color: hsl(var(--black));

    background-color: hsl(var(--black)/0.05);

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.printarea--card .toggle-btn:hover,

.printarea--card .toggle-btn:focus {

    color: hsl(var(--black));

    background-color: hsl(var(--black)/0.1);

}



.printarea--card .remove-btn {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    color: hsl(var(--danger)/0.8);

    background-color: hsl(var(--danger)/0.05);

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.printarea--card .remove-btn:hover,

.printarea--card .remove-btn:focus {

    color: hsl(var(--danger));

    background-color: hsl(var(--danger)/0.1);

}



.printarea--card .toggle-btn[aria-expanded="true"] i::before {

    content: "\f106";

}



/* ================================= Card Css End =========================== */

/* ================================= Form Css Start =========================== */

/* Form Label */

.form--label {

    margin-bottom: 6px;

    font-weight: 500;

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

}



.form-group {

    margin-bottom: 1rem;

}



/* Form Select */

.select {

    color: hsl(var(--black)/0.6) !important;

}



.select:-webkit-autofill:active {

    caret-color: hsl(var(--black));

}



.select:focus,

.select:focus-visible {

    border-color: hsl(var(--base));

    color: hsl(var(--black)) !important;

    -webkit-box-shadow: unset;

    box-shadow: unset;

    outline: none;

}



.select option {

    background-color: hsl(var(--section-bg));

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

}



/* Form Select End */

/* Form Control Start */

.form--control {

    border-radius: 4px;

    font-weight: 400;

    outline: none !important;

    width: 100%;

    padding: 16px;

    background-color: transparent;

    border: 1px solid hsl(var(--border-color));

    color: hsl(var(--black));

    line-height: 1;

    box-shadow: none !important;

}



.form-control-sm {

    padding: 12px 16px !important;

    font-size: 16px;

}



.form-select-sm {

    padding: 14px 16px !important;

    font-size: 16px;

}



.form--control .form--sm {

    padding-block: 10px;

    cursor: pointer;

}



.form--control[type="color"] {

    height: 46px;

    padding: 5px !important;

    cursor: pointer;

}



.btn-shape {

    padding: 0;

    font-size: 60px;

}





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

    .form--control {

        padding: 14px;

    }



    .btn-shape {

        font-size: 50px;

    }



}



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

    .form--control {

        padding: 12px;

    }



    .btn-shape {

        font-size: 40px;

    }



}



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

    .form--control {

        padding: 10px 12px;

    }



    .btn-shape {

        font-size: 28px;

    }



}



.form--control:-webkit-autofill,

.form--control:-webkit-autofill:hover,

.form--control:-webkit-autofill:focus,

.form--control:-webkit-autofill:active {

    -webkit-text-fill-color: hsl(var(--black));

    -webkit-transition: background-color 5000s ease-in-out 0s;

    transition: background-color 5000s ease-in-out 0s;

    caret-color: hsl(var(--black));

}



.form--control::-webkit-outer-spin-button,

.form--control::-webkit-inner-spin-button {

    -webkit-appearance: none;

}



.form--control::-webkit-input-placeholder {

    color: hsl(var(--black)/0.6);

    font-size: 0.875rem;

}



.form--control::-moz-placeholder {

    color: hsl(var(--black)/0.6);

    font-size: 0.875rem;

}



.form--control:-ms-input-placeholder {

    color: hsl(var(--black)/0.6);

    font-size: 0.875rem;

}



.form--control::-ms-input-placeholder {

    color: hsl(var(--black)/0.6);

    font-size: 0.875rem;

}



.form--control::placeholder {

    color: hsl(var(--black)/0.6);

    font-size: 0.875rem;

}



.form--control:focus {

    border-color: hsl(var(--base-d-400)) !important;

}



.form--control:disabled,

.form--control[readonly] {

    background-color: hsl(var(--black)/0.1);

    opacity: 1;

    border: 0;

}



.form--control[type=password]:focus {

    color: hsl(var(--black));

}



.form--control[type=password]#your-password,

.form--control[type=password]#confirm-password {

    padding-right: 50px;

}



.form--control[type=file] {

    line-height: 50px;

    padding: 0;

    position: relative;

}



.form--control[type=file]::-webkit-file-upload-button {

    border: 1px solid hsl(var(--black)/0.08);

    padding: 4px 6px;

    border-radius: 0.2em;

    background-color: hsl(var(--base)) !important;

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

    line-height: 25px;

    position: relative;

    margin-left: 15px;

    color: hsl(var(--body-color)) !important;

}



.form--control[type=file]::file-selector-button {

    border: 1px solid hsl(var(--black)/0.08);

    padding: 4px 6px;

    border-radius: 0.2em;

    background-color: hsl(var(--base)) !important;

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

    line-height: 25px;

    position: relative;

    margin-left: 15px;

    color: hsl(var(--body-color)) !important;

}



.form--control[type=file]::-webkit-file-upload-button:hover {

    background-color: hsl(var(--base));

    border: 1px solid hsl(var(--base));

    color: hsl(var(--black));

}



.form--control[type=file]::file-selector-button:hover {

    background-color: hsl(var(--base));

    border: 1px solid hsl(var(--base));

    color: hsl(var(--black));

}



/* Form Control End */

textarea.form--control {

    height: 130px;

}



.password-show-hide {

    position: absolute;

    right: 20px;

    z-index: 5;

    cursor: pointer;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    color: hsl(var(--black)/0.4);

}



/* --------------- Number Arrow None --------------------- */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

}



input[type=number] {

    -webkit-appearance: textfield;

    -moz-appearance: textfield;

    appearance: textfield;

}



/* Custom Checkbox Design */

.form--check {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.form--check a {

    display: inline;

}



.form--check .form-check-input {

    -webkit-box-shadow: none;

    box-shadow: none;

    background-color: transparent;

    border: 1px solid hsl(var(--black)/0.2);

    position: relative;

    box-shadow: none !important;

    border-radius: 0px;

    width: 16px;

    height: 16px;

    cursor: pointer;

}



.form--check .form-check-input:checked {

    background-color: hsl(var(--base)) !important;

    border-color: hsl(var(--base)) !important;

    -webkit-box-shadow: none;

    box-shadow: none;

}



.form--check .form-check-input:checked[type=checkbox] {

    background-image: none;

}



.form--check .form-check-input:checked::before {

    position: absolute;

    content: "\f00c";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    color: hsl(var(--dark));

    font-size: 0.6875rem;

    top: 50%;

    left: 50%;

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

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

}



.form--check .form-check-label {

    font-weight: 600;

    width: calc(100% - 16px);

    padding-left: 12px;

    cursor: pointer;

    font-size: 0.875rem;

}



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

    .form--check label {

        font-size: 0.9375rem;

    }

}



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

    .form--check a {

        font-size: 0.9375rem;

    }

}



/* Custom Radio Design */

.form--radio .form-check-input {

    -webkit-box-shadow: none;

    box-shadow: none;

    background-color: transparent;

    border: 1px solid hsl(var(--black)/0.2);

    position: relative;

    cursor: pointer;

    width: 16px;

    height: 16px;

}



.form--radio .form-check-input:active {

    -webkit-filter: brightness(100%);

    filter: brightness(100%);

}



.form--radio .form-check-input:checked {

    background-color: transparent;

    border-color: hsl(var(--base));

}



.form--radio .form-check-input:checked[type=radio] {

    background-image: none;

}



.form--radio .form-check-input:checked::before {

    position: absolute;

    content: "";

    top: 50%;

    left: 50%;

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

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

    width: 7px;

    height: 7px;

    background-color: hsl(var(--base));

    border-radius: 50%;

    z-index: 999;

}



.form--radio .form-check-label {

    font-weight: 600;

    width: calc(100% - 16px);

    padding-left: 12px;

    cursor: pointer;

    font-size: 0.875rem;

}



/*  Custom Switch Design */

.form--switch .form-check-input {

    border-radius: 3px;

    background-image: none;

    position: relative;

    -webkit-box-shadow: none;

    box-shadow: none;

    border: 0;

    background-color: hsl(var(--black)/0.2) !important;

    padding: 10px !important;

    margin-left: 0;

    margin-bottom: 5px;

    border-radius: 40px;

    width: 70px;

    height: 38px;

    cursor: pointer;

}



.form--switch .form-check-input:focus {

    border-radius: 40px;

    background-image: none;

    position: relative;

    -webkit-box-shadow: none;

    box-shadow: none;

    border: 0;

}



.form--switch .form-check-input::before {

    position: absolute;

    content: "";

    width: 28px;

    height: 28px;

    background-color: hsl(var(--white));

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    border-radius: 2px;

    left: 5px;

    border-radius: 50%;

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

}



.form--switch .form-check-input:checked {

    background-color: hsl(var(--base)) !important;

}



.form--switch .form-check-input:checked::before {

    left: calc(100% - 33px);

    background-color: hsl(var(--white)) !important;

}



.form--switch .form-check-input:checked[type=checkbox] {

    background-image: none;

}



.form--switch .form-check-label {

    width: calc(100% - 14px);

    padding-left: 5px;

    cursor: pointer;

}



/*  Custom Switch End Design */

/* ================================= Form Css End =========================== */

/* --======================Custom Input group Start ======================*/

.input--group {

    position: relative;

    border-radius: 5px;

    border: 1px solid hsl(var(--black)/0.1);

}



.input--group .form--control {

    border-width: 0px !important;

    padding-right: 5px;

    -webkit-box-shadow: unset;

    box-shadow: unset;

}



.input--group .input-group-text+.form--control {

    padding-right: 20px;

    padding-left: 10px;

}



.input--group:focus-within {

    border: 1px solid hsl(var(--dark) / 0.3);

}



.input--group .input-group-text {

    border-radius: 4px;

    background-color: hsl(var(--black)/0.1);

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

    padding-inline: 18px;

    border: 0px;

}



.input--group .input-group-text:first-child {

    border-right: 1px solid hsl(var(--black)/0.1);

}



.input--group .input-group-text:last-child {

    border-left: 1px solid hsl(var(--black)/0.1);

}



.input--group-text {

    margin-left: 5px;

}



.input--group .form--control[readonly] {

    background: hsl(var(--black)/0.3) !important;

}



.input--group .form--control[readonly]:focus {

    border-color: hsl(var(--black)/0.3);

}



.input--group:has(.form--control[readonly]) {

    background: hsl(var(--black)/0.3) !important;

}



.input--group:has(.form--control[readonly]):focus-within {

    border-color: hsl(var(--black)/0.4) !important;

}





.range--control[type=range] {

    --complete: 10%;

    --thumb-size: 18px;

    width: 100%;

    background: transparent;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    position: relative;

}



.range--control[type=range]::before {

    content: "";

    position: absolute;

    inset: 0;

    width: var(--complete);

    background: hsl(var(--dark));

    border-radius: 5px;

}



.range--control[type=range]::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: var(--thumb-size);

    height: var(--thumb-size);

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    background: hsl(var(--dark));

    border-radius: 50%;

    padding: 4px;

    border: 4px solid hsl(var(--white));

    outline: 1px solid hsl(var(--dark));

    top: 50%;

    transform: translateY(-50%);

}



.range--control[type=range]::-webkit-slider-runnable-track {

    height: 4px;

    cursor: pointer;

    -webkit-box-shadow: unset;

    box-shadow: unset;

    background: hsl(var(--black)/0.2);

    border: 0;

    border-radius: 5px;

}



.range--control[type=range]::-moz-range-thumb {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    width: var(--thumb-size);

    height: var(--thumb-size);

    transform: translateY(-50%);

    background: hsl(var(--dark));

    border-radius: 50%;

    padding: 4px;

    border: 4px solid hsl(var(--white));

    outline: 1px solid hsl(var(--dark));

    top: 50%;

    transform: translateY(-50%);

    transform: translateY(-50%);

}



.range--control[type=range]::-moz-range-track {

    height: 4px;

    cursor: pointer;

    box-shadow: unset;

    background: hsl(var(--black)/0.2);

    border: 0;

    border-radius: 5px;

}



/* --======================Custom Input group End ======================*/



/* ================================= Modal Css Start =========================== */

.custom--modal .modal-header {

    border-bottom: 1px solid hsl(var(--black)/0.12);

    padding: 15px 30px;

}



#confirmationModal .modal-header {

    border-bottom: 1px solid hsl(var(--black)/0.12);

}



.custom--modal .modal-header:has(h3) .close {

    margin-top: -30px;

}



.custom--modal .modal-header:has(h3) .close:hover {

    color: hsl(var(--black));

}



.custom--modal .modal-header.close {

    width: 35px;

    height: 35px;

    background-color: hsl(var(--danger));

    font-size: 1.5625rem;

    line-height: 1;

    border-radius: 4px;

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

}



.custom--modal .modal-header.close:hover {

    background-color: hsl(var(--danger-l-100));

}



.custom--modal .modal-header.close :focus {

    -webkit-box-shadow: none;

    box-shadow: none;

}



.custom--modal .modal-content {

    border-radius: 10px !important;

}



.custom--modal .modal-body {

    padding: 15px 30px;

}



.custom--modal .modal-icon i {

    font-size: 2rem;

    color: hsl(var(--base));

    border: 3px solid hsl(var(--base));

    width: 50px;

    height: 50px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    border-radius: 50%;

}



.custom--modal .modal-footer {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -ms-flex-negative: 0;

    flex-shrink: 0;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    padding: 15px;

    border-top: 1px solid hsl(var(--black)/0.12);

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

}



#confirmationModal .modal-footer {

    border-top: 1px solid hsl(var(--black)/0.12);

}



/* ================================= Modal Css End =========================== */

/* ================================= Pagination Css Start =========================== */

.pagination {

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin-top: 15px;

    border: 1px solid #d0d5dd;

    border-radius: 8px;

}



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

    .pagination {

        margin-top: 10px;

    }

}



.pagination .page-item:last-child .page-link {

    border-right: 0;

}



.pagination .page-item.disabled .page-link {

    color: hsl(var(--dark)/0.25);

    pointer-events: none;

}



.pagination .page-item.active .page-link {

    background-color: hsl(var(--base));

    color: hsl(var(--dark));

    border-color: hsl(var(--base));

}



.pagination .page-item .page-link {

    width: 40px;

    height: 40px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    background-color: transparent;

    font-weight: 500;

    padding: 0;

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

    border: 0;

    border-right: 1px solid #d0d5dd;

}



.pagination .page-item .page-link:hover {

    background-color: hsl(var(--base));

    color: hsl(var(--dark));

    border-color: hsl(var(--base));

}



.pagination .page-item .page-link:focus {

    -webkit-box-shadow: none;

    box-shadow: none;

}



/* ================================= Pagination Css End =========================== */

/* ================================= Table Css Start =========================== */

/* Table Content Css start */

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

    .customer {

        display: block;

        text-align: left;

    }

}



.customer__thumb {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    overflow: hidden;

}



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

    .customer__thumb {

        margin-left: auto;

    }

}



.customer__content {

    width: calc(100% - 35px);

    padding-left: 15px;

    text-align: left;

}



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

    .customer__content {

        padding-left: 8px;

    }

}



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

    .customer__content {

        width: 100%;

        padding-left: 0px;

        padding-top: 5px;

    }

}



.customer__name {

    margin-bottom: 0;

    font-size: 1rem;

    color: hsl(var(--black)/0.7);

}



.action-buttons {

    gap: 10px;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

}



.action-btn {

    width: 35px;

    height: 35px;

    border-radius: 50%;

}



.edit-btn {

    color: hsl(var(--info));

    background-color: hsl(var(--info)/0.08);

}



.delete-btn {

    color: hsl(var(--danger));

    background-color: hsl(var(--danger)/0.08);

}



/* Table Css Start */

.table {

    margin: 0;

    border-collapse: collapse;

    border-collapse: separate;

    border-spacing: 0px 0px;

    border: 1px solid hsl(var(--black)/0.1);

    border-radius: 4px;

}



.table thead tr th {

    background-color: hsl(var(--section-bg));

    text-align: center;

    padding: 15px;

    color: hsl(var(--black)/0.7);

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

    font-weight: 600;

    border-bottom: 0;

    max-width: 170px;

    font-size: 1rem;

    border-bottom: 1px solid hsl(var(--black)/0.1);

    white-space: nowrap;

}



.table thead tr th:not(:first-child) {

    border-left: 0;

}



.table thead tr th:first-child {

    text-align: left;

    border-top-left-radius: 4px;

}



.table thead tr th:last-child {

    text-align: right;

    border-top-right-radius: 4px;

}



.table thead tr th:nth-child(2) {

    text-align: left;

}



.table tbody {

    border: 0 !important;

}



.table tbody tr {

    border-bottom: 1px solid hsl(var(--black)/0.1);

}



.table tbody tr:last-child {

    border-bottom: 0;

}



.table tbody tr:last-child td {

    border-bottom: none;

}



.table tbody tr:last-child td:first-child {

    border-bottom-left-radius: 4px;

}



.table tbody tr:last-child td:last-child {

    border-bottom-right-radius: 4px;

}



.table tbody tr td {

    border: 0;

    text-align: center;

    vertical-align: middle;

    padding: 10px 15px;

    border: 0;

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

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

    font-weight: 500;

    max-width: 180px;

    font-size: 1rem;

    border-bottom: 1px solid hsl(var(--black)/0.1);

}



.table tbody tr td::before {

    content: attr(data-label);

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

    font-size: 0.9375rem;

    color: hsl(var(--black));

    font-weight: 500;

    display: none;

    width: 45% !important;

    text-align: left;

}



.table tbody tr td:first-child {

    text-align: left;

}



.table tbody tr td:last-child {

    text-align: right;

}



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

    .table-responsive--md thead {

        display: none;

    }



    .table-responsive--md tbody tr {

        display: block;

    }



    .table-responsive--md tbody tr:last-child td {

        border-bottom: 0;

    }



    .table-responsive--md tbody tr td {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        gap: 15px;

        text-align: right;

        padding: 10px 15px;

        border: none;

        border-bottom: 1px solid hsl(var(--black)/0.1);

        max-width: unset;

        text-align: end !important;

    }



    .table-responsive--md tbody tr td:last-child {

        border: none;

    }



    .table-responsive--md tbody tr td:first-child {

        text-align: right;

        border-left: 0;

    }



    .table-responsive--md tbody tr td::before {

        display: block;

        font-size: 0.875rem;

        color: hsl(var(--black)/0.7);

    }



    .table-responsive--md tbody tr td {

        border: 0;

    }

}



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

    .table-responsive--lg thead {

        display: none;

    }



    .table-responsive--lg tbody tr {

        display: block;

    }



    .table-responsive--lg tbody tr:last-child td {

        border-bottom: 0;

    }



    .table-responsive--lg tbody tr td {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        gap: 15px;

        text-align: right;

        padding: 10px 15px;

        border: none;

        border-bottom: 1px solid hsl(var(--black)/0.1);

        max-width: unset;

        text-align: end !important;

    }



    .table-responsive--lg tbody tr td:last-child {

        border: none;

    }



    .table-responsive--lg tbody tr td:first-child {

        text-align: right;

        border-left: 0;

    }



    .table-responsive--lg tbody tr td::before {

        display: block;

        font-size: 0.875rem;

        color: hsl(var(--black)/0.7);

    }



    .table-responsive--lg tbody tr td {

        border: 0;

    }

}



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

    .table-responsive--xl thead {

        display: none;

    }



    .table-responsive--xl tbody tr {

        display: block;

    }



    .table-responsive--xl tbody tr:last-child td {

        border-bottom: 0;

    }



    .table-responsive--xl tbody tr td {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        gap: 15px;

        text-align: right;

        padding: 10px 15px;

        border: none;

        border-bottom: 1px solid hsl(var(--black)/0.1);

        max-width: unset;

        text-align: end !important;

    }



    .table-responsive--xl tbody tr td:last-child {

        border: none;

    }



    .table-responsive--xl tbody tr td:first-child {

        text-align: right;

        border-left: 0;

    }



    .table-responsive--xl tbody tr td::before {

        display: block;

        font-size: 0.875rem;

        color: hsl(var(--black)/0.7);

    }



    .table-responsive--xl tbody tr td {

        border: 0;

    }

}



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

    .table-responsive--xxl thead {

        display: none;

    }



    .table-responsive--xxl tbody tr {

        display: block;

    }



    .table-responsive--xxl tbody tr:last-child td {

        border-bottom: 0;

    }



    .table-responsive--xxl tbody tr td {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        gap: 15px;

        text-align: right;

        padding: 10px 15px;

        border: none;

        border-bottom: 1px solid hsl(var(--black)/0.1);

        max-width: unset;

        text-align: end !important;

    }



    .table-responsive--xxl tbody tr td:last-child {

        border: none;

    }



    .table-responsive--xxl tbody tr td:first-child {

        text-align: right;

        border-left: 0;

    }



    .table-responsive--xxl tbody tr td::before {

        display: block;

        font-size: 0.875rem;

        color: hsl(var(--black)/0.7);

    }



    .table-responsive--xxl tbody tr td {

        border: 0;

    }

}



.table .period {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    align-items: flex-start;

}



.table tbody td {

    border-left: 1px solid hsl(var(--border-color));

}



.promotion-table .status {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 10px;

}



.promotion-table .status.success {

    --bg-color: hsl(var(--success));

}



.promotion-table .status.danger {

    --bg-color: hsl(var(--danger));

}



.promotion-table .status.info {

    --bg-color: hsl(var(--info));

}



.promotion-table .status.warning {

    --bg-color: hsl(var(--warning));

}



.promotion-table .status.base {

    --bg-color: hsl(var(--base));

}



.promotion-table .status::before {

    content: "";

    width: 10px;

    height: 10px;

    background-color: var(--bg-color);

    border-radius: 50%;

    display: block;

}



/* ================================= Table Css End =========================== */

/* ======================  Dropdown Start  ======================*/

.custom--dropdown .dropdown-menu {

    padding: 8px;

    background: #fff;

    border: #e0e0d7 solid 1px;

    border-radius: 4px;

    max-height: 300px;

    overflow: auto;

}



.custom--dropdown .dropdown-menu::-webkit-slider-thumb {

    width: 4px;

}



.custom--dropdown .dropdown-menu::-webkit-scrollbar {

    width: 4px;

}



.custom--dropdown .dropdown-menu::-webkit-scrollbar-thumb {

    background-color: hsl(var(--base));

}



.custom--dropdown .hr {

    margin-block: 3px;

    border-bottom: 1px solid hsl(var(--border-color));

}



.custom--dropdown .dropdown-toggle::after {

    display: none;

}



.custom--dropdown .dropdown-item {

    padding: 6px 8px;

    color: hsl(var(--dark)/0.7);

    font-size: 1.125rem;

    font-weight: 500;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    border-radius: 4px;

}



.custom--dropdown .dropdown-item:hover {

    color: hsl(var(--dark));

    background-color: hsl(var(--dark)/0.05);

}



.custom--dropdown .dropdown-item.danger-item {

    color: hsl(var(--danger)/0.8);

}



.custom--dropdown .dropdown-item.danger-item:hover {

    color: hsl(var(--danger));

    background-color: hsl(var(--danger)/0.1);

}



/* ======================  Dropdown End  ======================*/

/* ======================  Product-card Start  ======================*/

/* ======================  Product-card End  ======================*/

/* ================================= Badge Css Start =========================== */

.custom--badge {

    --color: var(--badge-color, var(--badge));

    font-size: 14px;

    border-radius: 5px;

    padding: 5px 10px;

    font-weight: 500;

    position: relative;

    text-align: center;

    background-color: hsl(var(--badge)/0.15) !important;

    color: hsl(var(--color)) !important;

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

}



.custom--badge.style-two {

    --color: var(--badge-color, var(--heading-color));

    font-size: 1rem;

    padding: 4px 12px;

    border-radius: 2px;

    border: 1px solid hsl(var(--heading-color));

    color: hsl(var(--color)) !important;

    background-color: hsl(var(--badge)) !important;

}



.badge--base {

    --badge: var(--base);

}



.badge--base-two {

    --badge: var(--base-two);

}



.badge--primary {

    --badge: var(--primary);

}



.badge--secondary {

    --badge: var(--secondary);

}



.badge--success {

    --badge: var(--success);

}



.badge--danger {

    --badge: var(--danger);

}



.badge--dark {

    --badge: var(--dark);

}



.badge--warning {

    --badge: var(--warning);

}



.badge--info {

    --badge: var(--info);

}



.style-two.badge--primary {

    --badge-color: var(--white);

}



.style-two.badge--secondary {

    --badge-color: var(--white);

}



/* ================================= Badge Css End =========================== */

/* ====================================== Alert Css Start =============================== */

.alert {

    margin-bottom: 0;

    background-color: hsl(var(--white)) !important;

    font-weight: 400;

    padding: 17px 24px;

    border-radius: 5px;

}



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

    .alert {

        padding: 16px;

    }

}



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

    .alert {

        padding: 12px;

    }

}



.alert__icon {

    font-size: 1.5rem;

    line-height: 1;

}



.alert__content {

    width: calc(100% - 24px);

    padding-left: 32px;

}



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

    .alert__content {

        padding-left: 16px;

    }

}



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

    .alert__content {

        padding-left: 0;

        width: 100%;

        margin-top: 6px;

    }

}



.alert__title {

    font-size: 1rem;

    color: hsl(var(--base-two)/0.8);

    font-weight: 600;

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

    margin-bottom: 6px;

}



.alert__desc {

    color: hsl(var(--base-two)/0.5);

    display: block;

    line-height: 1.375;

}



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

    .alert__desc {

        font-size: 0.8125rem;

    }

}



.alert__link {

    position: relative;

}



.alert__link:hover::before {

    visibility: visible;

    opacity: 1;

    bottom: 0;

}



.alert__link::before {

    position: absolute;

    content: "";

    left: 0;

    bottom: -5px;

    width: 100%;

    height: 1px;

    background-color: hsl(var(--base));

    visibility: hidden;

    opacity: 0;

    -webkit-transition: 0.2s ease-in-out;

    transition: 0.2s ease-in-out;

}



.alert--base {

    border-color: hsl(var(--base)/0.6);

}



.alert--base .alert__icon {

    color: hsl(var(--base));

}



.alert--primary {

    border-color: hsl(var(--primary)/0.6);

}



.alert--primary .alert__icon {

    color: hsl(var(--primary));

}



.alert--success {

    border-color: hsl(var(--success)/0.6);

}



.alert--success .alert__icon {

    color: hsl(var(--success));

}



.alert--info {

    border-color: hsl(var(--info)/0.6);

}



.alert--info .alert__icon {

    color: hsl(var(--info));

}



.alert--danger {

    border-color: hsl(var(--danger)/0.6);

}



.alert--danger .alert__icon {

    color: hsl(var(--danger));

}



.alert--warning {

    border-color: hsl(var(--warning)/0.6);

}



.alert--warning .alert__icon {

    color: hsl(var(--warning));

}



.alert--secondary {

    border-color: hsl(var(--secondary)/0.6);

}



.alert--secondary .alert__icon {

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

}



/* ====================================== Alert Css End =============================== */

/* ================================= preload Css Start =========================== */

.preloader {

    position: fixed;

    z-index: 999999;

    background-color: hsl(var(--black));

    width: 100%;

    height: 100%;

    backdrop-filter: blur(40px);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

}



.preloader .loader {

    --cell-size: 52px;

    --cell-spacing: 1px;

    --cells: 3;

    --s-space: 8px;

    --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));

    display: flex;

    flex-wrap: wrap;

    width: var(--total-size);

    height: var(--total-size);

    box-shadow: 0 0 0 var(--s-space) hsl(var(--black)), 0 0 0 calc(var(--s-space) + 1px) hsl(var(--base));

}



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

    .preloader .loader {

        --cell-size: 40px;

    }

}



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

    .preloader .loader {

        --cell-size: 32px;

    }

}



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

    .preloader .loader {

        --cell-size: 24px;

    }

}



.preloader .loader-text {

    color: hsl(var(--white));

    margin-top: 8px;

    margin-bottom: 0px;

}





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

    .preloader .loader-text {

        font-size: 1.125rem;

    }

}



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

    .preloader .loader-text {

        font-size: 1rem;

    }

}





.preloader .cell {

    flex: 0 0 var(--cell-size);

    margin: var(--cell-spacing);

    background-color: transparent;

    box-sizing: border-box;

    border-radius: 4px;

    animation: 1.5s ripple ease infinite;

}



.preloader .cell.d-1 {

    animation-delay: 100ms;

}



.preloader .cell.d-2 {

    animation-delay: 200ms;

}



.preloader .cell.d-3 {

    animation-delay: 300ms;

}



.preloader .cell.d-4 {

    animation-delay: 400ms;

}



.preloader .cell:nth-child(1) {

    --cell-color: color-mix(in srgb, hsl(var(--base)) 100%, #000000);

}



.preloader .cell:nth-child(2) {

    --cell-color: color-mix(in srgb, hsl(var(--base)) 90%, hsl(var(--base-two)));

}



.preloader .cell:nth-child(3) {

    --cell-color: color-mix(in srgb, hsl(var(--base)) 80%, hsl(var(--base-two)));

}



.preloader .cell:nth-child(4) {

    --cell-color: color-mix(in srgb, hsl(var(--base)) 70%, hsl(var(--base-two)));

}



.preloader .cell:nth-child(5) {

    --cell-color: color-mix(in srgb, hsl(var(--base)) 50%, hsl(var(--base-two)));

}



.preloader .cell:nth-child(6) {

    --cell-color: color-mix(in srgb, hsl(var(--base)) 40%, hsl(var(--base-two)));

}



.preloader .cell:nth-child(7) {

    --cell-color: color-mix(in srgb, hsl(var(--base)) 30%, hsl(var(--base-two)));

}



.preloader .cell:nth-child(8) {

    --cell-color: color-mix(in srgb, hsl(var(--base)) 14%, hsl(var(--base-two)));

}



.preloader .cell:nth-child(9) {

    --cell-color: color-mix(in srgb, hsl(var(--base)) 0%, hsl(var(--base-two)));

}



@keyframes ripple {

    0% {

        background-color: transparent;

    }



    30% {

        background-color: var(--cell-color);

    }



    60% {

        background-color: transparent;

    }



    100% {

        background-color: transparent;

    }

}



.loader-p {

    border: 0 solid transparent;

    border-radius: 50%;

    width: 150px;

    height: 150px;

    position: absolute;

    top: calc(50vh - 75px);

    left: calc(50vw - 75px);

}



.loader-p:before,

.loader-p:after {

    content: "";

    border: 1em solid hsl(var(--base));

    border-radius: 50%;

    width: inherit;

    height: inherit;

    position: absolute;

    top: 0;

    left: 0;

    -webkit-animation: loader 2s linear infinite;

    animation: loader 2s linear infinite;

    opacity: 0;

}



.loader-p:before {

    -webkit-animation-delay: 0.5s;

    animation-delay: 0.5s;

}



@-webkit-keyframes loader {

    0% {

        -webkit-transform: scale(0);

        transform: scale(0);

        opacity: 0;

    }



    50% {

        opacity: 1;

    }



    100% {

        -webkit-transform: scale(1);

        transform: scale(1);

        opacity: 0;

    }

}



@keyframes loader {

    0% {

        -webkit-transform: scale(0);

        transform: scale(0);

        opacity: 0;

    }



    50% {

        opacity: 1;

    }



    100% {

        -webkit-transform: scale(1);

        transform: scale(1);

        opacity: 0;

    }

}



/* ================================= preload Css End ===========================  */

/* ======================= Header Start Here ======================= */

.header {

    width: 100%;

    position: relative;

    background-color: hsl(var(--white));

    border-bottom: 1px solid hsl(var(--black)/0.1);

    z-index: 5;

}



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

    .header {

        max-height: 100vh;

        overflow-y: auto;

        padding: 10px 0;

        position: absolute;

        top: 0px;

        left: 0;

        right: 0;

        z-index: 999;

    }



    .header::-webkit-scrollbar {

        width: 5px;

        height: 5px;

    }



    .header::-webkit-scrollbar-thumb {

        border-radius: 0px;

    }



    .header+ :is(main) {

        padding-top: 67px;

    }

}



@media screen and (max-width: 991px) and (max-width: 767px) {

    .header+ :is(main) {

        padding-top: 64px;

    }

}



@media screen and (max-width: 991px) and (max-width: 415px) {

    .header+ :is(main) {

        padding-top: 60px;

    }

}



.header .btn {

    padding: 12px 24px;

}



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

    .header .btn {

        padding: 10px 20px;

    }

}



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

    .header .btn {

        padding: 8px 12px;

    }

}



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

    .header .btn {

        padding: 6px 10px;

    }

}



.header.fixed-header {

    position: sticky;

    top: 0px;

    -webkit-animation: slide-down 0.8s;

    animation: slide-down 0.8s;

    -webkit-transition: 0.3s linear;

    transition: 0.3s linear;

}



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

    .header.fixed-header {

        position: fixed;

    }

}



.header .navbar {

    padding: 0 !important;

}



.header .navbar-brand {

    padding-top: 0;

    padding-bottom: 0;

}



.header .navbar-brand.logo img {

    max-width: 200px;

    object-fit: cover;

}



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

    .header .navbar-brand.logo img {

        max-width: 180px;

    }

}



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

    .header .navbar-brand.logo img {

        margin-left: 12px;

    }

}



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

    .header .navbar-brand.logo img {

        max-width: 150px;

    }

}



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

    .header .navbar-brand.logo img {

        max-width: 130px;

        margin-left: 6px;

    }

}



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

    .header .navbar-brand.logo img {

        max-width: 120px;

    }

}



.header .navbar-toggler.header-button {

    --size: 32px;

    width: var(--size);

    height: var(--size);

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid hsl(var(--dark)/0.1);

    color: hsl(var(--dark)/0.8);

    background: transparent;

    padding: 0;

    border-radius: 4px !important;

    -webkit-transition: 0.15s ease-in-out;

    transition: 0.15s ease-in-out;

    font-size: calc(var(--size) * 0.6);

}



@media (min-width: 992px) {

    .navbar-expand-lg .navbar-toggler {

        display: none !important;

    }

}



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

    .header .navbar-toggler.header-button {

        margin-top: 10px;

    }

}



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

    .header .navbar-toggler.header-button {

        --size: 28px;

    }

}



.header .navbar-toggler.header-button:hover,

.header .navbar-toggler.header-button:focus {

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    outline: none;

}



@media screen and (min-width: 992px) {

    .header .navbar-nav {

        margin-left: auto;

    }



    .header .nav-menu {

        padding-top: 0;

        padding-bottom: 0;

    }



    .header .nav-item {

        padding-right: 16px;

    }



    .header .nav-item .nav-link {

        position: relative;

        padding: 18px 0;

        cursor: pointer;

    }



    .header .nav-item .nav-link .nav-item__icon {

        -webkit-transition: 0.2s !important;

        transition: 0.2s !important;

    }



    .header .nav-item .nav-link:hover:not(.active) .nav-link__text {

        color: hsl(var(--base-d-400)) !important;

    }



    .header .nav-item .nav-link:hover::before {

        width: 100%;

        left: 0;

        -webkit-transition: 0.3s;

        transition: 0.3s;

    }



    .header .nav-item .nav-link:hover+ :is(.dropdown-menu) {

        visibility: visible;

        opacity: 1;

        top: 100% !important;

        -webkit-transform: scaleY(1);

        transform: scaleY(1);

    }



    .header .nav-item .nav-link__text {

        font-size: 1rem;

        font-weight: 500;

        padding: 10px;

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

        font-weight: 500;

        -webkit-transition: 0.3s;

        transition: 0.3s;

    }



    .header .nav-item .nav-link__text .nav-item__icon {

        margin-left: 4px;

    }



    .header .nav-item .nav-link.active .nav-link__text {

        background-color: hsl(var(--base));

        border-radius: 0px 12px 12px 12px;

    }



    .header .nav-item.active .nav-link {

        color: hsl(var(--base)) !important;

    }



    .header .nav-item.active .nav-link::before {

        width: 100%;

    }



    .header .account-list {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        gap: 16px;

    }



    .header .account-list__item .btn {

        font-weight: 500;

    }

}



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

    .header .btn-close {

        -webkit-box-shadow: unset !important;

        box-shadow: unset !important;

    }



    .header .navbar-nav {

        overflow-y: auto;

        margin-top: 20px;

    }



    .header .nav-item {

        padding: 20px;

        padding-block: 0px;

        display: block;

        position: relative;

        text-align: left;

        margin: 0;

    }



    .header .nav-item:last-child>.nav-link {

        border-bottom: 0;

    }



    .header .nav-item .nav-link {

        margin-bottom: 8px;

        padding: 10px 10px 10px 0 !important;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        margin: 0 !important;

        border-bottom: 1px solid hsl(var(--white)/0.2);

        font-size: 1.25rem;

        font-weight: 500;

    }



    .header .nav-item .nav-link::before {

        display: none;

    }



    .header .nav-item .nav-link.show[aria-expanded=true] {

        color: hsl(var(--base)) !important;

    }



    .header .nav-item .nav-link.show[aria-expanded=true] i {

        -webkit-transform: rotate(180deg);

        transform: rotate(180deg);

    }



    .header .nav-item .nav-link.dropdown-btn {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        width: 100%;

    }

}



[aria-expanded=true] .nav-item__icon {

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

}



.language-box .select {

    color: hsl(var(--white)/0.6) !important;

}



.language-box .select:focus {

    color: hsl(var(--white)) !important;

}



.navbar--offcanvas .offcanvas-header {

    border-bottom: 1px solid hsl(var(--black)/0.1);

}



@-webkit-keyframes slide-down {

    0% {

        opacity: 0;

        -webkit-transform: translateY(-150%);

        transform: translateY(-150%);

    }



    100% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0);

    }

}



@keyframes slide-down {

    0% {

        opacity: 0;

        -webkit-transform: translateY(-150%);

        transform: translateY(-150%);

    }



    100% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0);

    }

}



/* ======================= Header Css End =========================== */

/* ======================  Mega Menu Start  ======================*/

.mega-menu__featured {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: 16px;

}



.mega-menu__content {

    position: absolute;

    top: 100%;

    left: 0px;

    padding: 24px 25px;

    width: 100%;

    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 8px 16px 0 rgba(0, 0, 0, 0.08);

    background-color: hsl(var(--white));

}



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

    .mega-menu__content {

        position: relative;

        left: 0;

        padding: 0;

        background-color: transparent;

        width: 100%;

        box-shadow: none;

    }

}



.mega-menu__featured {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: 16px;

}



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

    .mega-menu__featured {

        display: none;

    }

}



.mega-menu__featured-item {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: 4px;

    padding-left: 20px;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    /* width: 278px; */

    background-color: hsl(var(--section-bg));

    flex: 1 1 100%;

}



.mega-menu__featured-title {

    margin-bottom: 0;

}



.mega-menu__featured-thumb {

    width: 60px;

    height: 80px;

}



.mega-menu__featured-thumb img {

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

}



.mega-menu__list {

    margin-top: 24px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: 12px;

}



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

    .mega-menu__list {

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -ms-flex-direction: column;

        flex-direction: column;

        margin-top: 0;

    }

}



.mega-menu__list-item {

    width: 278px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

}



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

    .mega-menu__list-item {

        width: 100%;

    }

}



.mega-menu__list-item.header-category-list {

    gap: 4px;

    height: min(545px, 80vh);

    overflow-y: auto;

    flex: 1 0 auto;

}



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

    .mega-menu__list-item.header-category-list {

        height: auto;

        width: 100%;

        flex: auto;

    }

}



.mega-menu__list-item hr {

    margin-block: 8px;

}



.mega-menu__list-item .category {

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

    font-weight: 500;

    font-size: 1.25rem;

    line-height: 1.4;

    width: fit-content;

}



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

    .mega-menu__list-item .category {

        font-size: 1.125rem;

    }

}



@media screen and (min-width: 992px) {

    .mega-menu__list-item .category:hover {

        color: hsl(var(--base-d-300));

    }

}



.mega-menu__list-item-title {

    margin-bottom: 8px;

}



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

    .mega-menu__list-item-title {

        position: relative;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

    }



    .mega-menu__list-item-title:after {

        content: "";

        font-family: "Font Awesome 5 Free";

        font-weight: 900;

        content: "\f0d8";

        font-size: 1.25rem;

        -webkit-transform: rotate(180deg);

        transform: rotate(180deg);

        -webkit-transition: 0.3s;

        transition: 0.3s;

    }

}



.mega-menu__list-item-title.active:after {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

    color: hsl(var(--base-d-400)) !important;

}



.mega-menu__list-item-title.active .category {

    color: hsl(var(--base-d-400)) !important;

}



.mega-menu__list-item-menu {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 8px;

    height: min(500px, 80vh);

    overflow-y: auto;

}



.mega-menu__list-item-menu::-webkit-scrollbar {

    width: 5px;

    background-color: hsl(var(--border-color));

    border-radius: 5px;

}



.mega-menu__list-item-menu::-webkit-scrollbar-thumb {

    width: 5px;

    background-color: hsl(var(--black));

    border-radius: 5px;

}



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

    .mega-menu__list-item-menu {

        height: auto;

    }

}



.mega-menu__list-item-menu .menu-item {

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

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.5;

    display: block;

}



.mega-menu__list-item-menu .menu-item:hover {

    color: hsl(var(--base-d-300));

}



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

    .mega-menu__list-item-menu .menu-item {

        width: 100%;

    }

}



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

    .mega-menu>.dropdown-btn .nav-link__text {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        width: 100%;

    }



    .mega-menu .nav-item__icon {

        -webkit-transition: 0.3s;

        transition: 0.3s;

    }

}



/* ======================  Mega Menu End  ======================*/

/* ================ Top Header Start Here ================ */

.header-top {

    background-color: hsl(var(--dark));

    padding: 10px 0px;

    position: relative;

}



.header-top__text {

    color: hsl(var(--white));

    font-size: 0.875rem;

    font-weight: 400;

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

    text-align: center;

}



/* ================ Top Header End Here ================ */

/* ============= Footer Start Here ======================= */

.footer-area {

    background-color: hsl(var(--black));

    color: hsl(var(--white));

    padding-top: 55px;

}



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

    .footer-area {

        padding-top: 35px;

    }

}





.footer-area .social-list__link {

    background-color: transparent;

    border: 2px solid #e1e7ef;

    color: hsl(var(--white));

}



.footer-area .social-list__link:hover {

    background-color: transparent;

    border-color: hsl(var(--base));

    color: hsl(var(--base)) !important;

}



.footer-area__menus {

    margin-top: 2px;

}



.footer-area__contact .footer-item__title {

    margin-bottom: 10px;

}



.footer-item__logo a img {

    width: 100%;

    height: 100%;

    max-width: 172px;

    max-height: 64px;

}



.footer-item__title {

    color: hsl(var(--white));

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

    font-weight: 500;

    line-height: 140%;

    margin-bottom: 25px;

}



/* .footer-item:has(.footer-menu) {

    margin-bottom: 30px;

} */



.footer-item__location {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

}



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

    .footer-item__location {

        -webkit-box-pack: start;

        -ms-flex-pack: start;

        justify-content: flex-start;

    }

}



.footer-item__location-item a {

    background-color: transparent;

    color: hsl(var(--white)/0.9);

}



.footer-item__location-item a.active {

    color: hsl(var(--base));

}



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

    .footer-item__location-item {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

    }

}



/* Footer List Item */

.footer-menu {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

}



.footer-menu__item {

    display: block;

    padding-bottom: 8px;

}



.footer-menu__item:last-child {

    padding-bottom: 0;

}



.footer-menu__link {

    color: hsl(var(--white)/0.9);

}



.footer-menu__link:hover {

    color: hsl(var(--base-d-200));

    text-decoration: underline;

}



/* Footer Contact */

.footer-contact-menu__item {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    padding-bottom: 12px;

}



.footer-contact-menu__item:last-child {

    padding-bottom: 0;

}



.footer-contact-menu__item-icon {

    width: 15px;

    color: hsl(var(--base));

    font-size: 1.25rem;

}



.footer-contact-menu__item-content {

    width: calc(100% - 15px);

    padding-left: 15px;

}



/* ============= Footer End Here ======================= */

/* ============= Bottom Footer End Here ======================= */

.bottom-footer {

    background-color: hsl(var(--black));

    border-top: 1px solid #52525B;

    padding-block: 24px;

    margin-top: 48px;

}



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

    .bottom-footer {

        padding-block: 16px;

        margin-top: 38px;

    }

}



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

    .bottom-footer {

        margin-top: 15px;

    }

}



.bottom-footer .footer-menu {

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -ms-flex-direction: row;

    flex-direction: row;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 40px;

    -webkit-box-pack: end !important;

    -ms-flex-pack: end !important;

    justify-content: flex-end !important;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-column-gap: 10px;

    -moz-column-gap: 10px;

    column-gap: 10px;

}



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

    .bottom-footer .footer-menu {

        -webkit-box-pack: start !important;

        -ms-flex-pack: start !important;

        justify-content: flex-start !important;

        gap: 25px;

        row-gap: 5px;

    }

}



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

    .bottom-footer .footer-menu {

        -webkit-column-gap: 15px;

        -moz-column-gap: 15px;

        column-gap: 15px;

    }

}



.bottom-footer .footer-menu__item {

    padding-bottom: 0;

}



.bottom-footer .footer-menu__link {

    white-space: nowrap;

    font-size: 0.875rem;

    color: hsl(var(--light));

}



.bottom-footer .bottom-footer-text {

    font-size: 0.875rem;

    color: hsl(var(--white)/0.9);

}



.bottom-footer .footer-menu {

    -webkit-column-gap: 40px;

    -moz-column-gap: 40px;

    column-gap: 40px;

}



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

    .bottom-footer .footer-menu {

        -webkit-column-gap: 20px;

        -moz-column-gap: 20px;

        column-gap: 20px;

    }

}



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

    .bottom-footer .footer-menu {

        -webkit-column-gap: 15px;

        -moz-column-gap: 15px;

        column-gap: 15px;

    }

}



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

    .bottom-footer .footer-menu {

        -webkit-column-gap: 10px;

        -moz-column-gap: 10px;

        column-gap: 10px;

    }

}



/* =============Bottom Footer End Here ======================= */

/* ===================== Scroll to Top Start ================================= */

.scroll-top {

    --size: 48px;

    width: var(--size);

    height: var(--size);

    position: fixed;

    right: 30px;

    bottom: 30px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    z-index: 5;

    transition: 0.5s;

    transform: scale(0);

    color: hsl(var(--black));

    background-color: hsl(var(--base-l-200));

}



body:has(.dashboard) .scroll-top {

    display: none;

}



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

    .scroll-top {

        --size: 40px;

        right: 20px;

        bottom: 20px;

    }

}



.scroll-top:hover,

.scroll-top:focus {

    outline: none;

    box-shadow: none;

    color: hsl(var(--black)/0.8);

    background-color: hsl(var(--base));

}



.scroll-top.show {

    -webkit-transform: scale(1);

    transform: scale(1);

    cursor: pointer;

}



/* ===================== Scroll to Top End ================================= */

/* ===================== Cart Btn CSS Start ================================= */

.cart-btn {

    --size: 48px;

    position: fixed;

    top: 50%;

    right: 30px;

    transform: translateY(-50%);

    color: hsl(var(--white));

    padding: 12px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 6px;

    border-radius: 4px;

    z-index: 999;

    color: hsl(var(--dark));

    background-color: hsl(var(--white));

    font-size: 1.125rem;

    box-shadow: 2px 1px 4px 0px hsl(var(--black)/0.1);

    border: 1px solid hsl(var(--black)/0.05);

    transition: .3s ease;

}



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

    .cart-btn {

        font-size: 1rem;

        padding: 8px;

    }

}



.cart-btn:hover,

.cart-btn:focus {

    outline: none;

    box-shadow: none;

    color: hsl(var(--dark));

    background-color: hsl(var(--base));

}



.cart-btn__text {

    font-size: 0.8125em;

    font-weight: 500;

    line-height: 100%;

    color: hsl(var(--dark)/0.75);

}



.cart-btn__badge {

    padding: 2.5px 5px;

    position: absolute;

    top: -3px;

    right: -3px;

    font-size: 0.75rem;

    font-weight: 600;

    color: hsl(var(--white));

    background-color: hsl(var(--dark));

    line-height: 100%;

    border-radius: 999px;

}



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

    .cart-btn {

        --size: 40px;

        right: 20px;

    }



    .cart-btn__badge {

        font-size: 0.6125rem;

    }

}





/* ===================== Cart Btn CSS End ================================= */



/* ================================= Template Selection Css Start =========================== */

::-moz-selection {

    color: hsl(var(--dark));

    background-color: hsl(var(--base-d-100));

}



::selection {

    color: hsl(var(--dark));

    background-color: hsl(var(--base-d-100));

}



/* ================================= Template Selection Css End ===========================  */

/* ================================= Social Icon Css Start =========================== */

.social-list {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}



.social-list__item {

    margin-right: 10px;

}



.social-list__item:last-child {

    margin-right: 0;

}



.social-list__link {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    position: relative;

    overflow: hidden;

    -webkit-transition: 0.3s;

    transition: 0.3s;

    cursor: pointer;

    color: hsl(var(--black));

    background-color: hsl(var(--black)/0.05);

}



.social-list__link.active,

.social-list__link:hover,

.social-list__link:focus {

    background-color: hsl(var(--base));

    color: hsl(var(--black)) !important;

    border-color: hsl(var(--base)) !important;

}



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

    .social-list__link {

        width: 35px;

        height: 35px;

        font-size: 0.875rem;

    }

}



/* ================================= Social Icon Css End ===========================  */

/* ====================== Breadcrumb Css Start ==================== */

.breadcrumb {

    position: relative;

    z-index: 1;

    padding: 155px 0 70px;

    background-color: #ddd;

}



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

    .breadcrumb {

        padding: 115px 0 60px;

    }

}



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

    .breadcrumb {

        padding: 105px 0 40px;

    }

}



.breadcrumb::before {

    position: absolute;

    content: "";

    left: 0;

    top: 0;

    background-color: hsl(var(--white)/0.1);

    width: 100%;

    height: 100%;

    z-index: -1;

}



.breadcrumb__wrapper {

    text-align: center;

}



.breadcrumb__title {

    margin-bottom: 10px;

    color: hsl(var(--black));

}



.breadcrumb__list {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.breadcrumb__item {

    color: hsl(var(--black));

    padding: 0 5px;

    font-weight: 400;

    font-size: 1rem;

}



.breadcrumb__item-text {

    color: hsl(var(--base));

}



.breadcrumb__link {

    color: hsl(var(--black));

    font-weight: 500;

}



.breadcrumb__link:hover {

    color: hsl(var(--base));

}



/* ====================== Breadcrumb Css End ==================== */

.blog-sidebar-wrapper {

    position: sticky;

    top: 100px;

}



/* ============ Sidebar search box ============= */

.search-box {

    position: relative;

}



.search-box__button {

    position: absolute;

    right: 15px;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    color: hsl(var(--base));

}



/* ================== Sidebar Box & Title =================== */

.blog-sidebar {

    background-color: hsl(var(--black)/0.03);

    padding: 30px 20px;

    border-radius: 5px;

    margin-bottom: 30px;

}



.blog-sidebar:last-of-type {

    margin-bottom: 0;

}



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

    .blog-sidebar {

        padding: 20px 15px;

    }

}



.blog-sidebar__title {

    position: relative;

    padding-bottom: 10px;

    color: hsl(var(--black));

}



.blog-sidebar__title::before {

    position: absolute;

    content: "";

    width: 60px;

    height: 2px;

    background-color: hsl(var(--base));

    left: 0;

    bottom: 0px;

}



/* ========================= Category & Tags List Style ========================= */

.text-list {

    /* Category */

    /* Style Tag */

}



.text-list.style-category .text-list__item {

    border-bottom: 1px dashed hsl(var(--black)/0.2);

}



.text-list.style-category .text-list__item:last-child {

    border-bottom: 0;

}



.text-list.style-category .text-list__link {

    color: hsl(var(--black));

}



.text-list.style-category .text-list__link:hover {

    color: hsl(var(--base));

}



.text-list.style-tag {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -ms-flex-direction: row;

    flex-direction: row;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    margin: -7px;

}



.text-list.style-tag .text-list__item {

    padding: 7px;

}



.text-list.style-tag .text-list__link {

    color: hsl(var(--black));

    border: 1px solid hsl(var(--black)/0.08);

    padding: 6px 20px;

    border-radius: 3px;

}



.text-list.style-tag .text-list__link.active {

    background-color: hsl(var(--base));

    border-color: hsl(var(--base));

    color: hsl(var(--white));

}



.text-list.style-tag .text-list__link:hover {

    background-color: hsl(var(--base));

    border-color: hsl(var(--base));

    color: hsl(var(--white));

}



/* ======================== Latest Blog Css========================  */

.latest-blog {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    padding-bottom: 20px;

    margin-bottom: 20px;

    border-bottom: 1px solid hsl(var(--black)/0.1);

}



.latest-blog:last-of-type {

    padding-bottom: 0px;

    margin-bottom: 0px;

    border-bottom: 0;

}



.latest-blog__thumb {

    width: 80px;

    max-height: 80px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    border-radius: 5px;

    overflow: hidden;

}



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

    .latest-blog__thumb {

        width: 60px;

    }

}



.latest-blog__thumb a {

    display: block;

    height: 100%;

    width: 100%;

}



.latest-blog__content {

    width: calc(100% - 80px);

    padding-left: 15px;

}



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

    .latest-blog__content {

        width: calc(100% - 60px);

    }

}



.latest-blog__title {

    margin-bottom: 5px;

}



.latest-blog__title a {

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

    font-weight: 500;

    font-size: 1rem;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}



.latest-blog__title a:hover {

    color: hsl(var(--base));

}



/* ========================= Latest Blog Css End ===================*/

/* =========================== Banner Section Start Here ========================= */

.banner-section .banner-content {

    padding-top: 120px;

}



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

    .banner-section .banner-content {

        padding-top: 100px;

    }

}



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

    .banner-section .banner-content {

        padding-top: 80px;

    }

}



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

    .banner-section .banner-content {

        padding-top: 60px;

    }

}



.banner-section .banner-content__title {

    font-size: 9.375rem;

    font-weight: 700;

    line-height: 0.8;

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

    margin-bottom: 16px;

}



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

    .banner-section .banner-content__title {

        font-size: 7.5rem;

    }

}



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

    .banner-section .banner-content__title {

        font-size: 6.25rem;

    }

}



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

    .banner-section .banner-content__title {

        font-size: 5rem;

        max-width: 430px;

    }

}



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

    .banner-section .banner-content__title {

        font-size: 3.75rem;

        max-width: 300px;

    }

}



.banner-section .banner-content__desc {

    font-size: 1.25rem;

    font-weight: 500;

    line-height: 1.4;

    max-width: 555px;

    margin-bottom: 32px;

}



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

    .banner-section .banner-content__desc {

        font-size: 1rem;

        margin-bottom: 20px;

    }

}



.banner-section .title-styled {

    --size: 10px;

    color: hsl(var(--base-two));

    position: relative;

}



.banner-section .title-styled:before {

    content: "";

    position: absolute;

    width: calc(100% + var(--size));

    height: calc(100% - 3px);

    left: calc(var(--size) / -2);

    top: -2px;

    border: 1px solid hsl(var(--heading-color));

    z-index: -1;

    -webkit-transform: rotate(-1.77deg);

    transform: rotate(-1.77deg);

}



.banner-section .title-styled__top,

.banner-section .title-styled__bottom {

    position: absolute;

    inset: 0;

    -webkit-transform: rotate(-1.77deg);

    transform: rotate(-1.77deg);

}



.banner-section .title-styled__top:before,

.banner-section .title-styled__top:after,

.banner-section .title-styled__bottom:before,

.banner-section .title-styled__bottom:after {

    content: "";

    position: absolute;

    width: 10px;

    height: 10px;

    background-color: hsl(var(--base-two));

}



.banner-section .title-styled__top:before {

    top: -5px;

    left: -9px;

}



.banner-section .title-styled__top:after {

    top: -5px;

    right: -9px;

}



.banner-section .title-styled__bottom:before {

    bottom: 2px;

    left: -9px;

}



.banner-section .title-styled__bottom:after {

    bottom: 2px;

    right: -9px;

}



.banner-section .banner-btn__link {

    font-size: 1rem;

    line-height: 1.4;

    font-weight: 700;

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

    padding: 18px 36px;

    background-color: hsl(var(--base));

    border-radius: 4px;

}



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

    .banner-section .banner-btn__link {

        padding: 12px 24px;

    }

}



.banner-section .banner-btn__link i {

    font-size: 1.25rem;

    font-weight: 400;

    font-style: italic;

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

}



.banner-section .banner-video {

    margin-top: 125px;

    position: relative;

    max-width: 324px;

}



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

    .banner-section .banner-video {

        margin-top: 50px;

    }

}



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

    .banner-section .banner-video {

        margin-top: 30px;

    }

}



.banner-section .banner-video__thumb {

    position: 10px;

}



.banner-section .banner-video__thumb img {

    border-radius: 10px;

}



.banner-section .banner-video__popup {

    --radius: 12px;

    position: absolute;

    top: -1px;

    right: 0;

    padding-block: 0 6px;

    padding-inline: 6px;

    font-size: 1rem;

    font-weight: 500;

    z-index: 1;

    border-bottom: 1px solid hsl(var(--heading-color));

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

    border-bottom: 1px solid hsl(var(--heading-color));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 5px;

}



.banner-section .banner-video__popup::after {

    content: "";

    position: absolute;

    width: 25px;

    height: 20px;

    z-index: 5;

    left: -43px;

    top: 2px;

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

    -webkit-box-shadow: 16px -3px 0px white;

    box-shadow: 16px -3px 0px white;

    background: transparent;

    -webkit-transform: rotate(-17deg);

    transform: rotate(-17deg);

}



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

    .banner-section .banner-video__popup::after {

        left: -50px;

    }

}



.banner-section .banner-video__popup::before {

    content: "";

    position: absolute;

    width: 20px;

    height: 20px;

    right: 0px;

    bottom: -24px;

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

    -webkit-box-shadow: 10px -8px 0px 0px white;

    box-shadow: 10px -8px 0px 0px white;

}



.banner-section .banner-video__popup .overlay {

    position: absolute;

    inset: 0;

    background-color: hsl(var(--white));

    left: -10px;

    -webkit-transform: skewX(25deg);

    transform: skewX(25deg);

    z-index: -1;

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

    -webkit-box-shadow: -6px 4px 0px 0px hsl(var(--white));

    box-shadow: -6px 4px 0px 0px hsl(var(--white));

    width: calc(100% + 20px);

}



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

    .banner-section .banner-video__popup .overlay {

        left: -17px;

    }

}



.banner-section .banner-video__popup .overlay::before {

    content: "";

    position: absolute;

    width: 71%;

    height: 1px;

    background-color: hsl(var(--heading-color));

    bottom: 6px;

    left: 11px;

}



.banner-section .banner-video__line {

    position: absolute;

    width: 70px;

    height: 4px;

    background-color: hsl(var(--heading-color));

    bottom: 4px;

    left: 0;

    -webkit-box-shadow: 1px 0px 0px 8px hsl(var(--white));

    box-shadow: 1px 0px 0px 8px hsl(var(--white));

    border-radius: 14px;

}



.banner-section .banner-video__line::before {

    content: "";

    position: absolute;

    width: 40px;

    height: 40px;

    background-color: transparent;

    bottom: 12px;

    left: 0;

    border-radius: 0 0 0 10px;

    -webkit-box-shadow: -4px 2px 0px 2px hsl(var(--white));

    box-shadow: -4px 2px 0px 2px hsl(var(--white));

}



.banner-section .banner-video__line::after {

    content: "";

    position: absolute;

    width: 40px;

    height: 8px;

    background-color: transparent;

    bottom: -4px;

    right: -48px;

    border-radius: 0 0 0 10px;

    -webkit-box-shadow: -4px 4px 0px 2px hsl(var(--white));

    box-shadow: -4px 4px 0px 2px hsl(var(--white));

}



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

    .banner-section .banner-video__text {

        font-size: 0.875rem;

    }

}



.banner-section .text {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: 10px;

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

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}



.banner-right {

    position: relative;

    margin-top: 70px;

    text-align: center;

}



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

    .banner-right {

        margin-top: 40px;

    }

}



.banner-right__bg {

    background: -webkit-gradient(linear, left top, left bottom, from(hsl(var(--base)/0.8)), to(hsl(var(--base)/0.4)));

    background: linear-gradient(180deg, hsl(var(--base)/0.8) 0%, hsl(var(--base)/0.4) 100%);

    position: absolute;

    inset: 0;

    z-index: -1;

    border-radius: 25px;

}



.banner-right__thumb {

    padding-top: 40px;

}



.banner-right__thumb img {

    height: 700px;

}



.banner-right__ratting {

    position: absolute;

    right: -56px;

    top: 56px;

    padding: 5px 10px;

    border-radius: 10px;

    -webkit-box-shadow: 0px 0px 0px 10px hsl(var(--white));

    box-shadow: 0px 0px 0px 10px hsl(var(--white));

    background-color: hsl(var(--white));

    z-index: 1;

    max-width: 210px;

    text-align: left;

}



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

    .banner-right__ratting {

        right: -5px;

    }

}



.banner-right__ratting::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    z-index: -1;

    background-color: hsl(var(--base-two)/0.1);

}



.banner-right__demo {

    position: absolute;

    left: -120px;

    bottom: 65px;

    border-radius: 25px;

    -webkit-box-shadow: 0px 0px 0px 10px hsl(var(--white));

    box-shadow: 0px 0px 0px 10px hsl(var(--white));

}



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

    .banner-right__demo {

        left: -50px;

        bottom: 30px;

        max-width: 150px;

        max-height: 150px;

    }

}



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

    .banner-right__demo {

        left: -12px;

    }

}



.banner-right__demo img {

    border-radius: inherit;

    height: 210px;

}



.user-rate {

    color: hsl(var(--warning));

    font-size: 1.25rem;

    text-align: left;

}



.ratting-count {

    font-size: 2.5rem;

    font-weight: 700;

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

    white-space: nowrap;

    text-align: left;

}



.ratting-text {

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.4;

}



.scroll-down {

    position: absolute;

    width: 171px;

    height: 63px;

    -webkit-transform: rotate(-90deg);

    transform: rotate(-90deg);

    right: -70px;

    bottom: 45px;

    border-radius: 10px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    text-align: left;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 10px;

    padding: 10px;

    line-height: 1;

}



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

    .scroll-down {

        right: -60px;

    }

}



.scroll-down::before {

    content: "";

    position: absolute;

    width: 38px;

    height: 40px;

    border-radius: inherit;

    background-color: rgba(255, 255, 255, 0);

    z-index: -1;

    -webkit-box-shadow: -19px 18px 0 4px hsl(var(--black));

    box-shadow: -18px 18px 0 4px hsl(var(--white));

    top: -40px;

    left: 9px;

    border-radius: 0 0 0 20px;

}



.scroll-down__overlay {

    position: absolute;

    inset: 0;

    background-color: hsl(var(--white));

    border-radius: inherit;

    -webkit-transform: skewX(25deg);

    transform: skewX(25deg);

    z-index: -1;

}



.scroll-down__text {

    -webkit-box-ordinal-group: 3;

    -ms-flex-order: 2;

    order: 2;

}



.scroll-down__icon {

    font-size: 1.25rem;

    pointer-events: none;

}



.scroll-down__icon {

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

    transition: all 0.3s ease-in-out;

}



/* =========================== Banner Section End Here ========================= */

/* ======================  Partner Start  ======================*/

.partners-section {

    background-color: hsl(var(--base));

}



.partners {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding-block: 32px;

    gap: 24px;

}



.partners .partners_wrapper {

    width: calc(100% - 100px);

}



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

    .partners .partners_wrapper {

        width: 100%;

    }

}



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

    .partners {

        padding-block: 25px;

    }

}



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

    .partners {

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -ms-flex-direction: column;

        flex-direction: column;

        row-gap: 15px;

        padding-block: 20px;

    }

}



.partners__title {

    margin-bottom: 0;

    -ms-flex-negative: 0;

    flex-shrink: 0;

    -ms-flex-item-align: start;

    align-self: flex-start;

    font-size: 1.5rem;

}



.partners__item img {

    height: 32px;

}



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

    .partners__item img {

        height: 28px;

    }

}



/* ======================  Partner End  ======================*/

/* ======================  Features Start  ======================*/

.features-list {

    margin-bottom: 32px;

}



.features-item {

    padding: 32px;

    border-radius: 4px;

    border: 1px solid hsl(var(--dark));

    margin-bottom: 24px;

    position: relative;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    overflow: hidden;

    cursor: pointer;

}



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

    .features-item {

        padding: 24px;

    }

}



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

    .features-item {

        padding: 18px;

    }

}



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

    .features-item {

        padding: 10px;

    }

}



.features-item__inner {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-flex: 1;

    -ms-flex: 1 auto;

    flex: 1 auto;

    gap: 17px;

}



.features-item.active {

    background-color: hsl(var(--base-two));

    color: hsl(var(--white));

}



.features-item.active::before,

.features-item.active .barline {

    content: "";

    position: absolute;

    height: 5px;

    width: 100%;

    bottom: 0;

    left: 0;

    background-color: hsl(var(--base-l-600));

}



.features-item.active .barline {

    background-color: hsl(var(--base));

}



.features-item.active .features-item__icon {

    color: hsl(var(--white));

    border-color: hsl(var(--white));

}



.features-item.active .features-item__title {

    color: hsl(var(--white));

}



.features-item.active .features-item__desc {

    color: hsl(var(--white));

}



.features-item__icon {

    --size: 60px;

    width: var(--size);

    height: var(--size);

    border: 1px solid hsl(var(--heading-color));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    font-size: 3.5rem;

    font-weight: 700;

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

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    -ms-flex-negative: 0;

    flex-shrink: 0;

}



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

    .features-item__icon {

        --size: 50px;

        font-size: 3rem;

    }

}



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

    .features-item__icon {

        --size: 40px;

        font-size: 1.875rem;

    }

}



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

    .features-item__icon {

        font-size: 1.25rem;

    }

}



.features-item__content {

    -webkit-box-flex: 1;

    -ms-flex: 1 auto;

    flex: 1 auto;

}



.features-item__title {

    margin-bottom: 0;

    font-size: 2rem;

    font-weight: 700;

    line-height: 1.2;

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

    margin-bottom: 2px;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

}



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

    .features-item__title {

        font-size: 1.75rem;

    }

}



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

    .features-item__title {

        font-size: 1.5625rem;

    }

}



.features-item__desc {

    font-size: 1.25rem;

    font-weight: 500;

    line-height: 1.4;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

}



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

    .features-item__desc {

        font-size: 1.125rem;

    }

}



.features-section__thumb-list {

    background-color: #f3ffe5;

    overflow: hidden;

    max-height: 600px;

    height: 100%;

    overflow: hidden;

}



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

    .features-section__thumb-list {

        margin-bottom: 100px;

    }

}



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

    .features-section__thumb-list {

        height: auto;

        height: 600px;

    }

}



@media screen and (max-width: 991px) and (max-width: 767px) {

    .features-section__thumb-list {

        height: 500px;

    }

}



@media screen and (max-width: 991px) and (max-width: 575px) {

    .features-section__thumb-list {

        height: 400px;

    }

}



@media screen and (max-width: 991px) and (max-width: 424px) {

    .features-section__thumb-list {

        height: 300px;

    }

}



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

    .features-section__thumb-list img {

        width: auto;

        height: 100%;

        -o-object-fit: cover;

        object-fit: cover;

    }

}



.features-section__thumb-item {

    display: none;

    height: 100%;

    text-align: center;

}



.features-section__thumb-item img {

    max-height: 600px;

}



.features-section__thumb-item.active {

    display: block;

}



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

    .features-btn {

        margin-bottom: 0;

        left: 10px;

        bottom: 0;

    }

}



.left-menu-item-bar {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

}



.left-menu-item.active .left-menu-item-bar {

    --time: 5s;

}



.left-menu-item.active .left-menu-item-bar .barline {

    -webkit-animation: updateLine forwards var(--time) linear;

    animation: updateLine forwards var(--time) linear;

}



@-webkit-keyframes updateLine {

    0% {

        width: 0;

    }



    100% {

        width: 100%;

    }

}



@keyframes updateLine {

    0% {

        width: 0;

    }



    100% {

        width: 100%;

    }

}



/* ======================  Features End  ======================*/

/* ======================  Category-list Section Start  ======================*/

.category-section {

    margin-bottom: 72px;

}



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

    .category-section {

        margin-bottom: 48px;

    }

}



.category-list__item {

    padding: 10px;

    border-radius: 4px;

    border: 1px solid hsl(var(--heading-color));

    text-align: center;

    height: 100%;

    display: flex !important;

    flex-direction: column;

    justify-content: space-between;

}



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

    .category-list__item {

        padding: 10px;

    }

}



.category-list__thumb {

    margin-inline: auto;

    -o-object-fit: cover;

    object-fit: cover;

}



.category-list__title {

    font-size: 1.5rem;

    font-weight: 600;

    margin-top: 12px;

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

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

    text-decoration: none;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

}



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

    .category-list__title {

        font-size: 1.25rem;

        margin-top: 8px;

    }

}



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

    .category-list__title {

        font-size: 1.125rem;

    }

}



.category-list .slick-next {

    right: calc(var(--size) * -1 - 10px);

}



/* ======================  Category-list Section End  ======================*/

.gallery-section__title {

    margin-bottom: 24px;

}



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

    .gallery-section__title {

        margin-bottom: 18px;

    }

}



.gallery-section .gallery-thumb {

    display: grid;

    grid-template-columns: repeat(24, 1fr);

    gap: 16px;

    grid-auto-flow: dense;

}



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

    .gallery-section .gallery-thumb {

        gap: 10px;

    }

}



.gallery-section .gallery-thumb__item:first-child {

    grid-column: span 10;

    grid-row: span 2;

}



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

    .gallery-section .gallery-thumb__item:first-child {

        grid-column: span 24;

        grid-row: span 1;

    }

}



.gallery-section .gallery-thumb__item:nth-child(2) {

    grid-column: span 14;

    grid-row: span 1;

}



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

    .gallery-section .gallery-thumb__item:nth-child(2) {

        grid-column: span 24;

    }

}



.gallery-section .gallery-thumb__item:nth-child(n+3) {

    grid-column: span 7;

    grid-row: span 1;

}



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

    .gallery-section .gallery-thumb__item:nth-child(n+3) {

        grid-column: span 12;

    }

}



.gallery-section .gallery-thumb__item img {

    border-radius: 4px;

}



/* ======================  CTA Section CSS Start  ====================== */

.cta {

    background-color: #0a2000;

}



.cta-card {

    display: flex;

    border-radius: 4px;

    overflow: hidden;

}



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

    .cta-card {

        flex-direction: column;

    }

}



.cta-card__thumb {

    width: 100%;

    max-width: 45%;

    aspect-ratio: 1/1;

    flex-shrink: 0;

    display: block;

    object-fit: cover;

}



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

    .cta-card__thumb {

        max-width: 42.5%;

    }

}



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

    .cta-card__thumb {

        max-width: 100%;

        aspect-ratio: 1/0.75;

    }

}



.cta-card__content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding: 24px 48px;

    flex-grow: 1;

    background-color: hsl(var(--base));

    background-color: #fbfbf3;

}



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

    .cta-card__content {

        padding: 24px 32px;

    }

}



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

    .cta-card__content {

        padding: 24px;

    }

}



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

    .cta-card__content {

        padding: 16px;

    }

}



.cta-card__title {

    color: #2f2e0c;

    margin-bottom: 16px;

    font-size: 5rem;

    max-width: 90%;

    line-height: 100%;

}



@media screen and (min-width: 1400px) {

    .cta-card__title {

        letter-spacing: -1px;

    }

}



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

    .cta-card__title {

        font-size: 4rem;

    }

}



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

    .cta-card__title {

        max-width: 100%;

        font-size: 3.75rem;

    }

}



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

    .cta-card__title {

        font-size: 2.5rem;

    }

}



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

    .cta-card__title {

        margin-bottom: 8px;

    }

}



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

    .cta-card__title {

        font-size: 1.875rem;

    }

}



.cta-card__desc {

    font-size: 1.25rem;

    font-weight: 500;

    color: rgb(47, 46, 12, 0.8);

    line-height: 150%;

    margin-bottom: 0px;

    max-width: 500px;

    font-style: italic;

}



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

    .cta-card__desc {

        font-size: 1.125rem;

    }

}



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

    .cta-card__desc {

        font-size: 1rem;

    }

}



.cta-card__btn-wrapper {

    margin-top: 64px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 16px;

}



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

    .cta-card__btn-wrapper {

        margin-top: 48px;

    }

}



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

    .cta-card__btn-wrapper {

        margin-top: 32px;

    }

}



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

    .cta-card__btn-wrapper {

        margin-top: 24px;

    }

}



.cta-card__btn-wrapper i {

    font-size: 1.125rem;

    font-weight: 500;

    font-style: italic;

    color: hsl(var(--black)/0.7);

}



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

    .cta-card__btn-wrapper i {

        font-size: 1rem;

    }

}



/* ======================  CTA Section CSS End  ====================== */



/* ======================  Earning-calculate Section Start  ======================*/

.calculate-section {

    background-color: #0a2000;

}



.calculate-section__inner {

    background-color: hsl(var(--white));

}



.calculate-section .section-heading {

    margin-bottom: 40px;

}



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

    .calculate-section .section-heading {

        margin-bottom: 24px;

    }

}



.calculate-section .category-thumb img {

    width: 100%;

    -o-object-fit: contain;

    object-fit: contain;

}



.earning-calculate {

    --padding-inline: 37px;

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    height: 100%;

}



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

    .earning-calculate {

        --padding-inline: 24px;

    }

}



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

    .earning-calculate {

        --padding-inline: 16px;

    }

}



.earning-calculate__header {

    padding: 40px var(--padding-inline) 0;

    gap: 10px;

    margin-bottom: 16px;

}



.earning-calculate__header-title {

    margin-bottom: 0;

}



.earning-calculate__header .product-cost {

    font-size: 1.25rem;

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

}



.earning-calculate__category {

    margin-bottom: 70px !important;

    padding-inline: 46px !important;

}



.earning-calculate__category-item {

    padding: 6px 12px;

    border: 1px solid hsl(var(--body-color));

    border-radius: 3px;

    margin-bottom: 0;

    cursor: pointer;

}



.earning-calculate__category-item.active {

    background-color: hsl(var(--base));

}



.earning-calculate__body {

    padding-inline: var(--padding-inline);

}



.earning-calculate .slick-arrow {

    --size: 45px;

    font-size: 1.25rem;

    z-index: 2;

    background-color: hsl(var(--heading-color));

    color: hsl(var(--white));

}



.earning-calculate .slick-arrow:hover {

    background-color: hsl(var(--heading-color));

}



.earning-calculate .slick-arrow::before {

    content: "";

    position: absolute;

    top: -10px;

    width: 20px;

    z-index: 1;

    height: calc(100% + 20px);

    background: -webkit-gradient(linear, left top, right top, color-stop(15%, #fffbfb), to(rgba(255, 255, 255, 0)));

    background: linear-gradient(90deg, #fffbfb 15%, rgba(255, 255, 255, 0) 100%);

}



.earning-calculate .slick-arrow.slick-disabled {

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

}



.earning-calculate .slick-arrow.slick-disabled::before {

    display: none;

}



.earning-calculate .slick-slide {

    padding-inline: 5px !important;

}



.earning-calculate .slick-prev {

    left: 0;

}



.earning-calculate .slick-prev::before {

    left: calc(100% + 2px);

}



.earning-calculate .slick-next {

    right: 0;

}



.earning-calculate .slick-next::before {

    right: calc(100% + 2px);

    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#fffbfb));

    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fffbfb 100%);

}



.earning-calculate__footer {

    background-color: hsl(var(--base));

    padding: 16px var(--padding-inline) 52px;

    margin-top: auto;

}



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

    .earning-calculate__footer {

        padding-bottom: 32px;

    }

}



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

    .earning-calculate__footer {

        padding-bottom: 24px;

    }

}



.earning-calculate__footer .footer-title {

    font-size: 1rem;

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

    font-weight: 500;

}



.earning-calculate__footer .footer-earning {

    font-size: 5rem;

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

    font-weight: 700;

    letter-spacing: -2px;

    line-height: 1;

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

    margin-block: 8px 24px;

}



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

    .earning-calculate__footer .footer-earning {

        letter-spacing: inherit;

        font-size: 3.75rem;

        margin-bottom: 20px;

    }

}



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

    .earning-calculate__footer .footer-earning {

        font-size: 2.5rem;

        margin-bottom: 16px;

    }

}



.earning-calculate-notice {

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

    font-weight: 500;

    line-height: 1.5;

    background-color: #0a2000;

    color: hsl(var(--white));

    text-align: center;

    padding-top: 40px;

    line-height: 1.5;

}



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

    .earning-calculate-notice {

        padding-top: 20px;

    }

}



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

    .earning-calculate-notice {

        padding-top: 10px;

    }

}



.calculate-item__title {

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.5;

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

}



.calculate-item__price {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    gap: 24px;

}



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

    .calculate-item__price {

        gap: 16px;

    }

}



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

    .calculate-item__price {

        gap: 10px;

    }

}



.calculate-item .range--control {

    -webkit-box-flex: 1;

    -ms-flex: 1 auto;

    flex: 1 auto;

}



.calculate-item .price-value {

    -ms-flex-negative: 0;

    flex-shrink: 0;

    border: 1px solid hsl(var(--heading-color));

    border-radius: 4px;

    text-align: center;

    font-size: 1.25rem;

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

    font-weight: 600;

    padding: 6px;

    min-width: 80px;

}



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

    .calculate-item .price-value {

        min-width: 60px;

    }

}



.calculate-item__price {

    -ms-flex-preferred-size: 50%;

    flex-basis: 50%;

}



.custom--range {

    width: 100%;

}



/* ======================  Earning-calculate Section End  ======================*/

/* ======================  Counter-section Section Start  ======================*/

.counter-section {

    background-color: hsl(var(--base-two)/0.06);

}



.counter-section .section-heading {

    margin-bottom: 40px;

}



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

    .counter-section .section-heading {

        margin-bottom: 24px;

    }

}



.counter-list__item {

    border: 1px solid hsl(var(--heading-color));

    border-radius: 4px;

    padding: 12px 24px;

}



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

    .counter-list__item {

        padding: 12px 16px;

    }

}



.counter-list__item .count {

    margin-bottom: 0;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 5px;

}



.counter-list__item .title {

    font-size: 1.25rem;

    font-weight: 500;

    line-height: 1.4;

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

}



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

    .counter-list__item .title {

        font-size: 1rem;

    }

}



/* ======================  Counter-section Section End  ======================*/

/* ======================  Faq Section Start  ======================*/

.faq-section .section-heading {

    margin-bottom: 40px;

}



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

    .faq-section .section-heading {

        margin-bottom: 24px;

    }

}



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

    .faq-section .section-heading__title {

        text-align: left;

    }

}



/* ======================  Faq Section End  ======================*/

/* ================================= Blog Section Css Start Here ============================= */

.blog-section .section-heading {

    margin-bottom: 40px;

}



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

    .blog-section .section-heading {

        margin-bottom: 24px;

    }

}



.blog-item {

    overflow: hidden;

    height: 100%;

    border: 1px solid hsl(var(--dark)/0.25);

    display: flex;

    flex-direction: column;

    border-radius: 4px;

}



.blog-item:hover .blog-item__thumb img {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}



.blog-item__thumb {

    width: 100%;

    aspect-ratio: 1/0.6;

    overflow: hidden;

    display: block;

}



.blog-item__thumb img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

}



.blog-item__body {

    background-color: hsl(var(--white)/0.07);

    flex: 1 1 auto;

    padding: 16px;

}



.blog-item__footer {

    padding: 12px 16px;

}



.blog-item__date {

    font-size: 0.875rem;

    font-weight: 600;

    color: hsl(var(--white));

    background-color: hsl(var(--base-two));

    max-width: -webkit-fit-content;

    max-width: -moz-fit-content;

    max-width: fit-content;

    padding: 4px 10px;

    margin-bottom: 6px;

    border-radius: 4px;

    line-height: 100%;

}



.blog-item__title {

    line-height: 120%;

    margin-bottom: 0px;

}



.blog-item__title a:hover,

.blog-item__title a:focus {

    color: hsl(var(--base-two-d-100)) !important;

}



.blog-item__title-link {

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

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

    margin-top: 6px;

    font-weight: 600;

    text-decoration: none;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}



.blog-item__title-link:hover {

    color: hsl(var(--dark));

}



.btn--simple {

    text-decoration: none;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

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

    font-size: 1rem;

    font-weight: 600;

    line-height: 140%;

}



.btn--simple__icon {

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

    margin-left: 4px;

    line-height: 100%;

    margin-top: 4px;

}



.btn--simple:hover {

    color: hsl(var(--dark));

}



.btn--simple:hover .btn--simple__icon {

    -webkit-transform: translateX(4px);

    transform: translateX(4px);

}



/* Text Border Bottom Animation Css Start */

.border-effect {

    display: inline !important;

    width: 100%;

    background-repeat: no-repeat;

    background-position-y: -2px;

    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);

    -webkit-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);

    transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);

    background-size: 0 100%;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}



.border-effect:hover {

    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);

    background-size: 100% 100%;

}



/* Text Border Bottom Animation Css Ends */

/* ================================= Blog Section Css End Here ================================= */

/* ======================  Cta Section Start  ======================*/

.cta-section {

    padding-block: 50px;

}



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

    .cta-section {

        padding-block: 40px;

    }

}



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

    .cta-section {

        padding-block: 30px;

    }

}



.cta-section .cta-title {

    font-size: clamp(1.5rem, -0.0928rem + 6.7961vw, 5rem);

    font-weight: 700;

    line-height: 1;

    max-width: 500px;

    margin-bottom: 48px;

}



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

    .cta-section .cta-title {

        line-height: 1.2;

        margin-bottom: 32px;

    }

}



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

    .cta-section .cta-title {

        margin-bottom: 24px;

    }

}



/* ======================  Cta Section End  ======================*/

/* ================================ Testimonails Section Css Start ============================= */

.testimonial-section .slick-arrow {

    --size: 32px;

    --fontSize: 17px;

    top: calc(100% - 8px);

    background: transparent;

    border: 1px solid hsl(var(--base-two));

    color: hsl(var(--base-two));

}



.testimonial-section .slick-arrow:hover {

    background: hsl(var(--base-two)/0.1);

}



.testimonial-section .slick-arrow.testimonial-next {

    left: calc(var(--count) * 26px + var(--size) + 20px);

}



.testimonial-section .slick-arrow.testimonial-prev {

    left: 10px;

}



.testimonial-section .slick-arrow.slick-disabled {

    color: hsl(var(--border-color));

}



.testimonial-section .slick-dots {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: start;

    -ms-flex-pack: start;

    justify-content: flex-start;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 10px;

    margin-top: 40px;

    margin-left: 52px;

}



.testimonial-section .slick-dots li {

    color: transparent;

    width: 16px;

    height: 16px;

    border-radius: 4px;

    color: hsl(var(--border-color)) !important;

    background: #E4E4E7;

}



.testimonial-section .slick-dots li.slick-active {

    background: hsl(var(--base));

    pointer-events: none;

}



.testimonial-section .slick-dots li button {

    opacity: 0;

}



.testimonails-card {

    height: 100%;

}



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

    .testimonial-item {

        padding: 25px 15px;

    }

}



.testimonial-item__content {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

}



.testimonial-item__info {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}



.testimonial-item__thumb {

    width: 100%;

    overflow: hidden;

    aspect-ratio: 185/227;

    background: hsl(var(--light));

}



.testimonial-item__thumb img {

    height: 100%;

    width: 100%;

    max-height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

}



.testimonial-item__name {

    margin-bottom: 0;

}



.testimonial-item__desc {

    margin-top: 20px;

    padding-top: 20px;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 5;

    -webkit-box-orient: vertical;

}



/* ================================ Testimonails Section Css End ============================= */

/* ======================  New-product Start  ======================*/

.add-new-product__steps {

    --gap: 150px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: var(--gap);

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    counter-reset: product-steps;

}



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

    .add-new-product__steps {

        --gap: 50px;

        position: relative;

        max-width: -webkit-fit-content;

        max-width: -moz-fit-content;

        max-width: fit-content;

        margin-inline: auto;

    }

}



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

    .add-new-product__steps {

        --gap: 15px;

    }

}



.add-new-product__step {

    --size: 36px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: 10px;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    position: relative;

}



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

    .add-new-product__step>a {

        position: relative;

    }

}





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

    .add-new-product__step {

        position: static;

    }

}



.add-new-product__step.active .add-new-product__step-number {

    background-color: hsl(var(--base));

    color: var(--white-color);

}



.add-new-product__step.active .add-new-product__step-number::before {

    border: 1px dashed hsl(var(--heading-color));

}



.add-new-product__step.active .add-new-product__step-number::after {

    content: counter(product-steps);

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

}



.add-new-product__step.active .add-new-product__step-text {

    display: block;

}



.add-new-product__step.active~.add-new-product__step .add-new-product__step-number {

    background-color: hsl(var(--section-bg));

}



.add-new-product__step.active~.add-new-product__step .add-new-product__step-number::before {

    border: 1px dashed hsl(var(--heading-color));

}



.add-new-product__step.active~.add-new-product__step .add-new-product__step-number::after {

    content: counter(product-steps);

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

}



.add-new-product__step:last-child .add-new-product__step-number::before {

    display: none;

}



.add-new-product__step-number {

    width: var(--size);

    height: var(--size);

    border-radius: 4px;

    border: 2px solid currentColor;

    background-color: hsl(var(--base));

    color: var(--heading-color);

    font-size: 1rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    font-weight: 700;

    margin-bottom: calc(var(--size) + 12px);

    position: relative;

    counter-increment: product-steps;

}



.add-new-product__step-number::before {

    content: "";

    position: absolute;

    top: 50%;

    left: calc(var(--size) + 8px);

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    width: calc(var(--gap) - 16px);

    height: 1px;

    border-bottom: 1px solid hsl(var(--base));

}



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

    .add-new-product__step-number::before {

        left: calc(var(--size) + 5px);

        width: calc(var(--gap) - 10px);

    }

}



.add-new-product__step-number::after {

    content: "\f00c";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

}



.add-new-product__step-text {

    position: absolute;

    top: calc(var(--size) + 10px);

    left: 50%;

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

    font-size: 1rem;

    font-weight: 700;

    color: var(--heading-color);

    white-space: nowrap;

}



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

    .add-new-product__step-text {

        display: none;

    }

}



.add-new-product__footer {

    margin-top: 30px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    justify-content: flex-end;

    gap: 16px;

}



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

    .add-new-product__footer {

        margin-top: 14px;

        gap: 14px;

    }

}



.size-variation__list {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: 16px;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.size-variation__item {

    --size: 40px;

    width: var(--size);

    height: var(--size);

    border-radius: 4px;

    border: 1px solid hsl(var(--heading-color));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    font-size: 1rem;

    font-weight: 700;

    color: var(--heading-color);

    cursor: pointer;

    position: relative;

}



.size-variation__item:has(input:checked) {

    background-color: hsl(var(--base));

    color: var(--white-color);

}



.size-variation__input {

    display: none;

}



.print-area__list {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: 24px;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



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

    .print-area__list {

        gap: 16px;

    }

}



.print-area__item {

    cursor: pointer;

}



.print-area__item:has(input:checked) .print-area__item-image {

    background-color: hsl(var(--base));

}



.print-area__item-input {

    display: none;

}



.print-area__item-image {

    width: 100%;

    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    width: 100px;

    height: 100px;

    border-radius: 4px;

    border: 1px solid hsl(var(--heading-color));

    margin-bottom: 5px;

    padding: 5px;

}



.print-area__item-name {

    font-size: 1rem;

    font-weight: 700;

    text-align: center;

    color: var(--heading-color);

}



.print-area__item input.print-area__item-name {

    padding-inline: 4px;

    width: 100px;

    border: 1px solid hsl(var(--heading-color));

    border-radius: 2px;

    outline: none;

}



.print-area__item input.print-area__item-name:focus {

    -webkit-box-shadow: unset;

    box-shadow: unset;

    border-color: hsl(var(--black));

}



.print-area__item input.print-area__item-name::-webkit-input-placeholder {

    color: hsl(var(--dark/0.5));

    font-weight: 400;

    font-size: 0.875rem;

}



.print-area__item input.print-area__item-name::-moz-placeholder {

    color: hsl(var(--dark/0.5));

    font-weight: 400;

    font-size: 0.875rem;

}



.print-area__item input.print-area__item-name:-ms-input-placeholder {

    color: hsl(var(--dark/0.5));

    font-weight: 400;

    font-size: 0.875rem;

}



.print-area__item input.print-area__item-name::-ms-input-placeholder {

    color: hsl(var(--dark/0.5));

    font-weight: 400;

    font-size: 0.875rem;

}



.print-area__item input.print-area__item-name::placeholder {

    color: hsl(var(--dark/0.5));

    font-weight: 400;

    font-size: 0.875rem;

}



.print-area .close-print-area {

    background-color: hsl(var(--danger)/0.5);

    color: hsl(var(--white));

    border: none;

    outline: none;

    width: 20px;

    height: 20px;

    border-radius: 4px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    font-size: 0.75rem;

    position: absolute;

    top: 0;

    right: 0;

    z-index: 1;

}



.print-area .close-print-area:hover {

    background-color: hsl(var(--danger));

}



.product-image {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 10px;

}



.product-image__preview {

    --size: 54px;

    -ms-flex-negative: 0;

    flex-shrink: 0;

    width: var(--size);

    height: var(--size);

    border-radius: 4px;

    border: 1px solid hsl(var(--heading-color));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.product-image__preview.view-thumb {

    cursor: pointer;

}



.product-image__upload {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 16px;

    -ms-flex-negative: 0;

    flex-shrink: 0;

}



.product-image__upload input {

    display: none;

}



.product-image__upload label {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 5px;

    -ms-flex-negative: 0;

    flex-shrink: 0;

    text-decoration: underline;

    font-weight: 500;

    cursor: pointer;

}



.product-upload {

    width: 100%;

    height: 250px;

    margin-bottom: 16px;

    border-radius: 4px;

    border: 1px solid hsl(var(--heading-color));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    position: relative;

    cursor: pointer;

}



.product-upload__text {

    font-size: 1rem;

    font-weight: 400;

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

    margin-block: 12px 24px;

}



.product-upload__preview {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 16px;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.product-upload__preview-items {

    position: relative;

    max-width: -webkit-fit-content;

    max-width: -moz-fit-content;

    max-width: fit-content;

}



.product-upload__preview-img {

    width: 150px;

    height: 150px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    background-color: hsl(var(--section-bg));

    border-radius: 4px;

    overflow: hidden;

    border: 1px solid hsl(var(--border-color));

}



.product-upload__preview-close {

    position: absolute;

    top: 0;

    right: 0;

    z-index: 1;

    background-color: hsl(var(--danger)/0.5);

    color: hsl(var(--white));

    width: 20px;

    height: 20px;

    border-radius: 4px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    font-size: 0.75rem;

    cursor: pointer;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

}



.product-upload__preview-close:hover {

    background-color: hsl(var(--danger));

}



.product-upload__preview img {

    width: 100%;

    height: 100%;

    -o-object-fit: contain;

    object-fit: contain;

}



/* ======================  New-product End  ======================*/

/* ======================  Notifications Section Start  ======================*/

.notification-area {

    --position: 20px;

    background-color: hsl(var(--light));

    width: 550px;

    height: 600px;

    border-radius: 10px;

    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

    z-index: 9999;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    position: absolute;

    top: var(--position) !important;

    left: calc(100% + var(--position));

}



.notification-area__header {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: 10px 20px;

    border-bottom: 1px solid hsl(var(--border-color));

}



.notification-area__header-title {

    margin-bottom: 0;

}



.notification-area__body {

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    padding-block: 10px;

}



.notification-area__item {

    --p: 20px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 10px;

    position: relative;

    color: hsl(var(--black)/0.6);

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

    padding-block: 10px;

    padding-inline: var(--p);

}



.notification-area__item:not(:first-child)::after {

    content: "";

    position: absolute;

    top: 0;

    left: var(--p);

    width: calc(100% - var(--p) * 2);

    height: 1px;

    background-color: hsl(var(--border-color));

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

}



.notification-area__item:hover {

    background-color: hsl(var(--black)/0.04);

    color: hsl(var(--black)/0.6);

}



.notification-area__item-wrapper {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 10px;

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

}



.notification-area__item-icon {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: hsl(var(--info)/0.2);

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    color: hsl(var(--info));

}



.notification-area__item-content {

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

}



.notification-area__item-title {

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 0px;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

}



.notification-area__item-text {

    font-size: 1rem;

    color: hsl(var(--gray));

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

}



.empty-message__img {

    width: 150px;

    height: 150px;

    margin-inline: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: end;

    -ms-flex-align: end;

    align-items: flex-end;

}



.empty-message__img img {

    width: auto;

    height: auto;

}



.empty-message__text {

    font-size: 1rem;

    line-height: 1.2;

}



/* ======================  Notifications Section End  ======================*/

/* ======================  Catalog-list Start  ======================*/

.catalog-card {

    border: 1px solid hsl(var(--border-color));

    border-radius: 10px;

    position: relative;

    width: 100%;

    aspect-ratio: 61/47;

    overflow: hidden;

    border-radius: 5px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

}



.catalog-card:hover {

    border-color: hsl(var(--base-d-200));

    -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);

    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);

    background-color: hsl(var(--black)/0.015);

}



.catalog-card__img {

    position: absolute;

    bottom: 0;

    z-index: -1;

    height: 100%;

}



.catalog-card__img img {

    height: 100%;

    -o-object-fit: contain;

    object-fit: contain;

}



.catalog-card__content {

    background-color: hsl(var(--base));

    -webkit-transition: background-color 0.3s ease;

    transition: background-color 0.3s ease;

}



.catalog-card__content:hover {

    background-color: hsl(var(--base-d-200));

}



.catalog-card__title {

    margin-bottom: 0px;

}



.catalog-card__link {

    display: block;

    padding: 5px 16px;

}



.catalog-card__link:hover {

    color: hsl(var(--dark));

}



.product-ratting {

    position: absolute;

    bottom: 16px;

    right: 16px;

    border: 1px solid hsl(var(--warning));

    border-radius: 2px;

    padding: 4px 12px;

    font-size: 12px;

    font-weight: 500;

    color: hsl(var(--black));

    font-size: 16px;

    font-weight: 500;

    line-height: 150%;

    z-index: 2;

    border-radius: 3px;

    background-color: hsl(var(--white));

    display: flex;

    align-items: center;





    i {

        color: hsl(var(--warning));

        font-size: 12px;

        margin-right: 4px;

    }



}



.catalog-card .new-badge {

    position: absolute;

    top: 16px;

    left: 16px;

    background-color: hsl(var(--base-two));

    border-radius: 2px;

    padding: 4px 12px;

    font-size: 12px;

    font-weight: 500;

    color: hsl(var(--white));

    font-size: 16px;

    font-weight: 500;

    line-height: 150%;

}



@media (max-width: 768px) {

    .catalog-card .new-badge {

        font-size: 15px;

        padding: 3px 10px;

        top: 12px;

        left: 12px;

    }

}



@media (max-width: 576px) {

    .catalog-card .new-badge {

        font-size: 14px;

        padding: 2px 8px;

        top: 10px;

        left: 10px;

    }

}



/* ======================  Catalog-list End  ======================*/

.catalog-cta-section__wrapper {

    position: relative;

    z-index: 1;

}



.catalog-cta-section__wrapper::before,

.catalog-cta-section__wrapper::after {

    content: "";

    position: absolute;

    inset: 0;

    background-color: hsl(var(--base-two));

    z-index: -1;

    border-radius: 0px;

}



.catalog-cta-section__wrapper::after {

    width: 55%;

    height: 100%;

    left: auto;

    right: 0;

    background-color: hsl(var(--base-two-d-400)/0.5);

    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);

}



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

    .catalog-cta-section__wrapper::after {

        background-color: hsl(var(--base-two-d-400)/0.08);

    }

}



.catalog-cta-section__content {

    padding-block: 72px;

}



.catalog-cta-section .cta-title {

    max-width: 700px;

}



.catalog-cta-img {

    height: 100%;

    position: relative;

}



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

    .catalog-cta-img {

        display: none;

    }

}



.catalog-cta-img img {

    position: absolute;

    bottom: 0;

    right: 50%;

    -webkit-transform: translateX(50%);

    transform: translateX(50%);

    height: calc(100% - 30px);

}



.cta-title {

    line-height: 0.9;

}



.cta-description {

    margin-bottom: 35px;

}



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

    .cta-description {

        font-size: 1.125rem;

        margin-bottom: 25px;

    }

}



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

    .cta-description {

        font-size: 1rem;

        margin-bottom: 20px;

    }

}



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

    .cta-description {

        margin-bottom: 14px;

    }

}



/* ======================  New-arrivals Start  ======================*/

.product-card {

    transition: all 0.3s ease;

    border-radius: 4px;

}



.product-card:hover {

    background-color: #fafcff;

    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);



    .product-card__thumb {

        border-radius: 4px 4px 0 0;

    }

}



.product-card__thumb {

    border: 1px solid hsl(var(--border-color));

    border-radius: 4px;

    position: relative;

    text-align: center;

    background-color: hsl(var(--section-bg));

    height: 280px;

    overflow: hidden;

    transition: border-radius 0.3s ease;

}



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

    .product-card__thumb {

        height: 250px;

    }

}



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

    .product-card__thumb {

        height: 220px;

    }

}



.product-card__thumb-img {

    width: 100%;

    height: 100%;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

}



.product-card__thumb-img:hover {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}



.product-card__thumb img {

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    object-position: top;

}



.product-card__thumb .product-card__thumb-label {

    position: absolute;

    top: 16px;

    left: 16px;

    background-color: hsl(var(--base-two));

    color: hsl(var(--white));

    padding: 4px 12px;

    font-size: 1rem;

    font-weight: 500;

    z-index: 2;

}



.product-card__thumb .product-card__wishlist-btn {

    position: absolute;

    top: 12px;

    right: -120px;

    background-color: rgba(24, 24, 27, 0.1);

    color: hsl(var(--white));

    width: 48px;

    height: 48px;

    border-radius: 4px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    font-size: 22px;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

    z-index: 2;

}



.product-card__thumb .product-card__wishlist-btn i {

    -webkit-transition: all 0.1s ease;

    transition: all 0.1s ease;

}



.product-card__thumb .product-card__wishlist-btn:hover {

    background-color: rgba(24, 24, 27, 0.11);

    color: hsl(var(--base-two-d-400));

}



.product-card__thumb .product-card__wishlist-btn:hover i {

    -webkit-transform: scale(1.03);

    transform: scale(1.03);

}



.product-card__thumb .product-card__wishlist-btn.active {

    color: hsl(var(--base-two-d-200));

}



.product-card__content {

    padding: 16px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.product-card__content .product-card__title .product-card__title-text {

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

    display: block;

    margin-bottom: 0;

    font-size: 1.25rem;

    font-weight: 500;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}



.product-card__content .product-card__title .product-card__title-by {

    font-size: 1rem;

    font-weight: 400;

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

}



.product-card__content .product-card__title .product-card__title-by a {

    text-decoration: underline;

}



.product-card__content .product-card__price {

    margin-top: 12px;

}



.product-card__content .product-card__price:hover {

    color: hsl(var(--black));

}



.product-card__content .product-card__price .product-card__price-text {

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

    display: block;

    margin-bottom: 0;

    font-size: 1.25rem;

    font-weight: 500;

}



.product-card__content .product-card__price del {

    font-size: 14px;

    font-weight: 400;

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

    margin-right: 8px;

}



.product-card__content .product-card__price .product-card__varient {

    --space: 20px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    gap: var(--space);

}



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

    .product-card__content .product-card__price .product-card__varient-item {

        font-size: 14px;

    }

}



.product-card__content .product-card__price .product-card__varient-item:not(:last-child) {

    position: relative;

}



.product-card__content .product-card__price .product-card__varient-item:not(:last-child)::after {

    content: "";

    position: absolute;

    width: 6px;

    height: 6px;

    border-radius: 50%;

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

    top: 50%;

    -webkit-transform: translate(calc(var(--space) / 2 - 3px), -50%);

    transform: translate(calc(var(--space) / 2 - 3px), -50%);

}



.product-card:hover .product-card__thumb .product-card__wishlist-btn {

    right: 12px;

}



/* ======================  New-arrivals End  ======================*/

/* ======================  Filter-item Start  ======================*/

.product-filter {

    padding-right: 16px;

    border-right: 1px solid hsl(var(--border-color));

}



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

    .product-filter {

        padding-right: 10px;

    }

}



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

    .product-filter__wrapper {

        --bs-offcanvas-width: 320px;

    }

}



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

    .product-filter__wrapper {

        --bs-offcanvas-width: 300px;

    }

}



.product-filter__wrapper .btn-close {

    --btn-size: 32px;

    border-radius: 50%;

    background: hsl(var(--light));

    border: 1px solid hsl(var(--dark)/0.4);

    -webkit-box-shadow: 0 0 2px 3px hsl(var(--dark)/0.1);

    box-shadow: 0 0 2px 3px hsl(var(--dark)/0.1);

    position: absolute;

    left: -18px;

    top: 18px;

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);

    opacity: 1;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    padding: 0px;

    margin: 0px;

    width: var(--btn-size);

    height: var(--btn-size);

}



@media screen and (min-width: 1500px) {

    .product-filter__wrapper {

        --top-value: 90px;

        max-height: max(600px, 100vh - var(--top-value));

        overflow: hidden;

        overflow-y: auto;

        position: sticky;

        top: var(--top-value);

    }

}



.product-filter__wrapper::-webkit-scrollbar {

    width: 5px;

    background-color: hsl(var(--border-color));

    border-radius: 5px;

}



.product-filter__wrapper::-webkit-scrollbar-thumb {

    width: 5px;

    background-color: hsl(var(--base-two));

    border-radius: 5px;

}



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

    .product-filter {

        padding: 16px;

        padding-bottom: 0;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -ms-flex-direction: column;

        flex-direction: column;

        overflow-y: auto;

        height: 100%;

    }

}



.product-filter::-webkit-scrollbar {

    width: 5px;

    background-color: hsl(var(--border-color));

    border-radius: 5px;

}



.product-filter::-webkit-scrollbar-thumb {

    width: 5px;

    background-color: hsl(var(--base-two));

    border-radius: 5px;

}



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

    .product-filter__btn {

        margin-top: auto;

        position: sticky;

        bottom: 0;

        -webkit-box-ordinal-group: 2;

        -ms-flex-order: 1;

        order: 1;

        z-index: 9;

        background-color: hsl(var(--white));

        padding-block: 18px;

    }

}



.product-filter__list {

    padding-top: 10px;

}



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

    .product-filter__list {

        padding-top: 0px;

    }

}



.product-filter__item {

    border-bottom: 1px solid hsl(var(--border-color));

}



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

    .product-filter__item:first-child .product-filter__item-header {

        padding-top: 2px;

    }

}



.product-filter__item-icon {

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

}



.product-filter__item-header {

    padding-block: 18px;

}



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

    .product-filter__item-header {

        padding-block: 14px;

    }

}



.product-filter__item-header[aria-expanded=true] .product-filter__item-icon {

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

}



.product-filter__item:last-child {

    border-bottom: 0;

}



.product-filter__item:last-child .product-filter__item-header {

    border-bottom: 0px;

}



.product-filter__item-text {

    font-size: 20px;

    font-weight: 500;

}



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

    .product-filter__item-text {

        font-size: 18px;

    }

}



.product-filter__item-content .text-check-item {

    padding: 8px 16px;

}



.product-filter__item-content .text-check-item:first-child {

    padding-top: 0px;

}



.product-filter__item-content .text-check-item:last-child {

    padding-bottom: 18px;

}



.product-filter__item-content .text-check-item .form--check {

    margin-bottom: 0;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}



.product-filter__item-content .form-check-label {

    font-size: 1rem;

    font-weight: 400;

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

    width: calc(100% - 8px);

    padding-left: 8px;

}



.product-filter__item-content .form-check-input {

    border-radius: 4px;

    width: 20px;

    height: 20px;

    margin-top: 2px;

}



.color-item .form-check-input {

    background-color: var(--item-color, hsl(var(--dark)));

    border-color: var(--item-color, hsl(var(--dark)));

    border-radius: 50%;

    width: 22px;

    height: 22px;

}



.color-item .form-check-input::before {

    font-size: 0.875rem !important;

    mix-blend-mode: difference;

}



.color-item .form-check-input:checked {

    background-color: var(--item-color, hsl(var(--dark))) !important;

    border-color: var(--item-color, hsl(var(--dark))) !important;

}



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

    .short-by__name {

        display: none;

    }

}



.short-by .custom-selection-wrapper {

    --select-height: 48px;

    height: var(--select-height);

    min-width: 170px;

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content;

    position: relative;

}



.short-by .custom-selection-wrapper .select2-container {

    height: var(--select-height);

    width: 100% !important;

}



.short-by .custom-selection-wrapper .selection {

    border: 0px;

    width: 100%;

    height: 100%;

    border: 1px solid hsl(var(--border-color)) !important;

    border-radius: 4px;

}



.short-by .custom-selection-wrapper .select2-selection__rendered {

    line-height: var(--select-height);

    font-weight: 600;

    font-size: 16px;

}



.short-by .custom-selection-wrapper .select2-dropdown--above .select2-results__option:first-child {

    border-radius: 4px 4px 0 0;

}



.short-by .custom-selection-wrapper .select2-dropdown--bottom .select2-results__option:last-child.select2-results__option--highlighted {

    border-radius: 0 0 4px 4px;

}



.short-by .custom-selection-wrapper .select2-results__option--highlighted {

    background-color: hsl(var(--base-two));

}



.short-by .custom-selection-wrapper .select2-selection__arrow {

    line-height: var(--select-height);

    height: var(--select-height);

    font-size: 18px;

}



.short-by .custom-selection-wrapper .select2-selection__arrow b {

    border-color: hsl(var(--dark)/0.5) transparent transparent transparent;

}



.short-by .custom-selection-wrapper .select2-selection {

    height: 100%;

}



.short-by .custom-selection-wrapper .select2-selection--single {

    border: 0px !important;

}



.short-by .custom-selection-wrapper .select2-dropdown {

    border-color: hsl(var(--border-color));

}



.filter-btn {

    font-weight: 600;

    border: 1px solid hsl(var(--border-color));

    padding-block: 11px;

    padding-inline: 10px;

}



/* ======================  Filter-item End  ======================*/

/* ======================  New-arrivals-section Start  ======================*/

.new-arrivals-section .catalog-heading {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.new-arrivals-section .catalog-heading__title {

    -ms-flex-preferred-size: calc(100% - 280px);

    flex-basis: calc(100% - 280px);

}



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



    .new-arrivals-section .catalog-heading__title {

        flex-basis: 100%;

    }

}



.new-arrivals-section .catalog-heading__desc {

    -ms-flex-preferred-size: 100%;

    flex-basis: 100%;

}



.new-arrivals-section .catalog-heading__btn {

    margin-left: auto;

    -ms-flex-item-align: start;

    align-self: flex-start;

    margin-top: 10px;

}



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

    .new-arrivals-section .catalog-heading__btn {

        -webkit-box-ordinal-group: 4;

        -ms-flex-order: 3;

        order: 3;

        margin-left: 0;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        -ms-flex-preferred-size: 100%;

        flex-basis: 100%;

    }

}



/* ======================  New-arrivals-section End  ======================*/

/* ======================  Plugin Customization Start  ======================*/

/* ======================  Select2 Start  ======================*/

.select2-wrapper {

    --border-radius: 4px;

    --height: 54px;

    --select2-border: hsl(var(--border-color));

    position: relative;

    /* ======================  Select2 End  ======================*/

}



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

    .select2-wrapper {

        --height: 50px;

    }

}



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

    .select2-wrapper {

        --height: 46px;

    }

}



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

    .select2-wrapper {

        --height: 42px;

    }

}



.select2-wrapper .select2+.select2-container {

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

    width: 100% !important;

}



.select2-wrapper .select2+.select2-container .select2-selection--multiple .select2-selection__rendered {

    line-height: 30px;

}



.select2-wrapper .select2+.select2-container .select2-selection--single .select2-selection__rendered {

    line-height: var(--height);

    color: hsl(var(--black)) !important;

}



.select2-wrapper .select2+.select2-container .selection {

    height: var(--height);

}



.select2-wrapper .select2+.select2-container .selection:has(.select2-selection--multiple) {

    height: 100%;

    min-height: calc(var(--height) - 5px);

}



.select2-wrapper .select2+.select2-container .select2-selection--single {

    height: var(--height);

}



.select2-wrapper .select2+.select2-container .select2-selection {

    border: 0;

    background-color: transparent;

    width: 100%;

}



.select2-wrapper .select2+.select2-container .selection {

    width: 100%;

    border: 1px solid hsl(var(--black)/0.1);

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

}



.select2-wrapper .select2+.select2-container .select2-selection__arrow {

    top: calc(var(--height) / 2);

    right: 10px;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    background-color: #f8f8f8;

    border-radius: inherit;

    height: calc(var(--height) - 15px);

    width: calc(var(--height) - 15px);

}



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

    .select2-wrapper .select2+.select2-container .select2-selection__arrow {

        height: calc(var(--height) - 10px);

        width: calc(var(--height) - 10px);

    }

}



.select2-wrapper .select2+.select2-container .select2-selection__arrow::after {

    position: absolute;

    content: "\f078";

    inset: 0;

    font-weight: 900;

    font-family: "Font Awesome 6 Free";

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-transition: all 0.2s;

    transition: all 0.2s;

}



.select2-wrapper .select2+.select2-container .select2-selection__arrow b {

    border: 0;

}



.select2-wrapper .select2+.select2-container .select2-selection--multiple {

    height: 100%;

}



.select2-wrapper .select2+.select2-container .select2-selection--multiple .select2-selection__choice {

    margin-block: 4px;

    line-height: calc(var(--height) - 17px);

}



.select2-container--default .select2-selection--multiple {

    cursor: pointer;

}



.select2-wrapper .select2+.select2-container .select2-selection--multiple .select2-search__field {

    padding: 5px;

    border: none !important;

}



.select2-wrapper .select2-container--open:has(.select2-dropdown--above) {

    margin-top: -12px;

}



.select2-wrapper .select2-container--open:has(.select2-dropdown--below) {

    margin-top: 0px;

}



.select2-wrapper .select2-container--below:has(.select2-selection--multiple)+.select2-container--default .select2-dropdown--below {

    top: 10px;

}



.select2-wrapper .select2-container--open .select2-dropdown {

    border: 1px solid var(--select2-border) !important;

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

    overflow: hidden;

}



.select2-wrapper .select2-container--open .select2-dropdown--above {

    margin-bottom: 10px;

}



.select2-wrapper .select2-search__field {

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

    border: 1px solid var(--select2-border) !important;

}



.select2-wrapper .select2-search__field:focus {

    outline: 0;

    border-color: hsl(var(--base)) !important;

}



.select2-wrapper .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {

    background-color: hsl(var(--base));

    color: hsl(var(--black));

}



.select2-wrapper .select2-container--below.select2-container--open .select2-selection__arrow::after {

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

}



.select2-wrapper .select2-selection__choice {

    background-color: hsl(var(--light)) !important;

}



/* ================= Slick Arrow & Dots css Start ================ */

.slick-initialized.slick-slider {

    margin: 0 -10px;

}



.slick-initialized.slick-slider .slick-track {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

}



.slick-initialized.slick-slider .slick-slide {

    height: auto;

    padding: 0 10px;

}



.slick-initialized.slick-slider .slick-slide>div {

    height: 100%;

}



.slick-arrow {

    --size: 48px;

    --fontSize: 24px;

    position: absolute;

    z-index: 1;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    border: none;

    color: hsl(var(--dark));

    width: var(--size);

    height: var(--size);

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

    font-size: var(--fontSize);

    border: 1px solid hsl(var(--dark));

    border-radius: 4px;

    background-color: hsl(var(--base));

}



.slick-arrow.slick-disabled {

    pointer-events: none;

    border: 1px solid hsl(var(--border-color));

    background-color: hsl(var(--section-bg));

}



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

    .slick-arrow {

        --size: 45px;

        --fontSize: 20px;

    }

}



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

    .slick-arrow {

        --size: 45px;

        --fontSize: 20px;

    }

}



.slick-arrow:hover {

    background-color: hsl(var(--base-d-200));

}



.slick-next {

    right: calc(var(--size) * -1);

}



.slick-prev {

    left: calc(var(--size) * -1);

}



/* Dots Css End */

/* ================= Slick Arrow & Dots css Start ================ */

/* ================================= Range Slider Css Start =========================== */

.custom--range .rangeslider {

    background: hsl(var(--border-color));

    -webkit-box-shadow: unset;

    box-shadow: unset;

}



.custom--range .rangeslider--horizontal {

    height: 4px;

}



.custom--range .rangeslider__fill {

    background-color: hsl(var(--dark));

}



.custom--range .rangeslider__handle {

    --size: 24px;

    background: transparent !important;

    height: var(--size);

    width: var(--size);

    border: 1px solid hsl(var(--dark));

    -webkit-box-shadow: unset;

    box-shadow: unset;

}



.custom--range .rangeslider__handle::after {

    background-color: hsl(var(--dark));

    height: 16px;

    width: 16px;

    border-radius: 50%;

}



/* ================================= Range Slider Css End =========================== */

/* ======================  Plugin Customization End  ======================*/

/* ======================  Pages Design Start  ======================*/

body:has(.dashboard) {

    overflow-x: hidden;

}



.dashboard {

    --sidebar-width: 300px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    min-height: 100vh;

}



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

    .dashboard {

        --sidebar-width: 250px;

    }

}



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

    .dashboard {

        --sidebar-width: 280px;

    }

}



.dashboard.collapsed {

    --sidebar-width: 85px;

}



.dashboard.collapsed .dashboard__sidebar .sidebar-header {

    padding: 10px 20px;

}



.dashboard.collapsed .dashboard__sidebar .sidebar-menu .text,

.dashboard.collapsed .dashboard__sidebar .account__info {

    display: none;

}



.dashboard.collapsed .dashboard__sidebar .sidebar-body {

    padding-inline: 8px;

}



.dashboard.collapsed .dashboard__sidebar .sidebar-menu__link {

    padding: 5px;

    min-height: 50px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}



.dashboard.collapsed .dashboard__sidebar .sidebar-menu__link.active {

    color: hsl(var(--base));

    border-color: transparent;

    background-color: transparent;

}





.dashboard.collapsed .dashboard__sidebar .dashboard__sidebar .sidebar-header {

    padding: 25px;

}



.dashboard.collapsed .dashboard__sidebar .sidebar-footer {

    padding: 0px;

}



.dashboard.collapsed .dashboard__sidebar .sidebar-footer .account {

    padding: 15px 10px;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.dashboard.collapsed .dashboard__sidebar .sidebar-footer .account__icon {

    margin-left: 0;

}



.dashboard .show-sidebar-btn {

    padding: 5px;

    border-radius: 5px;

    font-size: 1.875rem;

    border: 1px solid hsl(var(--border-color));

    -ms-flex-item-align: center;

    align-self: center;

    line-height: 1;

}



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

    .dashboard .show-sidebar-btn {

        font-size: 1.25rem;

    }

}



.dashboard .dashboard__top {

    z-index: 99;

    display: none;

    padding-block: 12px;

    border-bottom: 1px solid hsl(var(--border-color));

}



.dashboard .dashboard__top-wrapper {

    gap: 12px;

}



.dashboard .dashboard__top-wrapper .top-icon {

    width: 35px;

    height: 35px;

    font-size: 20px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    background-color: hsl(var(--dark)/0.07);

    border-radius: 50%;

    color: hsl(var(--dark));

}



.dashboard .dashboard__top-wrapper .notification-icon {

    position: relative;

}



.dashboard .dashboard__top-wrapper .notification-icon .unread-sign {

    --size: 18px;

    position: absolute;

    top: -20%;

    right: -4px;

    background-color: hsl(var(--danger)/0.6);

    border-radius: 50%;

    display: inline-block;

    width: var(--size);

    height: var(--size);

    white-space: nowrap;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

}



.dashboard .dashboard__top-logo img {

    max-width: 130px;

    -o-object-fit: cover;

    object-fit: cover;

}



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

    .dashboard .dashboard__top {

        display: block;

    }

}



.dashboard__sidebar {

    position: fixed;

    top: 0;

    left: 0;

    width: var(--sidebar-width) !important;

    color: #fff;

    -webkit-transition: width 0.2s linear;

    transition: width 0.2s linear;

    white-space: nowrap;

}



@media screen and (min-width: 992px) {

    .dashboard__sidebar {

        z-index: 99;

    }

}



.dashboard__sidebar .custom--dropdown .dropdown-menu {

    min-width: 190px;

    margin-left: 8px !important;

    margin-bottom: 12px !important;

}



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

    .dashboard__sidebar .custom--dropdown .dropdown-menu {

        -webkit-transform: translate3d(0px, -92px, 0px) !important;

        transform: translate3d(0px, -92px, 0px) !important;

    }

}



.dashboard__sidebar-wrapper {

    height: 100vh;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    background: linear-gradient(to bottom, #fffcff, #fffaff 25%, #fef7fa 35%, #fdf4e8 55%, #fcf0e4, #faeee1f7 75%, #f0f7fafa 82%, #e7f1fbfc 88%, #eeedfb 93%, #f6ebfa 96%, #fcebf5);

    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.08);
}



.dashboard__sidebar .sidebar-header {

    padding: 40px 32px 56px 32px;

    -webkit-transition: padding 0.2s linear;

    transition: padding 0.2s linear;

}



.dashboard__sidebar .sidebar-body {

    overflow-x: auto;

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    padding-inline: 20px;

}



.dashboard__sidebar .sidebar-body::-webkit-scrollbar {

    width: 3px;

    height: 3px;

}



.dashboard__sidebar .sidebar-body::-webkit-scrollbar-thumb {

    background-color: hsl(var(--black)/0.15);

}



.dashboard__sidebar .sidebar-footer {

    background-color: transparent;
}





.dashboard__sidebar .sidebar-logo {

    display: block;

    text-align: center;
}



.dashboard__sidebar .sidebar-logo img {

    object-fit: cover;

    display: block;

}



.dashboard__sidebar .sidebar-logo .logo {

    width: 130px;
    margin: 0 auto;
}



.collapsed .dashboard__sidebar .sidebar-logo .logo {

    display: none;

}



.dashboard__sidebar .sidebar-logo .favicon {

    --size: 45px;

    width: var(--size);

    height: var(--size);

    border-radius: 50%;

    display: none;

}



.collapsed .dashboard__sidebar .sidebar-logo .favicon {

    display: block;

}



.dashboard__sidebar .sidebar-footer .account {

    padding: 18px 40px;

    -webkit-transition: padding 0.2s linear;

    transition: padding 0.2s linear;

    color: hsl(var(--dark));
    text-align: left;

    width: 100%;

    -ms-flex-wrap: nowrap;

    flex-wrap: nowrap;

    min-height: unset;

}



.dashboard__sidebar .sidebar-footer .account__thumb {

    font-size: 1.5rem;

    color: hsl(var(--dark));
}



.dashboard__sidebar .sidebar-footer .account__name {

    font-weight: 500;

    color: hsl(var(--dark));
}



.dashboard__sidebar .sidebar-footer .account__email {

    color: hsl(var(--dark));
    font-size: 1rem;

}



.dashboard__sidebar .sidebar-footer .account__icon {

    color: hsl(var(--dark));
    margin-left: auto;

}



.dashboard__body {

    -webkit-box-flex: 1;

    -ms-flex: 1 100%;

    flex: 1 100%;

    margin-left: var(--sidebar-width);

    width: calc(100% - var(--sidebar-width));

}



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

    .dashboard__body {

        margin-left: 0;

        -webkit-box-flex: 1;

        -ms-flex: 1 1 100%;

        flex: 1 1 100%;

    }

}



.dashboard__body .container-fluid {

    --bs-gutter-x: 3rem;

}



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

    .dashboard__body .container-fluid {

        --bs-gutter-x: 1.5rem;

    }

}



.dashboard__header {

    padding-block: 32px;

}



.dashboard__header:not(:last-child) {

    margin-bottom: 24px;

}



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

    .dashboard__header {

        padding-block: 15px 10px;

    }

}



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

    .dashboard__header {

        padding-block: 10px 5px;

    }

}



.dashboard__header-title {

    font-size: 4rem;

    margin-bottom: 0;

}



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

    .dashboard__header-title {

        font-size: 2.5rem;

    }

}



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

    .dashboard__header-title {

        font-size: 1.875rem;

    }

}



.dashboard__header-btn {

    padding: 12px 24px;

}



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

    .dashboard__header-btn {

        padding: 8px 15px;

    }

}



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

    .dashboard__header-btn {

        padding: 5px 10px;

    }

}



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

    .dashboard__header-btn .text {

        display: none;

    }

}



.dashboard__content {

    margin-bottom: 32px;

}



.dashboard .sidebar-menu {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 10px;

}



.dashboard .sidebar-menu__link {

    padding: 10px 20px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 8px;

    font-size: 1.25rem;

    font-weight: 500;

    line-height: 1.4;

    color: #000000;

    background-color: hsl(var(--base)/0);

    border-radius: 4px;

    -webkit-transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;

    transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;

    border: 1px solid transparent;

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

}



.dashboard .sidebar-menu__link.active {}



.dashboard .sidebar-menu__link.active {

    color: rgb(234 88 12);

    background-color: rgb(254 215 170);

    border-color: rgb(254 215 170);

}



.dashboard .sidebar-menu__link:hover:not(.active) {

    color: rgb(234 88 12);
    border-color: rgb(254 215 170 / 0.5);

}



.sidebar-collapse__icon {

    --size: 32px;

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

    background-color: hsl(var(--base));

    z-index: 9;

    font-size: calc(var(--size) * 0.5);

    width: var(--size);

    height: var(--size);

    border-radius: 4px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    position: absolute;

    top: 40px;

    right: -12px;

    -webkit-transition: 0.2s ar;

    transition: 0.2s ar;

    cursor: pointer;

}



.collapsed .sidebar-collapse__icon {

    --size: 24px;

    top: 20px;

}



.collapsed .sidebar-collapse__icon i::before {

    content: '\f424';

}



.sidebar-collapse__icon:hover {

    background-color: hsl(var(--base-d-300));

}



.dashboard-card {

    --effect-color: #FAFAFA;

    padding: 16px 24px;

    border: 1px solid hsl(var(--heading-color));

    position: relative;

    border-radius: 4px;

    overflow: hidden;

    background-color: hsl(var(--section-bg));

    z-index: 1;

}



.dashboard-card::before,

.dashboard-card::after {

    content: "";

    width: 75px;

    height: 75px;

    position: absolute;

    bottom: 0;

    right: 0;

    background-color: var(--effect-color);

    mix-blend-mode: multiply;

}



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



    .dashboard-card::before,

    .dashboard-card::after {

        width: 45px;

        height: 45px;

    }

}



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



    .dashboard-card::before,

    .dashboard-card::after {

        width: 35px;

        height: 35px;

    }

}



.dashboard-card::before {

    bottom: 30px;

    right: 30px;

}



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

    .dashboard-card::before {

        bottom: 18px;

        right: 18px;

    }

}



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

    .dashboard-card::before {

        bottom: 15px;

        right: 15px;

    }

}



.dashboard-card.base {

    --effect-color: hsl(var(--base)/0.2);

    background-color: hsl(var(--base));

}



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

    .dashboard-card {

        padding: 5px 10px;

    }

}



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

    .dashboard-card {

        padding: 12px 18px;

    }

}



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

    .dashboard-card {

        padding: 8px 10px;

    }

}



.dashboard-card__title {

    font-weight: 500;

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

    margin-bottom: 16px;

}



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

    .dashboard-card__title {

        margin-bottom: 10px;

        font-size: 1rem;

    }

}



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

    .dashboard-card__title {

        margin-bottom: 5px;

    }

}



.dashboard-card__amount {

    font-weight: 700;

    margin-bottom: 0;

    color: hsl(var(--dark));

}



.dashboard-card__overlay {

    position: absolute;

    right: 0;

    bottom: 0;

    z-index: -1;

    max-height: 80%;

    width: auto;

}



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

    .dashboard-card__overlay {

        max-width: 50%;

    }

}



.dashboard-card__overlay img {



    width: 100%;

    height: 100%;

}



.product-list {

    padding-top: 40px;



}



.print-product-list {

    padding-top: 40px;

    gap: 10px;

    padding: 10px !important;

    border-radius: 0 0 5px 5px;

    max-width: fit-content;

    border: 1px solid hsl(var(--border-color)/0.5);

    background-color: hsl(var(--section-bg));

    margin-top: -1px;

    margin-inline: auto;

    overflow: auto;

    flex-wrap: nowrap;

    max-width: 400px;

    justify-content: center;

    width: 100%;

    overflow: auto;

}



.product-list__heading {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    margin-bottom: 16px;

}



.view-all-btn {

    font-size: 1rem !important;

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

    font-weight: 600;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 4px;

}



.view-all-btn:hover {

    color: hsl(var(--base-d-300));

}



.view-all-btn:hover .icon {

    border-color: hsl(var(--base-d-300));

}



.view-all-btn:hover .icon i {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

    color: hsl(var(--base-d-300));

}



.view-all-btn .icon {

    border: 1px solid hsl(var(--heading-color));

    width: 18px;

    height: 18px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    font-size: 0.625rem;

    font-weight: 500;

    line-height: 1;

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

}



.view-all-btn .icon i {

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

    -webkit-transition: 0.2s linear;

    transition: 0.2s linear;

}



.product-list__item-thumb {

    height: 235px;

    border: 1px solid hsl(var(--border-color));

    background-color: hsl(var(--section-bg));

    border-radius: 4px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: 18px;

}



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

    .product-list__item-thumb {

        padding: 10px;

    }

}



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

    .product-list__item-thumb {

        padding: 5px;

    }

}



.product-list__item-thumb img {

    max-width: 100%;

    max-height: 100%;

}



.product-list__item-title {

    padding-block: 8px 0;

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.5;

}



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

    .product-list__item-title {

        padding-block: 5px;

    }

}



.product-list__item-price {

    font-size: 1.5rem;

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

    margin-bottom: 0px;

}



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

    .product-list__item-price {

        font-size: 1.125rem;

    }

}



.product-list__item-order {

    font-size: 1rem;

    line-height: 1.5;

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

    font-weight: 500;

}



.product-list__item-order .order-count {

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

}



.sales-chart {

    margin-top: 40px;

}



.sales-chart__wrapper {

    background-color: hsl(var(--section-bg));

    border: 1px solid hsl(var(--border-color));

    border-radius: 4px;

}



.sales-chart__header {

    padding: 16px 24px;

}



.sales-chart .apexcharts-bar-area {

    fill: hsl(var(--base-two));

}



.sales-chart .pie-chart #pie-chart-container {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    gap: 2rem;

}



.sales-chart .pie-chart .custom-labels {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 0.5rem;

}



.sales-chart .pie-chart .apexcharts-legend {

    top: 0;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    gap: 12px;

}



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

    .sales-chart .pie-chart .apexcharts-legend {

        gap: 5px;

    }

}



.sales-chart .pie-chart .apexcharts-legend .chart-label {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 15px;

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

    font-size: 1rem;

    -webkit-box-pack: start;

    -ms-flex-pack: start;

    justify-content: flex-start;

}



.sales-chart .pie-chart .apexcharts-legend .chart-label .title {

    font-weight: 500;

    color: #1E1B39;

    min-width: 100px;

}



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

    .sales-chart .pie-chart .apexcharts-legend .chart-label .title {

        min-width: -webkit-fit-content;

        min-width: -moz-fit-content;

        min-width: fit-content;

    }

}



.sales-chart .pie-chart .apexcharts-legend .chart-label .percentage {

    font-weight: 400;

    min-width: 52px;

}



.sales-chart__select .select {

    padding: 5px 20px 5px 5px;

    border-radius: 4px !important;

    background-color: hsl(var(--section-bg));

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

    border: 1px solid hsl(var(--border-color));

}



.pie-chart .sales-chart__select {

    position: absolute;

    top: 5px;

    right: 5px;

    z-index: 1;

}



.quill--editor {

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

}



.quill--editor:focus-within {

    --border: var(--base);

}



.quill--editor .form--control {

    border-top-left-radius: 0;

    border-top-right-radius: 0;

    border: 1px solid hsl(var(--border-color));

    min-height: 120px;

}



.quill--editor .ql-editor {

    min-height: inherit;

}



.quill--editor .ql-toolbar.ql-snow {

    border-top-left-radius: 4px;

    border-top-right-radius: 4px;

    border: 1px solid hsl(var(--border-color));

}



.quill--editor p {

    font-size: 1rem;

}



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

    .hide-after-md {

        display: none;

    }

}



/* ======================  Dashboard-user Start  ======================*/

.user-dashboard-card {

    --card-color: var(--base-two);

    border: 1px solid hsl(var(--border-color));

    background-color: hsl(var(--section-bg));

    border-radius: 4px;

    padding: 24px;

    position: relative;

    transition: all 0.2s;

    z-index: 1;

}



.user-dashboard-card.base {

    --card-color: var(--base)

}



.user-dashboard-card.base-two {

    --card-color: var(--base-two)

}



.user-dashboard-card.primary {

    --card-color: var(--primary)

}



.user-dashboard-card.secondary {

    --card-color: var(--secondary)

}



.user-dashboard-card.info {

    --card-color: var(--info)

}



.user-dashboard-card.warning {

    --card-color: var(--warning)

}



.user-dashboard-card.danger {

    --card-color: var(--danger)

}



.user-dashboard-card.success {

    --card-color: var(--success)

}



.user-dashboard-card:hover {

    border-color: hsl(var(--card-color));



}



.user-dashboard-card:hover .user-dashboard-card__overlay {

    color: hsl(var(--card-color));

}





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

    .user-dashboard-card {

        padding: 20px;

    }

}



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

    .user-dashboard-card {

        padding: 18px;

    }

}



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

    .user-dashboard-card {

        padding: 16px;

    }

}



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

    .user-dashboard-card {

        padding: 14px;

    }

}



.user-dashboard-card__title {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: 8px;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin-bottom: 24px;

}



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

    .user-dashboard-card__title {

        font-size: 16px;

        margin-bottom: 18px;

    }

}



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

    .user-dashboard-card__title {

        margin-bottom: 14px;

    }

}



.user-dashboard-card__title-icon {

    color: hsl(var(--card-color));

    -ms-flex-negative: 0;

    flex-shrink: 0;

    width: 24px;

    height: 24px;

    border-radius: 4px;

    border: 1px solid hsl(var(--card-color));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    font-size: 12px;

}



.user-dashboard-card__amount {

    margin-bottom: 0;

    line-height: 0.8;

}



.user-dashboard-card__overlay {

    width: 35px;

    height: 35px;

    border: 1px solid currentColor;

    color: hsl(var(--border-color));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    font-size: 23px;

    position: absolute;

    right: 12px;

    top: 12px;

    z-index: -1;

}



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

    .user-dashboard-card__overlay {

        width: 28px;

        height: 28px;

    }

}



.user-dashboard-card__overlay i {

    position: absolute;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

}



.card-list__info {

    width: 100%;

    padding: 32px;

    border-radius: 4px;

}



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

    .card-list__info {

        padding: 25px;

    }

}



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

    .card-list__info {

        padding: 18px;

    }

}



.card-list__info.dark {

    --color: hsl(var(--white));

    background-color: #0A2000;

    border: 1px solid hsl(var(--border-color));

}



.card-list__info.light {

    background-color: hsl(var(--section-bg));

    border: 1px solid hsl(var(--border-color));

}



.card-list__thumb {

    margin-bottom: 8px;

}



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

    .card-list__thumb {

        height: 100px;

    }

}



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

    .card-list__thumb {

        height: 80px;

    }

}



.card-list__thumb img {

    height: 100%;

}



.card-list__content {

    color: var(--color);

}



.card-list__content-title {

    color: var(--color, hsl(var(--heading-color)));

    margin-bottom: 12px;

}



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

    .card-list__content-title {

        margin-bottom: 8px;

    }

}



.card-list__content-desc {

    color: var(--color);

    margin-bottom: 24px;

    font-size: 16px;

}



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

    .card-list__content-desc {

        margin-bottom: 18px;

    }

}



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

    .card-list__content-desc {

        margin-bottom: 16px;

        font-size: 14px;

    }

}



/* ======================  Dashboard-user End  ======================*/

/* ====================== Account CSS Start ======================*/

.account {

    display: flex;

    min-height: 100dvh;

}



.account-main {

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 50px;

}



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

    .account-main {

        padding: 40px;

    }

}



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

    .account-main {

        padding: 30px;

    }

}



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

    .account-main {

        width: 100%;

        padding: 24px;

    }

}



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

    .account-main {

        width: 100%;

        padding: 16px;

    }

}





.account-main__header,

.account-main__body {

    width: 100%;

    max-width: 440px;

}



.account-main__header {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 24px;

}



.account-main__body {

    flex: 1 1 auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.account-thumb {

    width: 48.33333333vw;

    flex-shrink: 0;

}



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

    .account-thumb {

        display: none;

    }

}



.account-main__title {

    margin-bottom: 24px;

}



.account-logo {

    display: block;

}



.account-logo img {

    width: 100%;

    max-width: 210px;

    display: block;

    object-fit: cover;

}



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

    .account-logo img {

        max-width: 150px;

    }

}



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

    .account-logo img {

        max-width: 120px;

    }

}



.account-login {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 16px;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    padding: 15px 24px;

    border-radius: 4px;

    font-size: 1.125rem;

    font-weight: 500;

    line-height: 100%;

    width: 100%;

    border: 1px solid hsl(var(--heading-color));

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

    background-color: #FAFAFA;

}



.account-login:hover,

.account-login:focus {

    outline: none;

    box-shadow: none;

    color: hsl(var(--dark));

    background-color: #efefef;

}



.account-login__text {

    font-size: 1.25rem;

    font-weight: 500;

    line-height: 100%;

}



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

    .account-login__text {

        font-size: 1.125rem;

    }

}



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

    .account-login__text {

        font-size: 1rem;

    }

}



.or-login {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 8px;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin-top: 32px;

}



.or-login__text {

    color: #52525B;

    font-size: 0.75rem;

    font-weight: 600;

    line-height: 150%;

}



.or-login:before,

.or-login:after {

    content: "";

    height: 1px;

    background-color: #E4E4E7;

    width: 24px;

}



.account-content {

    color: hsl(var(--white));

    padding: 48px 48px 0 48px;

}



.account-content__title {

    max-width: 533px;

    color: hsl(var(--white));

    letter-spacing: -2px;

    line-height: 0.8;

    margin-bottom: 24px;

}



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

    .account-content__title {

        max-width: 400px;

    }

}



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

    .account-content__title {

        letter-spacing: 0px;

        line-height: 1;

    }

}



.account-content__text {

    max-width: 372px;

    color: #FAFAFA;

    font-size: 1rem;

    font-weight: 400;

    line-height: 150%;

}



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

    .account-content__text {

        max-width: 350px;

    }

}



.account-content__list {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 16px;

    margin-top: 32px;

}



.account-content__item {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 4px;

}



.account-content__icon {

    --size: 24px;

    width: var(--size);

    height: var(--size);

    background-color: hsl(var(--white));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: #a1cf9e;

    white-space: nowrap;

}



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

    .account-content__icon {

        --size: 20px;

    }

}



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

    .account-content__icon {

        --size: 16px;

    }

}



.account-form .form--label {

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.5;

    margin-bottom: 4px;

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

}



.account-form .form--control {

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.54;

    padding: 14px 24px;

    border-radius: 4px;

    border-color: hsl(var(--border-color));

}



.account-form .form--control:focus,

.account-form .form--control:focus-visible {

    border-color: hsl(var(--base-d-400)) !important;

}



.account-form .input--group {

    border-color: hsl(var(--border-color));

}



.account-form .input--group .input-group-text:first-child {

    border-right-color: transparent !important;

}



.account-form .input--group .input-group-text {

    background-color: #f8f8f8;

}



.account-form .select2-wrapper .select2+.select2-container .selection {

    border-color: hsl(var(--border-color));

}





.account-form hr {

    opacity: 1;

    border-top-color: hsl(var(--black)/0.1);

}



.account-form .form--control::-webkit-input-placeholder {

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

}



.account-form .form--control::-moz-placeholder {

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

}



.account-form .form--control:-ms-input-placeholder {

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

}



.account-form .form--control::-ms-input-placeholder {

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

}



.account-form .form--control::placeholder {

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

}



.account-form .form-check-label {

    color: #2C2C2E;

    font-size: 1rem;

    font-weight: 400;

    line-height: 150%;

}



.account-form .form-check-label a {

    font-weight: 600;

}



.have-account__text {

    font-size: 1rem;

}



.have-account__link {

    font-weight: 600;

}



.have-account__text a {

    font-weight: 600;

}



/* ====================== Account CSS End ========================= */

/* ======================  db-order Start  ======================*/

.order-management .nav-tabs .btn {

    padding: 10px 18px;

    line-height: 1.2;

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: 5px;

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

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    background-color: hsl(var(--section-bg));

}



.order-management .nav-tabs .btn:hover {

    color: hsl(var(--dark));

}



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

    .order-management .nav-tabs .btn {

        font-size: 1.25rem;

    }

}



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

    .order-management .nav-tabs .btn {

        font-size: 1.125rem;

    }

}



.order-management .nav-tabs .btn.active {

    background-color: hsl(var(--base));

    color: hsl(var(--dark));

}



.order-management__body {

    margin-top: 26px;

    overflow-x: auto;

}



.order-management__table {

    min-width: 1100px;

}



.db__search {

    --padding: 15px 16px 15px 16px;

    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 10px;

    background-color: hsl(var(--section-bg));

    margin-top: 12px;

    border: 1px solid hsl(var(--border-color));

    border-radius: 4px;

}



.db__search:focus-within {

    border-color: hsl(var(--base-d-300));

}



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

    .db__search {

        --padding: 12px 14px 12px 14px;

    }

}



.db__search label {

    border-radius: 50%;

    padding-left: 8px;

    padding: var(--padding);

    padding-right: 0;

}



.db__search input {

    width: 100%;

    padding: var(--padding);

    border: none;

    outline: none;

    background-color: transparent;

    padding-left: 8px;

}



.product-item {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 16px;

    max-width: 300px;

    margin-left: 0;

    margin-right: auto;

    width: 100% !important;

}



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

    .product-item {

        max-width: 280px;

    }

}



.product-item__thumbnail {

    width: 80px;

    height: 80px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    border-radius: 4px;

    background-color: hsl(var(--section-bg));

    border: 1px solid hsl(var(--border-color));

    padding: 4px;

    -ms-flex-negative: 0;

    flex-shrink: 0;

}



.product-item__thumbnail img {

    width: 100%;

    height: 100%;

    -o-object-fit: contain;

    object-fit: contain;

}



.product-item__info {

    width: 100%;

    -webkit-box-flex: 1;

    -ms-flex: 1 auto;

    flex: 1 auto;

    text-align: left;

}



.product-item__title {

    font-size: 1.25rem;

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

    font-weight: 500;

    margin-bottom: 0;

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

}



.product-item__sku {

    font-size: 1rem;

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

    margin-bottom: 0;

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

    font-weight: 400;

}



.product-item__desc {

    font-size: 1rem;

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

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

    font-weight: 400;

}



.product-item__actions {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 8px;

    height: 100%;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

}



.edit-btn {

    background-color: hsl(var(--section-bg));

    width: 48px;

    height: 48px;

    -ms-flex-negative: 0;

    flex-shrink: 0;

    border-radius: 4px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

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

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

    cursor: pointer;

    font-size: 1.25rem;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

    border: 1px solid hsl(var(--section-bg));

}



.edit-btn:hover {

    background-color: hsl(var(--black)/0.05);

    border: 1px solid hsl(var(--black)/0.3);

}





.order-management__table-header {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 12px;

    padding-bottom: 12px;

    border-bottom: 1px solid hsl(var(--border-color));

}



.order-management__table-header .table-header {

    font-size: 1rem;

    font-weight: 500;

    -webkit-box-flex: 1;

    -ms-flex-positive: 1;

    flex-grow: 1;

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

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

    width: 14%;

    white-space: nowrap;

    text-align: center;

}



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

    .order-management__table-header .table-header {

        width: 8%;

    }

}



.order-management__table-header .table-header:last-child {

    text-align: right;

}







.table-body-item {

    -webkit-box-flex: 1;

    -ms-flex-positive: 1;

    flex-grow: 1;

    width: 12%;

    font-size: 1rem;

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

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

    font-weight: 500;

    text-align: center;

}





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

    .table-body-item {

        text-align: left;

    }

}



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

    .table-body-item {

        width: 8%;

    }

}



.order-management__table-body-item {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 12px;

    padding-bottom: 12px;

    border-bottom: 1px solid hsl(var(--border-color));

}



/* ======================  db-order End  ======================*/



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

    .order-management__table {

        min-width: 100%;

    }



    .order-management__table-header {

        display: none;

    }



    .order-management__table-body {

        --gap: 12px;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        width: 100%;

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

        gap: var(--gap);

    }



    .order-management__table-body-item {

        width: calc(50% - var(--gap) / 2);

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -ms-flex-direction: column;

        flex-direction: column;

        border: 1px solid hsl(var(--border-color));

        border-radius: 4px;

    }



    .table-body-item {

        width: 100%;

    }



    .product-item {

        max-width: 100%;

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -ms-flex-direction: column;

        flex-direction: column;

        -webkit-box-align: start;

        -ms-flex-align: start;

        align-items: flex-start;

        gap: 12px;

    }



    .product-item__thumbnail {

        width: 100%;

    }



    .product-item__actions {

        width: 100% !important;

    }



    .order-management__table-body-item {

        padding: 15px;

        gap: 8px !important;

        position: relative;

    }



    .product-item__thumbnail {

        height: 250px;

    }

}



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

    .order-management__table-body {

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -ms-flex-direction: column;

        flex-direction: column;

    }



    .order-management__table-body-item {

        width: 100%;

    }

}



.sales-table {

    margin-block: 40px;

}



/* ======================  Db-settings Start  ======================*/

.setting-sidebar {

    border: 1px solid hsl(var(--dark));

    border-radius: 4px;

}



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

    .setting-sidebar {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        margin-bottom: 30px;

        border: 0px;

    }

}



.setting-sidebar__item {

    display: block;

    padding: 12px 16px;

    border-bottom: 1px solid hsl(var(--dark) / 0.1);

    font-size: 1.25rem;

    font-weight: 500;

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

    -ms-flex-negative: 0;

    flex-shrink: 0;

}



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

    .setting-sidebar__item {

        font-size: 1rem;

        padding: 10px 16px;

    }

}



.setting-sidebar__item:first-child {

    border-radius: 4px 4px 0 0;

}



.setting-sidebar__item:last-child {

    border-bottom-width: 0px;

    border-radius: 0 0 4px 4px;

}



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

    .setting-sidebar__item:last-child {

        border-radius: 0;

        border-bottom-width: 1px;

    }

}



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

    .setting-sidebar__item:last-child {

        border-radius: 4px 4px 0 0;

        border-bottom-width: 1px;

    }

}



.setting-sidebar__item.active {

    background-color: hsl(var(--base));

    color: hsl(var(--black));

    border-radius: 4px 4px 0 0;

}



.setting-content {

    border: 1px solid hsl(var(--border-color));

    background-color: hsl(var(--section-bg));

    border-radius: 4px;

    padding: 24px;

}



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

    .setting-content {

        padding: 1rem;

    }

}



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

    .setting-content {

        padding: 10px;

    }

}



.setting-content__title {

    font-size: 2rem;

    font-weight: 700;

}



.setting-content__info {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    margin-top: 12px;

}



.setting-content__info .icon {

    width: 18px;

    height: 18px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    border: 1px solid hsl(var(--body-color));

    font-size: 0.875rem;

}



.setting-content__info-text {

    font-size: 0.875rem;

    font-weight: 400;

}



.setting-content__preview {

    border: 1px solid hsl(var(--base-two));

    border-radius: 4px;

    padding: 12px;

    background-color: hsl(var(--base-two)/0.065);

}



.setting-content__preview-title {

    font-size: 1rem;

    font-weight: 400;

}



.setting-content__preview-url {

    font-size: 1.25rem;

    font-weight: 600;

}



.setting-content__preview-url:hover {

    color: hsl(var(--base-two));

}



.setting-content__thumb {

    --size: 200px;

    margin-top: 40px;

}



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

    .setting-content__thumb {

        --size: 150px;

        margin-top: 30px;

    }

}



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

    .setting-content__thumb {

        --size: 120px;

        margin-top: 20px;

    }

}



.setting-content__thumb-inner {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 16px;

}



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

    .setting-content__thumb-inner {

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center;

    }

}



.setting-content__thumb-area {

    font-size: 1rem;

    font-weight: 400;

    height: var(--size);

    border-radius: 4px;

    border: 1px solid hsl(var(--border-color));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    position: relative;

}



.setting-content__thumb-area.logo {

    width: var(--size);

}



.setting-content__thumb-area.cover {

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

}



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

    .setting-content__thumb-area.cover {

        -ms-flex-preferred-size: 100%;

        flex-basis: 100%;

    }

}



.setting-content__thumb-cover {

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

}



.setting-content__thumb-input {

    position: absolute;

    bottom: 4px;

    right: 4px;

    width: 40px;

    height: 40px;

    border: 1px solid hsl(var(--base-two));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    border-radius: 2px;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

    cursor: pointer;

}



.setting-content__thumb-input:hover {

    background-color: hsl(var(--base-two)/0.065);

}



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

    .setting-content__thumb-input {

        width: 30px;

        height: 30px;

    }

}



.setting-content__thumb-input .icon {

    cursor: pointer;

    line-height: 1;

    margin: 0;

    color: hsl(var(--base-two));

    font-size: 1.25rem;

}



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

    .setting-content__thumb-input .icon {

        font-size: 1rem;

    }

}



.setting-content__thumb-shows {

    width: 48px;

    height: 48px;

}



.setting-content__thumb-shows img {

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

}



.setting-content__desc {

    margin-top: 24px;

}



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

    .setting-content__desc {

        margin-top: 16px;

    }

}



.setting-content__desc .form--label {

    margin-bottom: 8px;

}



.setting-content__desc .form--control {

    height: 120px;

    border-color: hsl(var(--border-color));

    -webkit-transition: border 0.3s ease;

    transition: border 0.3s ease;

}



.setting-content__desc .form--control:focus {

    border-color: hsl(var(--base-two));

}



.setting-content__contact {

    margin-top: 24px;

}



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

    .setting-content__contact {

        margin-top: 16px;

    }

}



.setting-content__contact-title {

    margin-bottom: 8px;

    font-size: 2rem;

    font-weight: 700;

}



.setting-content__contact-items:not(:last-of-type) {

    margin-bottom: 16px;

}



.setting-content__contact-items {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 16px;

}



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

    .setting-content__contact-items {

        gap: 8px;

    }

}



.setting-content__contact-items .input-group {

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    border-color: hsl(var(--border-color));

    -webkit-transition: border 0.3s ease;

    transition: border 0.3s ease;

}



.setting-content__contact-items .input-group:focus-within {

    border-color: hsl(var(--base-two));

}



.setting-content__contact-items .form-control {

    border-color: hsl(var(--border-color));

    -webkit-transition: border 0.3s ease;

    transition: border 0.3s ease;

}



.setting-content__contact-items .form-control:focus {

    border-color: hsl(var(--base-two));

}



.setting-content__contact-items .btn {

    -ms-flex-negative: 0;

    flex-shrink: 0;

}



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

    .setting-content__contact-items .btn {

        padding-inline: 15px;

    }

}



.setting-content__contact-items .input-group-text {

    min-width: 150px;

    border-color: hsl(var(--border-color));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 8px;

}



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

    .setting-content__contact-items .input-group-text {

        min-width: auto;

    }

}



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

    .setting-content__contact-items .input-group-text {

        width: 40px;

        padding: 5px;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center;

    }

}



.setting-content__contact-items .input-group-text .icon {

    font-size: 1.25rem;

}



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

    .setting-content__contact-items .input-group-text .text {

        display: none;

    }

}



.setting-content .accordion-button {

    background-color: transparent !important;

    font-size: 1.25rem;

    font-weight: 500;

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

    padding-block: 12px;

    position: relative;

}



.setting-content .custom--accordion .accordion-item {

    border-color: hsl(var(--border-color));

}



.setting-content .accordion-item:first-child {

    border-top: 0;

}



.setting-content .accordion-item:last-child {

    border-bottom: 0;

}



.setting-content .accordion-button::after {

    width: 20px;

    height: 20px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-transform-origin: center center;

    transform-origin: center center;

}



.setting-content .accordion-button[aria-expanded=false]::after {

    content: "\f054";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    top: calc(var(--accordion-padding) / 2 + 0px);

    border: 0;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

}



.setting-content .accordion-button[aria-expanded=true]::after {

    content: "\f054";

    border: 0;

    font-family: "Font Awesome 5 Free";

    -webkit-transform: rotate(90deg);

    transform: rotate(90deg);

    top: calc(var(--accordion-padding) / 2 + 0px);

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    transform: rotate(90deg) !important;

    background-color: transparent !important;

    color: hsl(var(--dark));

}



.setting-content .table * {

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

}



/* ======================  Db-settings End  ======================*/

/* ======================  Notifications Settings Start  ======================*/

.notification-settings__item {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    border-bottom: 1px solid hsl(var(--body-color)/0.5);

    padding-block: 12px;

}



.notification-settings__item:last-child {

    border-bottom: 0;

}



.notification-settings__item-content {

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

}



.notification-settings__item-title {

    margin-bottom: 0;

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

    font-size: 1.25rem;

    font-weight: 500;

}



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

    .notification-settings__item-title {

        font-size: 1.125rem;

    }

}



.notification-settings__item-description {

    font-size: 1rem;

}



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

    .notification-settings__item-description {

        font-size: 0.875rem;

    }

}



.notification-settings__item .form--switch .form-check-input {

    height: 24px;

    width: 48px;

}



.notification-settings__item .form--switch .form-check-input::before {

    width: 20px;

    height: 20px;

    left: 3px;

}



.notification-settings__item .form--switch .form-check-input:checked {

    background-color: hsl(var(--base-two)) !important;

}



.notification-settings__item .form--switch .form-check-input:checked::before {

    left: calc(100% - 23px);

    background-color: hsl(var(--base-two));

}



/* ======================  Notifications Settings End  ======================*/

/* ======================  Catalog-page Start  ======================*/

.catalog-heading__wrapper {

    margin-bottom: 32px;

}



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

    .catalog-heading__wrapper {

        margin-bottom: 28px;

    }

}



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

    .catalog-heading__wrapper {

        margin-bottom: 22px;

    }

}



.catalog-heading__title {

    margin-bottom: 16px;

}



.catalog-heading__title:has(+ .catalog-heading__desc) {

    margin-bottom: 0px;

}



.catalog-heading__desc {

    margin-bottom: 16px;

}



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

    .catalog-heading__desc {

        font-size: 1.125rem;

    }



    .catalog-heading__title {

        margin-bottom: 12px;

    }

}



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

    .catalog-heading__desc {

        font-size: 1rem;

    }



    .catalog-heading__title {

        margin-bottom: 8px;

    }

}



/* ======================  Catalog-page End  ======================*/

/* ======================  Product-details Start  ======================*/

.product-info .product-thumb-preview {

    width: 100%;

    height: 600px;

    border: 1px solid hsl(var(--border-color));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: end;

    -ms-flex-align: end;

    align-items: flex-end;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    background: hsl(var(--section-bg));

    border-radius: 4px;

}



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

    .product-info .product-thumb-preview {

        height: 515px;

    }

}



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

    .product-info .product-thumb-preview {

        height: 430px;

    }

}



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

    .product-info .product-thumb-preview {

        height: 315px;

    }

}



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

    .product-info .product-thumb-preview {

        height: 487px;

    }

}



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

    .product-info .product-thumb-preview {

        height: 487px;

    }

}



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

    .product-info .product-thumb-preview {

        height: auto;

        aspect-ratio: 1.06/1;

    }

}



.product-info .product-thumb-preview img {

    width: 100% !important;

    height: 100%;

    -webkit-box-shadow: unset;

    box-shadow: unset;

    object-fit: cover;

    object-position: top;

    border-radius: inherit;

}



.product-info .product-thumb-list {

    width: 100%;

    padding-top: 8px;

}



.product-info .product-thumb-list:hover .slick-arrow {

    opacity: 1;

}



.product-info .product-thumb-list .slick-arrow {

    --size: 32px;

    --fontSize: 16px;

    opacity: 0.4;

}



.product-info .product-thumb-list .thumb-next {

    right: calc((var(--size) / 2 - 8px) * -1);

}



.product-info .product-thumb-list .thumb-prev {

    left: calc((var(--size) / 2 - 8px) * -1);

}



.product-info .product-thumb-item {

    height: 90px;

    border: 1px solid hsl(var(--border-color));

    background-color: hsl(var(--section-bg));

    border-radius: 4px;

    display: -webkit-inline-box !important;

    display: -ms-inline-flexbox !important;

    display: inline-flex !important;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.product-info .product-thumb-item img {

    width: 100%;

    height: 100%;

    text-align: center;

    object-fit: cover;

    object-position: top;

    border-radius: inherit;

}



.product-info .product-thumb .slick-initialized.slick-slider .slick-slide {

    height: auto;

    padding: 0;

    padding-inline: 4px;

}



.product-info .product-thumb .slick-slide.first-active:is(:first-child) {

    padding-left: 0 !important;

}



.product-info .product-thumb .slick-slide.last-active:is(:last-child) {

    padding-right: 0 !important;

}



.product-info .product-thumb .slick-initialized.slick-slider {

    margin: 0;

}



.product-info__supplier-name {

    font-size: 1.125rem;

    font-weight: 500;

}



.product-info__basic {

    margin-bottom: 24px;

}



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

    .product-info__basic {

        margin-bottom: 16px;

    }

}



.product-info__short-desc {

    flex: 1;

    max-height: 350px;

    overflow: auto;



}



.product-info__short-desc::-webkit-scrollbar {

    width: 4px;

    background: #f1f1f1;

    border-radius: 4px;

}



.product-info__short-desc::-webkit-scrollbar-thumb {

    background: hsl(var(--base-two)/0.5);

    border-radius: 4px;

}



.product-info__short-desc::-webkit-scrollbar-thumb:hover {

    background: hsl(var(--base-two)/0.5);

}



.product-info__short-desc:has(.product-info__short-desc-info) {

    border: 1px solid hsl(var(--border-color));

}



.product-info__short-desc-info {

    padding: 10px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 10px;

}



.product-info__short-desc-info:not(:last-child) {

    border-bottom: 1px solid hsl(var(--border-color));

}



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

    .product-info__short-desc-info {

        padding: 8px;

    }

}



.product-info__short-desc-icon {

    font-size: 18px;

}



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

    .product-info__short-desc-icon {

        font-size: 16px;

    }

}



.product-basic-design {

    border: 1px solid hsl(var(--border-color));

    border-radius: 4px;

}



.product-basic-design__item {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 10px 16px;

}



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

    .product-basic-design__item {

        padding: 10px 10px;

    }

}



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

    .product-basic-design__item {

        padding: 10px 8px;

    }

}



.product-basic-design__item:not(:last-child) {

    border-bottom: 1px solid hsl(var(--border-color));

}





.product-info__price {

    margin-top: 24px;

    padding: 10px 16px;

    background-color: hsl(var(--base-two)/0.1);

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 20px;

}



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

    .product-info__price {

        margin-top: 20px;

        gap: 18px;

    }

}



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

    .product-info__price {

        margin-top: 18px;

        gap: 15px;

    }

}



.product-info__price-amount {

    margin-bottom: 0;

    color: hsl(var(--base-two));

}



.product-info__price-text {

    font-size: 20px;

    font-weight: 500;

}



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

    .product-info__price-text {

        font-size: 18px;

    }

}



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

    .product-info__price-text {

        font-size: 16px;

    }

}



.product-info__start-design {

    margin-top: 32px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: 20px 32px;

    font-size: 16px;

    font-weight: 500;

    background-color: hsl(var(--base));

    color: hsl(var(--black)) !important;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

}



.product-info__start-design.disabled {

    pointer-events: none;

    background-color: color-mix(in srgb, hsl(var(--base)) 70%, #fff);

}



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

    .product-info__start-design {

        margin-top: 20px;

    }

}



.product-info__start-design:hover {

    background-color: hsl(var(--base-d-200));

}



.product-info__notice {

    font-size: 16px;

    font-weight: 400;

    margin-top: 16px;

}



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

    .product-info__notice {

        margin-top: 10px;

    }

}



.product-info__details-tab {

    margin-top: 55px;

}



.product-info__details-tab .nav-item {

    border: 0;

}



.product-info__details-tab .nav-tabs {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 8px;

}



.product-info__details-tab .btn {

    border-radius: 0;

    background-color: hsl(var(--light));

    font-size: clamp(0.75rem, 0.4507rem + 2.3438vw, 2rem);

    padding: 12px 24px;

    color: hsl(var(--dark)/0.6);

    margin-bottom: 0;

    line-height: 1.1;

}



@media screen and (max-width:768px) and (min-width:575px) {

    .product-info__details-tab .btn {

        font-size: 18px;



    }

}



@media screen and (max-width:768px) and (min-width:575px) {

    .product-info__details-tab .btn {

        font-size: 18px;



    }

}



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

    .product-info__details-tab .btn {

        font-size: 16px;

        padding: 10px 14px;

    }

}



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

    .product-info__details-tab .btn {

        font-size: 14px;

        padding: 8px 10px;

    }

}



.product-info__details-tab .btn.active {

    background-color: hsl(var(--base));

    color: hsl(var(--dark));

}



.supplier-list {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 24px;

}



.supplier-list .supplier-item {

    background-color: hsl(var(--section-bg));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -ms-flex-wrap: wrap-reverse;

    flex-wrap: wrap-reverse;

    padding: 10px;

    gap: 15px;

    border-radius: 4px;

}



.supplier-list .supplier-item__btns {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 16px;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

}



.supplier-list .supplier-item__btns .btn {

    padding: 12px 24px;

}



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

    .supplier-list .supplier-item__btns .btn {

        padding: 10px 18px;

    }

}



.supplier-list .supplier-item__btns .btn.btn--base-two {

    background-color: hsl(var(--base-two)/0.2) !important;

}



.supplier-list .supplier-item__btns .btn.btn--base-two:hover {

    background-color: hsl(var(--base-two)/0.4) !important;

}



.supplier-list .supplier-item__title {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 5px;

}



@media screen and (min-width: 991px) {

    .supplier-list .supplier-item__title {

        max-width: calc(100% - 320px);

    }

}



.supplier-list .supplier-item__title .text {

    margin-bottom: 0;

}



.supplier-list .supplier-item__title .ratting {

    background-color: hsl(var(--base-two)/0.1);

    padding: 3px 5px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 3px;

    -ms-flex-negative: 0;

    flex-shrink: 0;

}



.supplier-list .supplier-item__title .ratting .ratting-icon {

    color: hsl(var(--warning));

}



.supplier-list .supplier-item__details {

    -ms-flex-preferred-size: 100%;

    flex-basis: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    margin-top: 18px;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    gap: 15px;

}



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

    .supplier-list .supplier-item__details {

        margin-top: 18px;

    }

}



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

    .supplier-list .supplier-item__details {

        margin-top: 0px;

    }

}



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

    .supplier-list .supplier-item__details {

        -webkit-box-pack: start;

        -ms-flex-pack: start;

        justify-content: flex-start;

    }

}



.supplier-list .supplier-item__details-color {

    max-width: 235px !important;

}



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

    .supplier-list .supplier-item__details-color {

        max-width: 100% !important;

        gap: 40px !important;

    }

}



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

    .supplier-list .supplier-item .supplier-info {

        -webkit-box-flex: 1;

        -ms-flex-positive: 1;

        flex-grow: 1;

        max-width: 33.33%;

    }

}



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

    .supplier-list .supplier-item .supplier-info {

        -webkit-box-flex: 1;

        -ms-flex-positive: 1;

        flex-grow: 1;

        max-width: 48%;

    }

}



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

    .supplier-list .supplier-item .supplier-info {

        -webkit-box-flex: 1;

        -ms-flex-positive: 1;

        flex-grow: 1;

        max-width: 100%;

        width: 100%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        gap: 10px;

    }



    .supplier-list .supplier-item .supplier-info .supplier-info__title {

        max-width: 40%;

        -ms-flex-negative: 0;

        flex-shrink: 0;

    }

}



.supplier-list .supplier-item .supplier-info__title {

    font-size: 16px;

    font-weight: 500;

    margin-bottom: 5px;

}



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

    .supplier-list .supplier-item .supplier-info__title {

        margin-bottom: 2px;

    }

}



.supplier-list .supplier-item .supplier-info__body {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 8px;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



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

    .supplier-list .supplier-item .supplier-info__body {

        gap: 5px;

    }

}



.supplier-list .supplier-item .supplier-info__bodya,

.supplier-list .supplier-item .supplier-info__body a {

    border-bottom: 1px dashed hsl(var(--dark));

}



.supplier-list .supplier-item .supplier-info__body .body__thumb {

    height: 24px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}



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

    .supplier-list .supplier-item .supplier-info__body .body__thumb {

        height: 18px;

    }

}



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

    .supplier-list .supplier-item .supplier-info__body .body__thumb {

        height: 16px;

    }

}



.supplier-list .supplier-item .supplier-info__body .body-text {

    font-size: 1.125rem;

    font-weight: 500;

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

}



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

    .supplier-list .supplier-item .supplier-info__body .body-text {

        font-size: 1rem;

        font-weight: 600;

    }

}



.supplier-list .supplier-item .supplier-info__body .color-item {

    --size: 20px;

    width: var(--size);

    height: var(--size);

    border-radius: 50%;

    border: 1px solid hsl(var(--border-color));

    background-color: var(--bg-color);

    -ms-flex-negative: 0;

    flex-shrink: 0;

}



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

    .supplier-list .supplier-item .supplier-info__body .color-item {

        --size: 15px;

    }

}



.product-breadcrumb__wrapper {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.product-breadcrumb__link::after {

    content: "/";

    padding-inline: 5px;

}



.product-breadcrumb__link:last-child::after {

    display: none;

}



.sold-together__list {

    position: relative;

}



@media screen and (min-width: 1399px) {

    .sold-together__list-wrapper {

        padding-inline: 60px;

    }

}



.sold-together .thumb-next {

    right: 0px;

}



@media screen and (min-width: 1399px) {

    .sold-together .thumb-next {

        right: -48px;

    }

}



.sold-together .thumb-prev {

    left: 0px;

}



@media screen and (min-width: 1399px) {

    .sold-together .thumb-prev {

        left: -48px;

    }

}



.sold-together .slick-arrow {

    top: 130px;

    -webkit-transition: unset;

    transition: unset;

}



/* ======================  Product-details End  ======================*/

/* ======================  Contact Start  ======================*/

.contact-banner__inner {

    background-color: hsl(var(--section-bg));

    border-radius: 4px;

    padding: 40px;

    text-align: center;

}



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

    .contact-banner__inner {

        padding: 30px;

    }

}



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

    .contact-banner__inner {

        padding: 20px;

    }

}



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

    .contact-banner__inner {

        padding: 15px;

    }

}



.contact-banner__icon {

    width: 80px;

    height: 80px;

    background-color: hsl(var(--base-two)/0.1);

    border: 1px solid hsl(var(--base-two));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin-inline: auto;

    color: hsl(var(--base-two));

    font-size: 40px;

    border-radius: 4px;

    margin-bottom: 40px;

}



.contact-banner__feature {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    gap: 30px;

    margin-top: 30px;

}



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

    .contact-banner__feature {

        gap: 20px;

    }

}



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

    .contact-banner__feature {

        gap: 15px;

    }

}



.contact-banner__feature-item {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    border: 1px solid hsl(var(--base-two));

    padding: 5px 15px;

    border-radius: 4px;

    gap: 10px;

}



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

    .contact-banner__feature-item {

        width: 100%;

        -webkit-box-flex: 1;

        -ms-flex: 1 1 100%;

        flex: 1 1 100%;

    }

}



.contact-banner__feature-icon {

    color: hsl(var(--base-two));

}



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

    .contact-banner__feature-text {

        font-size: 18px;

    }

}



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

    .contact-banner__feature-text {

        font-size: 16px;

    }

}



.contact-info__item {

    background-color: hsl(var(--section-bg));

    border-radius: 5px;

    padding: 15px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    border: 1px solid hsl(var(--border-color));

    position: relative;

    margin-bottom: 25px;

}



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

    .contact-info__item {

        margin-bottom: 18px;

    }

}



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

    .contact-info__item {

        margin-bottom: 14px;

    }

}



.contact-info__item:last-child {

    margin-bottom: 0;

}



.contact-info__item:hover {

    -webkit-box-shadow: 0 0 4px 6px hsl(var(--base-two)/0.04);

    box-shadow: 0 0 4px 6px hsl(var(--base-two)/0.04);

}



.contact-info__item:hover .icon {

    border-color: hsl(var(--base-two)) !important;

    color: hsl(var(--base-two));

}



.contact-info__item .icon {

    width: 40px;

    height: 40px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    border-radius: 4px;

    border: 1px solid hsl(var(--border-color));

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

}



.contact-info__item .title {

    font-size: 18px;

    color: hsl(var(--dark));

}



.contact-info__item a {

    text-decoration: underline;

}



.contact-info__item a::before {

    content: '';

    display: inline-block;

    position: absolute;

    inset: 0;

    border-radius: inherit;

}



.contact-info__social {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    padding: 20px;

    margin-top: 30px;

    gap: 10px;

    background: hsl(var(--section-bg));

    border: 1px solid hsl(var(--border-color));

    max-width: -webkit-fit-content;

    max-width: -moz-fit-content;

    max-width: fit-content;

    border-radius: 5px;

}



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

    .contact-info__social {

        padding: 15px;

        margin-top: 20px;

    }

}



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

    .contact-info__social {

        margin-top: 16px;

    }

}



.contact-info__social-item {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    border-radius: 4px;

    border: 1px solid hsl(var(--border-color));

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    font-size: 20px;

}



.contact-info__social-item:hover,

.contact-info__social-item:focus {

    border: 1px solid hsl(var(--base-two));

    color: hsl(var(--base-two));

}



.contact-form {

    border-radius: 5px;

    background-color: hsl(var(--section-bg));

    border: 1px solid hsl(var(--border-color));

    padding: 40px;

}



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

    .contact-form {

        padding: 30px;

    }

}



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

    .contact-form {

        padding: 20px;

    }

}



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

    .contact-form {

        padding: 10px;

    }

}



.cursor-pointer {

    cursor: pointer !important;

}



.contact-form .form--control {

    border-color: hsl(var(--dark)/0.4);

}



/* ======================  Contact End  ======================*/

.empty-list {

    margin-block: 100px;

    text-align: center;

    width: 100%;

}



.empty-list img {

    max-width: 120px;

    max-height: 300px;

    object-fit: contain;



}



.attribute-value-wrapper {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    flex-wrap: wrap;

}



.attributeValueArea .attribute-name {

    font-size: 1rem;

    font-weight: 500;

    color: hsl(var(--black)/0.7);

}



.attribute-value-wrapper .attribute-value {

    cursor: pointer;

    border: 1px solid hsl(var(--border-color));

    border-radius: 0px;

    padding: 5px;

    transition: all 0.3s;

    min-width: 35px;

    max-width: fit-content;

    width: 100%;

    height: 35px;

}



.attribute-value-wrapper .attribute-value>span {

    width: 100%;

}



.attribute-value-wrapper .attribute-value:hover {

    border-color: hsl(var(--base-two));

}



.attribute-value-wrapper .attribute-value input[type="radio"] {

    display: none;

}



.attribute-value-wrapper .attribute-value:has(input[type="radio"]:checked) {

    border-color: hsl(var(--base-two));

    box-shadow: inset 0 0 3px 2px hsl(var(--base-two) / 0.2);

}



/* ==================== Review Section ==================== */



.all-review {

    display: flex;

    gap: 60px;

    border-bottom: 1px solid hsl(var(--border-color));

    padding-block: 40px;

}



.all-review .average-rating {

    display: flex;

    align-items: flex-end;

    gap: 10px;

    font-weight: 600;

    font-size: 48px;

    line-height: 1;

    color: hsl(var(--black));

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

    margin-bottom: 6px;

}



.all-review .average-rating .total_number {

    font-size: 28px;

    color: hsl(var(--black)/ 0.5);

    line-height: 1;

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

}



.all-review .total-review {

    font-size: 24px;

    color: hsl(var(--warning));

}



.all-review .review-item {

    display: flex;

    align-items: center;

    gap: 20px;

}



.all-review .review-item__star {

    display: flex;

    align-items: center;

    gap: 4px;

    color: hsl(var(--warning));

    font-size: 14px;

    font-weight: 600;

}



.all-review .review-item__star .fa-regular {

    color: hsl(var(--warning)/0.6);

}



.all-review .review-item__content {

    display: flex;

    align-items: center;

    gap: 10px;

}



.all-review .review-item__line {

    width: 135px;

    height: 10px;

    background-color: hsl(var(--dark)/0.1);

    position: relative;

}



.all-review .review-item__line:after {

    content: "";

    position: absolute;

    inset: 0;

    background-color: hsl(var(--warning));

    width: var(--fill, 0%);

}



.all-review .all-review__list {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.all-review .total-review__text {

    font-weight: 600;

    color: hsl(var(--dark)/0.5);

    margin-top: 5px;

}





.all-review {

    display: flex;

    gap: 60px;

    border-bottom: 1px solid hsl(var(--border-color));

    padding-block: 40px;





    .average-rating {

        display: flex;

        align-items: flex-end;

        gap: 10px;

        font-weight: 600;

        font-size: 48px;

        line-height: 1;

        color: hsl(var(--black));

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

        margin-bottom: 6px;



        .total_number {

            font-size: 28px;

            color: hsl(var(--black)/ 0.5);

            line-height: 1;

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

        }

    }



    .total-review {

        font-size: 24px;

        color: hsl(var(--warning));

    }



    .review-item {

        display: flex;

        align-items: center;

        gap: 20px;

    }



    .review-item__star {

        display: flex;

        align-items: center;

        gap: 4px;

        color: hsl(var(--warning));

        font-size: 14px;

        font-weight: 600;



        .fa-regular {

            color: hsl(var(--warning)/0.6);

        }

    }



    .review-item__content {

        display: flex;

        align-items: center;

        gap: 10px;

    }



    .review-item__line {

        width: 135px;

        height: 10px;

        background-color: hsl(var(--dark)/0.1);

        position: relative;



        &:after {

            content: "";

            position: absolute;

            inset: 0;

            background-color: hsl(var(--warning));

            width: var(--fill, 0%);

        }

    }



    .all-review__list {

        display: flex;

        flex-direction: column;

        gap: 5px;

    }



    .total-review__text {

        font-weight: 600;

        color: hsl(var(--dark)/0.5);

        margin-top: 5px;

    }



}



.rating-list {

    display: flex;

    align-items: center;

    gap: 5px;

    max-width: fit-content;

    color: hsl(var(--warning));

    font-weight: 500;

}



.single-review {

    padding-block: 40px;

    border-bottom: 1px solid hsl(var(--border-color));

}



.single-review__title {

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

    font-size: 20px;

    font-weight: 600;

    margin-bottom: 12px;

}



.single-review__reviewer {

    font-size: 16px;

    font-weight: 400;

    color: hsl(var(--dark)/0.5);

    margin-top: 12px;

    display: flex;

    gap: 6px;

    align-items: center;

}



.single-review__item:not(:last-child) {

    padding-bottom: 20px;

    margin-bottom: 20px;

    border-bottom: 1px solid hsl(var(--border-color)/0.5);

}



.single-review__content {

    font-size: 16px;

    color: hsl(var(--dark)/0.8);

}



.single-review__name {

    font-weight: 600;

    text-decoration: underline;

}



.printable-area {

    background-color: hsl(var(--white));

    border: 1px solid hsl(var(--border-color));

    border-radius: 4px;

    padding: 10px;

    margin-bottom: 10px;

}



.printable-area::focus-visible {

    outline: 0;

}



.canvas-zoom {

    display: flex;

    align-items: center;

    position: absolute;

    bottom: 30px;

    left: 20px;

    background-color: hsl(var(--white));

    border-radius: 4px;

    box-shadow: 0 0 4px 0 hsl(var(--black)/0.4);



}





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

    .canvas-zoom {

        bottom: 54px;

    }



    .text-tools {

        justify-content: flex-start !important;

    }

}





.designer-canvas:has(.canvas-position__btn.active-move) {

    cursor: grab !important;



    canvas {

        cursor: grab !important;

    }

}



.canvas-zoom__btn {

    min-width: 30px;

    padding: 0;

    height: 30px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s;

    max-width: fit-content;

    padding: 4px;

    border: 1px solid transparent;

    color: hsl(var(--dark));



    &:hover {

        background-color: hsl(var(--base-two)/0.1);

        border-color: hsl(var(--base-two));

    }



    &.zoom-reset {

        font-size: 14px;

        font-weight: 500;

        color: hsl(var(--dark)/0.5);

    }

}



.canvas-fit {

    display: flex;

    align-items: center;

    position: absolute;

    top: 20px;

    left: 20px;

    background-color: hsl(var(--white));

    border-radius: 4px;

    box-shadow: 0 0 4px 0 hsl(var(--black)/0.4);

}



.canvas-fit__btn {

    min-width: 30px;

    padding: 0;

    height: 30px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s;

    max-width: fit-content;

    padding: 4px;

    border: 1px solid transparent;

    color: hsl(var(--black)/0.5);



    &:hover {

        background-color: hsl(var(--base-two)/0.1);

        border-color: hsl(var(--base-two));

    }



    &.zoom-reset {

        font-size: 14px;

        font-weight: 500;

        color: hsl(var(--dark)/0.5);

    }

}



.canvas-position {

    position: absolute;

    bottom: 30px;

    right: 20px;

    background-color: hsl(var(--white));

    border-radius: 4px;

    box-shadow: 0 0 4px 0 hsl(var(--black)/0.4);

    padding: 4px;

    display: flex;

    align-items: center;

    gap: 4px;

}



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

    .canvas-position {

        bottom: 54px;

    }

}





.canvas-position__btn {

    min-width: 30px;

    padding: 0;

    height: 30px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: hsl(var(--dark), 0.6);

}



.canvas-position__btn .move-mode-active {

    display: block;

}



.canvas-position__btn .move-mode-not-active {

    display: none;

}



.canvas-position__btn.active-move .move-mode-not-active {

    display: block;

}



.canvas-position__btn.active-move .move-mode-active {

    display: none;

}



.canvas-delete {

    position: absolute;

    top: 10px;

    right: 20px;

    background-color: hsl(var(--white));

    border-radius: 4px;

    padding: 0px;

}



.full-screen {

    position: absolute;

    top: 10px;

    left: 20px;

    background-color: hsl(var(--white));

    border-radius: 4px;

    padding: 0px;

}



.full-screen .btn {

    box-shadow: 0 0 4px 0 hsl(var(--black)/0.4);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    width: 30px;

    height: 30px;

    padding: 0;

    border-radius: 4px;

    font-size: 18px;

    color: hsl(var(--dark), 0.6);

    border: 1px solid transparent;

}



.full-screen .btn:hover,

.full-screen .btn:focus,

.full-screen .btn:active {

    background-color: hsl(var(--base-two)/0.08);

    border-color: hsl(var(--base-two)/0.4);

    color: hsl(var(--base-two));

    box-shadow: 0 0 4px 0 hsl(var(--base-two)/0.1);

}



@media screen and (max-width:991px) and (min-width:768px) {

    .canvas-delete {

        right: 20px;

    }

}



.canvas-delete.delete-all {

    top: 50px;

}



.canvas-delete .btn {

    box-shadow: 0 0 4px 0 hsl(var(--black)/0.4);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    width: 30px;

    height: 30px;

    padding: 0;

    border-radius: 4px;

    font-size: 14px;

    color: hsl(var(--dark), 0.6);

    border: 1px solid transparent;

}



.canvas-delete .btn svg {

    width: 16px;

    height: 16px;

}



.canvas-delete .btn:hover,

.canvas-delete .btn:focus,

.canvas-delete .btn:active {

    background-color: hsl(var(--danger)/0.08);

    border-color: hsl(var(--danger)/0.4);

    color: hsl(var(--danger));

    box-shadow: 0 0 4px 0 hsl(var(--danger)/0.1);

}



.design-option__list {

    gap: 8px;

    border-bottom: 1px solid hsl(var(--border-color));

}



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

    .design-option__list {

        gap: 0px;

    }

}



.design-option__item {

    padding-bottom: 8px;

    border-bottom: 2px solid transparent;



    &:has(.design-option__btn.active) {

        border-bottom: 2px solid hsl(var(--base-two));



    }



    &:has(.design-option__btn:hover:not(.active)) {

        border-bottom: 2px solid hsl(var(--black));

        color: hsl(var(--dark));

    }

}



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

    .design-option__item .btn {

        padding-inline: 10px;

    }

}



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

    .design-option__item .btn {

        padding-inline: 5px;

    }

}



.design-option__btn {

    display: flex !important;

    flex-direction: column;

    text-align: center;

    text-align: center;

    border: 0 !important;

    border-radius: 0 !important;

    color: hsl(var(--dark)/0.6);

    width: 100%;

    font-size: 14px;

    position: relative;

    z-index: 9;



    &:hover {

        color: hsl(var(--dark));

    }



    i {

        font-size: 22px;

    }

}



.design-tools__container {

    width: 200px;

    margin: 0 auto;

    display: flex;

    align-items: flex-start;

    gap: 8px;

    flex-wrap: wrap;

    justify-content: center;

    border-right: 1px solid hsl(var(--border-color));

    padding-right: 10px;

}



.design-tools {

    flex-wrap: nowrap !important;

}



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

    .design-tools__container {

        border-right: none;

        border-bottom: 1px solid hsl(var(--border-color));

        padding-bottom: 20px;

        margin-bottom: 20px;

    }



    .design-tools {

        flex-wrap: wrap !important;

    }

}



.designer-canvas {

    max-width: 100%;



    .canvas {

        max-width: 100%;

    }

}



.canvas-container {

    max-width: 100%;

}



.design-tools .canvas-container {

    margin-inline: auto;

    border: 1px solid hsl(var(--border-color));

    border-radius: 4px;

    padding: 10px;

    padding-top: 0;

    border: 0;

}



.product-list__item-img {

    width: 70px;

    height: 70px;

    border: 1px solid hsl(var(--border-color));

    transition: all 0.3s ease;

}



.print-product-list__item-img {

    width: 70px;

    height: 70px;

    border: 1px solid hsl(var(--border-color));

    transition: all 0.3s ease;

}



.print-product-list__item .nav-link.active {

    background-color: transparent !important;



    .print-product-list__item-img {

        border: 1px solid hsl(var(--base-two));

    }

}



.print-product-list__item:hover {

    font-size: 14px;

    font-weight: 400;



    .print-product-list__item-img {

        border: 1px solid hsl(var(--base-two));

    }

}



.print-product-list__item-name {

    font-size: 14px;

    font-weight: 400;

}



.nav-link {

    padding: 0;

}







/* cart page design start here */

.cart-header {

    background-color: hsl(var(--white));

    padding: 24px;

    border-radius: 4px;

    border: 1px solid hsl(var(--black)/0.1);

}



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

    .cart-header {

        padding: 20px;

    }

}



.cart-header__title {

    margin-bottom: 5px;

}



.cart-header .desc {

    font-size: 1rem;

    color: hsl(var(--text-color));

    margin-bottom: 20px;

}



.cart-header__action li {

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

    font-size: 1rem;

    margin-right: 25px;

    position: relative;

}



.cart-header__action li:after {

    content: "";

    position: absolute;

    left: -10px;

    height: 100%;

    width: 1px;

    background-color: hsl(var(--border-color));

}



.cart-header__action li:first-child:after {

    display: none;

}



.cart-header__action li .form-check-label {

    color: hsl(var(--text-color));

    font-size: 1rem;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    font-weight: 500;

}



.cart-header__action li button {

    color: hsl(var(--text-color));

}



.cart .checkout-information,

.cart .checkout-box__inner {

    padding: 24px;

    background-color: hsl(var(--white));

    border-radius: 4px;

    margin-bottom: 16px;

    border: 1px solid hsl(var(--black)/0.1);



}



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



    .cart .checkout-information,

    .cart .checkout-box__inner {

        padding: 20px;

    }

}



.checkout-information__list {

    border-bottom: 1px solid hsl(var(--black)/0.1);

    margin-bottom: 20px;

    font-size: 0.875rem;

}



.checkout-information__list li {

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    justify-content: space-between;

    margin-bottom: 15px;

}



.checkout-information__list li:last-child {

    margin-bottom: none;

}



.checkout-information__list span {

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

    font-weight: 500;

}



.checkout-information__list span:last-child {

    font-weight: 600;

}



.checkout-information__list span:first-child {

    color: hsl(var(--text-color));

}



.checkout-information__total {

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    justify-content: space-between;

    margin-bottom: 15px;

}



.checkout-information__total span {

    font-weight: 600;

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

}



.checkout-information__total span:last-child {

    font-size: 1.25rem;

}





/* cart page design end here */

.cart-table .product-sidebar-item__img {

    max-width: 60px;

}



.cart-table .product-sidebar-item__title {

    font-size: 20px;

}



.cart-table table th,

.cart-table table td {

    white-space: nowrap;

}



.cart-table table td {

    max-width: unset !important;

}



.cart-table .qnty-cart-list {

    min-width: 160px;

}



.cart-table .product-sidebar-item {

    gap: 10px;

}



.cart-item-bottom__content p {

    font-size: 15px;

    font-weight: 400;

    color: hsl(var(--text-color));

}





/* empty message  */

.empty-message {

    width: 100%;

    text-align: center;

    min-height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}



.empty-message-icon {

    max-width: 120px;

    width: 100%;

}



.empty-message-text {

    font-weight: 500;

    font-size: 0.875rem;

}



/* ================= Product increment decrement css Start ================ */

.qnty-cart-list {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

}



.qnty-cart-list .product-qty {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    gap: 8px;

    padding: 4px;

    background: hsl(var(--dark)/0.06);

    border-radius: 4px;

}



.qnty-cart-list .product-qty input[type=number] {

    -moz-appearance: textfield;

}



.qnty-cart-list .product-qty .product-qty__value:focus {

    outline: none;

}



.qnty-cart-list .product-qty__btn {

    width: 25px;

    height: 25px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    text-align: center;

    border-radius: 2px;

    font-size: 0.75rem;

    font-weight: 600;

    background-color: hsl(var(--white));

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

    border: 1px solid hsl(var(--border-color));

    transition: all 0.3s;

}



.qnty-cart-list input.product-qty__btn {

    border: 1px solid transparent !important;

    color: hsl(var(--black)) !important;

    font-size: 16px !important;

}



.qnty-cart-list .product-qty__btn:hover {

    color: hsl(var(--base-two));

    border: 1px solid hsl(var(--base-two));

}



.product-qty__value {

    border: none;

    font-weight: 600;

    background-color: transparent !important;

}



.action-button-group {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: end;

    gap: 8px;

}



.action-button-group .action-button {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid hsl(var(--border-color));

    color: hsl(var(--dark)/0.5);

    border-radius: 2px;

    font-size: 0.75rem;

    -webkit-transition: 0.3s;

    transition: 0.3s;

    font-size: 16px;

}



.action-button-group .action-button:hover {

    color: hsl(var(--base));

    border: 1px solid hsl(var(--base));

}



.action-button-group .action-button:last-child:not(.edit):hover {

    color: hsl(var(--danger));

    border: 1px solid hsl(var(--danger));

}



.action-button.delete:hover {

    color: hsl(var(--danger));

    border: 1px solid hsl(var(--danger));

}



.notification-area__list {

    max-height: 480px;

    overflow: auto;

    scrollbar-width: thin;

    scrollbar-color: hsl(var(--base-two)) hsl(var(--light));

    height: 100%;

}



.notification-area__list:has(.notification-emtpy) {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.notification-area__list::-webkit-scrollbar {

    width: 8px;

    background: hsl(var(--light));

}



.notification-area__list::-webkit-scrollbar-thumb {

    background: hsl(var(--base-two));

    border-radius: 4px;

}



.notification-area__list::-webkit-scrollbar-thumb:hover {

    background: hsl(var(--base));

}



.notification-area__footer {

    border-top: 1px solid hsl(var(--border-color));

}



/* ================= Product increment decrement css End ================ */

.shipping-list {

    max-height: 300px;

    overflow: auto;

    scrollbar-width: thin;

    mask-image: linear-gradient(to bottom, black 90%, transparent);

    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent);

}



/* 

.shipping-list::-webkit-scrollbar {

    width: 8px;

    background: hsl(var(--light));

}



.shipping-list::-webkit-scrollbar-thumb {

    background: hsl(var(--base-two));

    border-radius: 4px;

}



.shipping-list::-webkit-scrollbar-thumb:hover {

    background: hsl(var(--base));

} */



/* For Firefox */

/* .shipping-list {

    scrollbar-width: thin;

    scrollbar-color: hsl(var(--base-two)) hsl(var(--light));

} */

.address-accordion .accordion-button::after {

    top: 12px !important;

    right: 0 !important;

}



.address-accordion .accordion-button {

    all: unset;

    background: none;

    border: none;

    margin: 0;

    padding: 0;

    font: inherit;

    color: inherit;

    cursor: pointer;

}



.address-accordion label {

    cursor: pointer;

}



.address-info .address-info__item {

    display: flex;

    align-items: center;

    justify-content: space-between;





}



.address-info__item:not(:last-child) {

    padding-bottom: 5px;

}



.clamp-1 {

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



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

    .design-tools__container {

        width: 100%;

    }



    .design-tools__item {

        width: 100%;

    }



    .footer-message p {

        font-size: 16px;



    }

}



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

    .design-tools__container {

        width: 100%;

    }



    .design-tools__item {

        width: 100%;

    }



    .footer-message {

        p {

            font-size: 13px;

        }

    }



    .design-option__btn {

        padding-inline: 5px;

    }

}



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

    .design-option__item .text {

        display: none;

    }



    .design-option__btn {

        padding-inline: 6px;

    }

}



.single-product-item .thumb {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    background: hsl(var(--white));

    border-radius: 5px;

    overflow: hidden;

    width: 60px;

    height: 60px;

    flex-shrink: 0;

}



.single-product-item .thumb img {

    border-radius: 5px;

    border: 1px solid hsl(var(--border-color));

    max-width: 100%;

    max-height: 100%;

    height: 100%;

}



.details-info-address {

    border: 1px solid hsl(var(--border-color));

    border-radius: 6px;

    padding: 16px;

}



.info-address-list li {

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 24px;

    margin-bottom: 10px;

}



.info-address-list li:last-child {

    margin-bottom: 0;

}



.info-address-list li .title {

    min-width: 81px;

    color: hsl(var(--black) / 0.6);

    flex-shrink: 0;

}



.info-address-list .divide-colon {

    margin-right: 24px;

}



.details-info-list {

    padding-block: 16px;

    border: 1px solid hsl(var(--border-color));

    border-radius: 6px;

}



.details-info-list li {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;

    padding-inline: 16px;

}



.details-info-list li:not(:last-child) {

    margin-bottom: 12px;

}



.fw-semibold {

    font-weight: 600 !important;

}



.details-info-list h4 {

    padding-inline: 16px;

}



.details-info-list li.total {

    border-top: 1px solid hsl(var(--border-color));

    padding-top: 12px;

    font-size: 1rem;

}



.print-preview-item {

    width: calc(50% - 5px);

    aspect-ratio: 1.1;

    object-fit: cover;

}



.print-preview-item img {

    border: 1px solid transparent;

    transition: all 0.3s;

    cursor: pointer;

}



.print-preview-item:hover:not(.active) img {

    border: 1px solid hsl(var(--border-color));

}



.print-preview-item .print-preview-list__img {

    width: calc(100% - 5px);

    aspect-ratio: 1.1;

    height: 65px;

    object-fit: cover;

}



.print-preview-item__img {

    width: 300px;

    height: 400px;

    object-fit: cover;

}



.slick-list {

    overflow: hidden;

}



.print-preview {

    max-height: 400px;

}



.print-preview-list {

    max-width: 200px;

    width: 100%;

    flex-shrink: 0;

    padding-left: 10px;

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;

    align-items: flex-start;

    align-content: flex-start;

}



.print-preview {

    position: relative;



    .slick-next {

        --size: 30px;

        right: calc(var(--size) / 2);

    }



    .slick-prev {

        --size: 30px;

        left: calc(var(--size) / 2);

    }



    .print-preview-header {

        text-align: center;

    }

}



.print-preview__wrapper {



    .thumb-next {

        right: 10px;

    }



    .thumb-prev {

        left: 10px;

    }



    .slick-arrow {

        --size: 30px;

        --fontSize: 16px;

    }

}



.design-tools__container {

    .form--control {

        padding: 10px 16px !important;

        border-color: hsl(var(--border-color));

    }



    input[type="number"] {

        padding: 7.5px 16px !important;

    }

}



.text-tools {

    margin-top: 10px;

    justify-content: flex-start;



    .btn {

        padding: 5px;

        border: 1px solid hsl(var(--border-color));

        width: 30px;

        height: 30px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 4px;

        color: hsl(var(--dark));

        font-size: 14px;

    }

}



.shape-list {

    max-height: 575px;

    overflow: auto;



    /* Custom scrollbar styles */

    scrollbar-width: thin;

    scrollbar-color: hsl(var(--base)) hsl(var(--border-color));



    /* For Webkit browsers */

    &::-webkit-scrollbar {

        width: 8px;

        background: hsl(var(--border-color));

        border-radius: 6px;

    }



    &::-webkit-scrollbar-thumb {

        background: hsl(var(--base));

        border-radius: 6px;

    }



    &::-webkit-scrollbar-thumb:hover {

        background: hsl(var(--base-d-200), 0.85);

    }

}



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

    .shape-list {

        max-height: 500px;

    }

}



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

    .shape-list {

        max-height: 200px;

    }

}



.input-group-text.btn {

    border: 0 !important;



    &:hover {

        border: 0 !important;

    }

}



.btn-close {

    box-shadow: unset !important;

}



.btn-close:focus {

    box-shadow: unset !important;

}



.footer-item__text {

    color: hsl(var(--white)/0.6);

}



.newsletter-widget-header .title {

    color: hsl(var(--white) / 0.7);

    margin-bottom: 10px;

}



.newsletter-widget-header p {

    color: hsl(var(--white) / 0.7);

}



[type=button]:not(:disabled),

[type=reset]:not(:disabled),

[type=submit]:not(:disabled),

button:not(:disabled) {

    cursor: pointer;

}



.print-product-list__item {

    flex-shrink: 0;

}



.sidebar-menu__link {

    position: relative;

}



.sidebar-menu__link .badge {

    position: absolute;

    right: 5px;

    top: 50%;

    transform: translateY(-50%);

}



.collapsed .sidebar-menu__link .badge {

    position: absolute;

    right: 10px;

    top: 12px;

    transform: translateY(-50%);

    padding: 4px 8px;

    font-size: 0.75rem;

    border-radius: 999px;

}



.collapsed .sidebar-menu__link .badge--danger {

    color: hsl(var(--white)) !important;

    background-color: hsl(var(--danger)) !important;

}



.shape-search {

    max-width: 60px;

}



.shape-list__search .btn {

    height: 42px;

}



.image-input-group {

    height: 54px;



    img {

        height: 100%;

    }

}



.custom-canvas-container {

    /* max-width: 600px; */

    position: relative;

    margin-inline: auto;

}



.notification-emtpy img {

    width: 120px;

    margin-inline: auto;

}



.notification-emtpy {

    text-align: center;

}



.custom--card .card-header>*:is(h1, h2, h3, h4, h5, h6) {

    margin-bottom: 0;

}



.mh-300 {

    min-height: 300px;

}



.inset-0 {

    inset: 0;

}



.empty-notification-list {

    height: 100%;



    img {

        max-height: 150px;

    }

}



.w-fit {

    width: fit-content;

}



.add-new-product__form .form--label~div:has(.nicEdit-panelContain, .nicEdit-main) {

    width: 100% !important;

}



.table-dropdown .dropdown-toggle::after {

    display: none;

}



.table-dropdown .dropdown-menu {

    padding-block: 0;

}



.table-dropdown .dropdown-item {

    padding-block: 9px;

    border-bottom: 1px solid #d9d9d9;

    font-weight: 500;

}



.table-dropdown .dropdown-item:last-child {

    border-bottom: 0;

    border-radius: 0 0 4px 4px;

}



.table-dropdown .dropdown-item:first-child {

    border-radius: 4px 4px 0 0;

}



.table-dropdown .dropdown-item:active {

    background: hsl(var(--base)/0.7);

    color: hsl(var(--black));

}



.table-dropdown .dropdown-item.danger {

    background: hsl(var(--danger)/0.2);

}



.table-dropdown .dropdown-item.danger:active {

    background: hsl(var(--danger)/0.5);

}



/* Image Uploader CSS Starts */

.image--uploader {

    width: 100%;

    height: 160px;

    border-radius: 4px;

}



.image-upload-wrapper {

    height: 100%;

    position: relative;

}



.image-upload-preview {

    width: 100%;

    height: 100%;

    display: block;

    background-position: center;

    background-repeat: no-repeat;

    background-size: contain;

    border-radius: 4px;

    border: 1px solid hsl(var(--black)/0.1);

    box-shadow: none;

}





.image-upload-input-wrapper {

    position: absolute;

    display: inline-flex;

    bottom: -14px;

    right: -7px;

}



.image-upload-input-wrapper input {

    width: 0;

    opacity: 0;

}



.image-upload-input-wrapper label {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    text-align: center;

    border: 2px solid #fff;

    font-size: 18px;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 0;

    background-color: hsl(var(--base)) !important;

}



.image-upload-input-wrapper label::after {

    display: none;

}



/* Image Uploader CSS Ends */



.file-uploader {

    border-color: hsl(var(--black)/0.1);

    border-radius: 4px;

}



.list-group--custom {

    border-radius: 0px;

}



.list-group--custom .list-group-item {

    padding-inline: 0px;

    border-color: transparent;

}



.list-group--custom .list-group-item:not(:last-child) {

    border-bottom-color: hsl(var(--black)/0.1);

}



.design-area {

    --side-layout: 80px;

    --bottom-layout: 58px;

    --top: 60px;

}



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

    .design-area {

        --side-layout: 60px;

    }

}



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

    .design-area {

        --bottom-layout: 100px;

    }

}



.design-area__wrapper {

    background: #f5f5f0;

    display: flex;

    flex-wrap: wrap;

}



.left-layout {

    width: var(--side-layout);

    height: 100vh;

    background-color: transparent;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    flex-direction: column;

}



.left-layout::after {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background-color: hsl(var(--white));

    z-index: 2;

    border-right: 1px solid hsl(var(--black)/0.4);

}



.bottom-layout {

    border-top: 1px solid hsl(var(--black)/0.4);

    background-color: hsl(var(--white));

    width: calc(100vw - var(--side-layout));

    height: var(--bottom-layout);

    margin-top: calc(-1 * var(--bottom-layout));

    margin-left: var(--side-layout);

}



.left-layout__item {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



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



    .left-layout__item .text {

        display: none;

    }

}



.left-layout__item.active .design-option__btn {

    background-color: hsl(var(--base-two));

    color: hsl(var(--white)) !important;

}





.left-layout__item:not(.active) {

    transition: all 0.3s ease;

}



.left-layout__item:not(.active):hover .design-option__btn {

    background-color: hsl(var(--black) / 0.1);

}



.back-btn {

    padding-block: 18px;

}



.question-btn {

    margin-top: auto;

}



.sidebar-layer {

    position: absolute;

    width: 350px;

    top: var(--top);

    height: calc(100vh - var(--bottom-layout) - var(--top));

    background-color: hsl(var(--white));

    border: 1px solid hsl(var(--black)/0.4);

    border-bottom: 0;

    border-left: 0;

    display: flex;

    flex-direction: column;

    left: -350px;

    transition: all 0.3s ease;

    z-index: 2;

}



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



    .sidebar-layer {

        width: 250px;

    }

}



.left-layout__item.active .sidebar-layer {

    left: var(--side-layout);

}



.sidebar-layer__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 20px;

}



.sidebar-layer__close {

    cursor: pointer;

    width: 35px;

    height: 35px;

    border: 1px solid hsl(var(--black)/0.05);

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.sidebar-layer__close i {

    transition: background-color 0.3s;

}



.sidebar-layer__close:hover {

    background-color: hsl(var(--black)/0.05);

    border-color: hsl(var(--black)/0.1);

}



.sidebar-layer__close:hover i {

    transform: scale(1.1);

}



.sidebar-layer__body {

    flex-grow: 1;

    padding: 30px 20px 30px;

}



.sidebar-layer__title {

    margin-bottom: 0;

}



.bottom-layout .canvas-zoom {

    position: static;

    margin-left: 12px;



}



.bottom-layout .canvas-position {

    position: static;

    margin-left: 12px;

    padding: 0;

}



.bottom-layout .canvas-position .canvas-position__btn:active {

    border: 1px solid hsl(var(--base-two));

}



.bottom-layout .canvas-position .canvas-position__btn.active-move {

    background: #434228;

    color: hsl(var(--white));

}



.bottom-layout .full-screen {

    left: 100px;

    top: 15px;

}



.bottom-layout__inner {

    padding-inline: 12px;

}



.canvas-layout {

    height: calc(100vh - var(--bottom-layout));

    position: relative;

    width: calc(100dvw - (var(--side-layout) + 20px));

}



.canvas-layout__header {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: var(--top);

    z-index: 10;

    padding-inline: 12px;

    gap: 12px

}



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

    .canvas-layout__header {

        gap: 4px

    }

}



.canvas-layout__header .full-screen,

.canvas-layout__header .canvas-delete {

    position: static;

}



.design-area__footer {

    max-width: 800px;

    position: absolute;

    bottom: calc(var(--bottom-layout) + 25px);

    left: 50%;

    transform: translateX(-50%);

    overflow: auto;

    display: flex;

    align-items: center;

    gap: 10px;



    /* Firefox scrollbar */

    scrollbar-width: thin;

    scrollbar-color: #888 transparent;

}



/* Chrome, Safari, Edge */

.design-area__footer::-webkit-scrollbar {

    height: 5px;

    /* horizontal scrollbar height */

}



.design-area__footer::-webkit-scrollbar-track {

    background: transparent;

    /* track color */

}



.design-area__footer::-webkit-scrollbar-thumb {

    background-color: hsl(var(--base-two));

    /* thumb color */

    border-radius: 4px;

    /* rounded edges */

    transition: background-color 0.3s ease;

}



.design-area__footer::-webkit-scrollbar-thumb:hover {

    background-color: hsl(var(--base-two-d-400));

    /* darker on hover */

}



.design-area__footer-item {

    padding: 3px 15px;

    border: 1px solid hsl(var(--border-color));

    border-radius: 40px;

    background-color: hsl(var(--white));

    transition: all 0.3s ease;

    flex-shrink: 0;

}



.design-area__footer-item:not(.active):hover {

    border: 1px solid hsl(var(--base-two));

    color: hsl(var(--base-two));

}



.design-area__footer-item.active {

    background: hsl(var(--base-two));

    color: hsl(var(--white));

}



.canvas-btn-icon.d-none {

    display: block !important;

}



.canvas-btn-text {

    display: none !important;

}



.add-new-product__header {

    margin-bottom: 20px;

}



.shape-list .btn-shape {

    padding: 0;

    font-size: 60px;

    border: 1px solid hsl(var(--dark)/ 0.1);

    width: 85px;

    margin: 6px;

}



.policy-wrapper li {

    font-size: 1.25rem;

}



.cursor-pointer {

    cursor: pointer;

}