/* -----------------------------------------------------------------------------
 * Project:     Theme FutureMart
 * File:        master.css
 * Description: Global and component styling for the entire frontend
 * Author:      Muhammad Rabiul
 * Created:     2025-10-20
 * -----------------------------------------------------------------------------
 * TABLE OF CONTENTS
 * 1. Reset / Normalize
 * 2. CSS Variables (Design Tokens)
 * 3. Base Styles (Typography, body, headings)
 * 4. Layout (Containers, grid helpers)
 * 5. Utilities (margin, padding, text helpers)
 * 6. Effects (hover effects, animations)
 * 7. Components
 *   7.1 Navigation Components
 *     7.1.1 App Navbar
 *     7.1.2 Top Navbar
 *     7.1.3 Header Menu Bar
 *     7.1.4 Header Sidebar
 *   7.2 Header Components
 *     7.2.1 Header Slider
 *   7.3 Footer Components
 *   7.4 Product Components
 *   7.5 Brand Components
 *   7.6 Vendor Components
 *   7.7 Blog Components
 *     7.7.1 Blog Cards
 *     7.7.2 Blog Details
 *   7.8 Auth Components
 *     7.8.1 Login Forms
 *     7.8.2 Social Auth
 *   7.9 Marketing Components
 *     7.9.1 Offers & Campaigns
 *     7.9.2 Flash Sales
 *     7.9.3 Features Section
 *   7.10 Content Components
 *     7.10.1 Policy Pages
 *     7.10.2 FAQ Accordions
 * 8. Pages (homepage, product page, etc.) - optional
 * -----------------------------------------------------------------------------
 */

/* ----------------------------------------------
   1. RESET / NORMALIZE
---------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ----------------------------------------------
   2. CSS VARIABLES (THEME)
---------------------------------------------- */
:root {
    /* Backgrounds */
    --rs-bg: #f9fafb;
    --rs-bg-muted: #f1f5f9;
    --rs-card: #ffffff;
    --rs-surface: #f8fafc;

    /* Text Colors */
    --rs-text: #0f172a;
    --rs-text-muted: #475569;
    --rs-text-inverse: #ffffff;
    --rs-heading: #1e293b;

    /* Borders */
    --rs-border: 1px solid rgba(0, 0, 0, 0.08);
    --rs-border-color: rgba(0, 0, 0, 0.08);

    /* Status Colors */
    --rs-success: #059669;
    --rs-warning: #facc15;
    --rs-error: #ef4444;
    --rs-info: #2563eb;

    /* Shadows */
    --rs-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    --rs-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
    --rs-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);

    /* Effects */
    --rs-ring: rgba(37, 99, 235, 0.35);

    /* Layout */
    --rs-radius: 16px;
    --rs-gap: 16px;
}

/* Dark Theme */
[theme="dark"] {
    /* Backgrounds */
    --rs-bg: #0b1020;
    --rs-bg-muted: #1e293b;
    --rs-card: #1c1c1c;
    --rs-surface: #111827;

    /* Text Colors */
    --rs-text: #e7ecff;
    --rs-text-muted: #a6b0cf;
    --rs-text-inverse: #0f172a;
    --rs-heading: #f1f5f9;

    /* Borders */
    --rs-border: 1px solid rgba(255, 255, 255, 0.08);
    --rs-border-color: rgba(255, 255, 255, 0.08);

    /* Shadows */
    --rs-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
    --rs-shadow-sm: 0 2px 10px rgba(2, 6, 23, 0.25);
    --rs-shadow-lg: 0 15px 45px rgba(2, 6, 23, 0.45);

    /* Effects */
    --rs-ring: rgba(110, 168, 254, 0.55);
}

body {
    --bs-body-bg: #F2F2F6;
}

body[theme="dark"] {
    --bs-body-bg: #222222;
    --bs-section-container-bg: #242830;
    --text-title: #ffffff;
    --text-light-dark: #FFFFFF;
    --text-dark-light: #444444;
    --bg-light-dark: #FFFFFF;
    --custom-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
    --custom-shadow-hover: 1px 1px 15px rgba(0, 0, 0, .5);
    --bs-theme-shadow-color-1: rgba(32, 32, 32, 0.5);
}

/* ----------------------------------------------
   3. BASE STYLES
---------------------------------------------- */
body {
    position: relative;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ----------------------------------------------
   4. LAYOUT HELPERS
---------------------------------------------- */

/* ----------------------------------------------
   5. UTILITIES
---------------------------------------------- */
.text-light-dark {
    --color: 0, 0, 0;
    color: rgba(var(--color), 1);
}

[theme="dark"] .text-light-dark {
    --color: 255, 255, 255;
}

.section-title-stroke-style1 {
    font-size: 1.25rem;
    font-weight: 600;
}

.max-width-400px {
    max-width: 400px;
}

.line-before-title-style {
    position: relative;
    display: flex;
    align-items: center;
    padding-inline-start: 10px;
}

.line-before-title-style::before {
    position: absolute;
    content: '';
    width: .175rem;
    height: 70%;
    background-color: #ff0000;
    inset-block: auto;
    inset-inline-start: 0;
    border-radius: 5px;
}

/* ----------------------------------------------
   5.1 Pagination UTILITIES
---------------------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .35rem;
    --bs-pagination-color: var(--bs-primary);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-focus-color: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-focus-box-shadow: none;
}

.pagination .page-item .page-link {
    --size: 2rem;
    height: var(--size);
    min-width: auto;
    font-size: .85rem;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .25rem;
    user-select: none;
}

.pagination .page-item:hover .page-link {
    --bs-pagination-hover-bg: rgba(var(--bs-primary-rgb), .8);
    --bs-pagination-hover-color: #FFFFFF;
    font-weight: 600;
}

/* ----------------------------------------------
   6. Effects
---------------------------------------------- */
.card-hover-effect-style-1 {
    position: relative;
    display: block;
}

.card-hover-effect-style-1::before,
.card-hover-effect-style-1::after {
    background-color: rgba(var(--bs-white-rgb), 0.2) !important;
    content: "";
    position: absolute;
    opacity: 1;
    z-index: 1;
}

.card-hover-effect-style-1::before {
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-start: 50%;
    inset-inline-end: 51%;
}

.card-hover-effect-style-1::after {
    inset-block-start: 50%;
    inset-block-end: 50%;
    inset-inline-start: 0;
    inset-inline-end: 0;
}

.card-hover-effect-style-1:hover::before,
.card-hover-effect-style-1:hover::after {
    opacity: 0;
    -webkit-transition: all 900ms linear;
    -o-transition: all 900ms linear;
    transition: all 900ms linear;
}

.card-hover-effect-style-1:hover::before {
    inset-inline-start: 0;
    inset-inline-end: 0;
}

.card-hover-effect-style-1:hover::after {
    inset-block-start: 0;
    inset-block-end: 0;
}

.animate-section-hover-outline {
    position: relative;
}

.animate-section-hover-outline::before,
.animate-section-hover-outline::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    z-index: -1 !important;
    width: 0;
    height: 0;
    transition: color 0.3s;
    border: 2px solid transparent;
}

.animate-section-hover-outline::before {
    top: 0;
    left: 0;
}

.animate-section-hover-outline::after {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.animate-section-hover-outline:hover::before,
.animate-section-hover-outline:hover::after {
    width: calc(100% - 0px);
    height: 100%;
    z-index: 1 !important;
}

.animate-section-hover-outline:hover::before {
    border-top-color: var(--bs-primary);
    border-right-color: var(--bs-primary);
    transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}

.animate-section-hover-outline:hover::after {
    border-bottom-color: var(--bs-primary);
    border-left-color: var(--bs-primary);
    transition: height 0.3s ease-out, width 0.3s ease-out 0.3s;
}

.brand-list-card.animate-section-hover-outline::before,
.brand-list-card.animate-section-hover-outline::after,
.shop-medium-card.animate-section-hover-outline::before,
.shop-medium-card.animate-section-hover-outline::after {
    border-radius: .35rem;
}

/* ----------------------------------------------
   7. COMPONENTS
---------------------------------------------- */

/* ----------------------------------------------
   7.1.1 App Navbar Components
---------------------------------------------- */
.app-navbar-area {
    --bs-bg-color: #FFFFFF;
    position: fixed !important;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    background-color: var(--bs-bg-color);
    width: 100%;
    height: 62px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    -webkit-box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.1);
    box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1200px) {
    .app-navbar-area {
        display: none !important;
    }
}

[theme="dark"] .app-navbar-area {
    --bs-bg-color: #3C3F41;
}

.app-navbar {
    --bs-bg-color: #FFFFFF;
    --bs-text-color: #000000;
    color: var(--bs-text-color);
    background-color: var(--bs-bg-color);
    width: 100%;
    height: 62px;
}

[theme="dark"] .app-navbar {
    --bs-bg-color: #3C3F41;
    --bs-text-color: #FFFFFF;
}

.app-navbar ul {
    position: relative;
    z-index: 10;
    width: 100%;
    list-style: none;
}

.app-navbar ul li {
    position: relative;
    z-index: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
}

.app-navbar ul li a {
    position: relative;
    display: block;
    font-size: 10px;
    text-align: center;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1;
    color: var(--primary-950);
    z-index: 1;
}

.app-navbar ul li a i {
    font-size: 1rem;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}

.app-navbar ul li a span {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    color: var(--primary-950);
    display: block;
    margin-top: 0.4rem;
    text-transform: uppercase;
}

.app-navbar ul li a:hover,
.app-navbar ul li a:focus {
    color: var(--primary-950);
}

.app-navbar ul li a:hover span,
.app-navbar ul li a:focus span {
    color: var(--primary-950);
}

/* ----------------------------------------------
   7.1.2 Top Navbar Components
---------------------------------------------- */
.top-navbar-main-container {
    --top-nav-font-size: .85rem;
    border-bottom: 1px solid #ddd;
    font-size: var(--top-nav-font-size);
}

.top-navbar-main-container a {
    color: #333e48;
    text-decoration: none;
    font-size: var(--top-nav-font-size);
    padding: .5rem 0;
}

.top-navbar-main-container .top-navbar-list-section {
    display: flex;
    align-items: center;
    font-size: var(--top-nav-font-size);
    font-weight: 500;
}

.top-navbar-main-container .top-navbar-list-section .list-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 .75rem;
}

.top-navbar-main-container .top-navbar-list-section .list-item a {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.top-navbar-main-container .top-navbar-list-section .list-item a .icon {
    font-size: .75rem;
    display: flex;
    align-items: center;
}

.top-navbar-main-container .top-navbar-list-section .list-item:last-child {
    position: unset;
    padding-inline-end: 0;
}

.top-navbar-main-container .top-navbar-list-section .list-item:after {
    position: absolute;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    content: '';
    height: .85rem;
    width: .105rem;
    background: #ddd;
}

.top-navbar-main-container .language-dropdown .dropdown-menu .language-item,
.top-navbar-main-container .currency-dropdown .dropdown-menu .currency-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-light-dark);
    padding: .35rem .5rem;
    cursor: pointer;
    font-size: var(--top-nav-font-size);
}

.top-navbar-main-container .language-dropdown,
.top-navbar-main-container .currency-dropdown {
    position: relative;
    padding: .5rem 0;
}

.top-navbar-main-container .language-dropdown .dropdown-menu .language-item.active-language,
.top-navbar-main-container .language-dropdown .dropdown-menu .currency-item.active-currency,
.top-navbar-main-container .language-dropdown .dropdown-menu .language-item:hover,
.top-navbar-main-container .currency-dropdown .dropdown-menu .currency-item:hover {
    background-color: #e6e6e6;
}

[theme="dark"] .top-navbar-main-container .language-dropdown .dropdown-menu .language-item.active-language,
[theme="dark"] .top-navbar-main-container .language-dropdown .dropdown-menu .currency-item.active-currency,
[theme="dark"] .top-navbar-main-container .language-dropdown .dropdown-menu .language-item:hover,
[theme="dark"] .top-navbar-main-container .currency-dropdown .dropdown-menu .currency-item:hover {
    background-color: #3c3c3c;
}

.top-navbar-main-container .language-dropdown .dropdown-menu,
.top-navbar-main-container .currency-dropdown .dropdown-menu {
    inset: 100% 0 auto auto !important;
    transform: unset !important;
}

/* ----------------------------------------------
   7.1.3 Header Manu Bar Components
---------------------------------------------- */
.header-menu-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: .75em 0;
}

.header-logo-area {
    width: 15%;
}

.header-search-area {
    width: 60%;
}

.header-search-area .header-search-form {
    background: red;
    width: 100%;
    height: 3rem;
    border-radius: 2rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border: 4px solid red;
}

.header-search-area .header-search-form .header-search-button {
    background: transparent;
    color: #fff;
    border: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    height: 100%;
}

.header-search-area .header-search-form .header-search-input {
    height: 100%;
    width: 100%;
}

.header-search-area .header-search-form .header-search-category {
    height: 100%;
    width: auto;
}

.header-search-area .header-search-form .header-search-input input:focus,
.header-search-area .header-search-form .header-search-category select:focus {
    box-shadow: none;
}

.header-user-actions {
    width: 25%;
}

.header-user-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end !important;
    gap: 1.5rem;
    font-family: var(--bs-font-sans-serif);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.714;
    color: #333e48;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    word-wrap: break-word;
    --bs-gutter-x: 1.875rem;
    --bs-gutter-y: 0;
    box-sizing: border-box;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
    flex: 0 0 auto;
    width: auto;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.header-user-actions .header-icon {
    font-size: 2rem;
    font-weight: 700;
    background: transparent;
    border: 0;
    color: #333e48;
    position: relative;
}

.header-user-actions .header-icon .count {
    position: absolute;
    top: auto;
    bottom: .5rem;
    font-size: .675rem;
    background: yellow;
    aspect-ratio: 1;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    inset-inline-end: 0;
}

.header-search-area input,
.header-search-area select {
    width: 100%;
    border: 0;
    height: 100%;
    background: #fff;
    padding-left: .5rem;
    padding-right: .5rem;
}

/* ----------------------------------------------
   7.1.4 Header Slider Components
---------------------------------------------- */
.swiper-slider-banner-small .lozad-image-wrapper,
.swiper-slider-banner-large .lozad-image-wrapper,
.swiper-slider-offer-banner .lozad-image-wrapper {
    width: 100%;
    height: auto;
    max-height: var(--height, 100%);
    background: #e9ecef;
}

.swiper-slider-banner-small .lozad-image-wrapper,
.swiper-slider-banner-small .lozad-image-wrapper img {
    --height: 195px;
}

.swiper-slider-banner-large .lozad-image-wrapper,
.swiper-slider-banner-large .lozad-image-wrapper img {
    --height: 400px;
}

.swiper-slider-offer-banner .lozad-image-wrapper,
.swiper-slider-offer-banner .lozad-image-wrapper img {
    --height: 280px;
}

.swiper-slider-banner-small .lozad-image-wrapper img,
.swiper-slider-banner-large .lozad-image-wrapper img,
.swiper-slider-offer-banner .lozad-image-wrapper img {
    width: 100%;
    height: auto;
    max-height: var(--height);
    object-fit: cover;
}

@media screen and (max-width: 1023px) {
    .swiper-slider-banner-small .lozad-image-wrapper,
    .swiper-slider-banner-small .lozad-image-wrapper img {
        --height: 130px;
    }

    .swiper-slider-banner-large .lozad-image-wrapper,
    .swiper-slider-banner-large .lozad-image-wrapper img {
        --height: 270px;
    }

    .swiper-slider-offer-banner .lozad-image-wrapper,
    .swiper-slider-offer-banner .lozad-image-wrapper img {
        --height: 130px;
    }
}

@media screen and (max-width: 767px) {
    .swiper-slider-banner-small .lozad-image-wrapper,
    .swiper-slider-banner-small .lozad-image-wrapper img {
        --height: 100px;
    }

    .swiper-slider-banner-large .lozad-image-wrapper,
    .swiper-slider-banner-large .lozad-image-wrapper img {
        --height: 200px;
    }

    .swiper-slider-offer-banner .lozad-image-wrapper,
    .swiper-slider-offer-banner .lozad-image-wrapper img {
        --height: 100px;
    }
}

.swiper-slide-container {
    position: relative;
}

.swiper-slide-container .swiper-slide-content {
    position: relative;
    z-index: 1;
    min-height: 400px;
    display: flex;
    align-items: center;
    padding: 4rem 0 2rem 0;
}

.swiper-slide-container .swiper-slide-content::before {
    position: absolute;
    content: '';
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: -1;
}

.swiper-slide-container .swiper-slide-title,
.swiper-slide-container .swiper-slide-sub-title,
.swiper-slide-container .swiper-slide-description {
    color: #FFFFFF;
    text-shadow: 2px 2px 0px rgb(0 0 0 / 60%);
    letter-spacing: 1px;
}

.swiper-slide-container .swiper-slide-title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 3rem;
}

.swiper-slide-container .swiper-slide-sub-title {
    font-size: 1rem;
    font-weight: 700;
}

.swiper-slide-container .swiper-slide-description {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    max-width: 700px;
    padding: .5rem 0;
}

.swiper-slide-container .swiper-slide-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.swiper-slide-container .swiper-slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-slide-container .swiper-slide-visit-btn {
    background-color: var(--bs-primary);
    color: #FFFFFF;
    padding: .75rem 2rem;
    border-radius: 2rem;
    width: max-content;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 2px;
    display: flex;
    gap: .5rem;
    align-items: center;
}

@media (min-width: 576px) {
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .swiper-slide-container .swiper-slide-content {
        min-height: 500px;
    }

    .swiper-slide-container .swiper-slide-title {
        font-size: 4rem;
        line-height: 4rem;
    }

    .swiper-slide-container .swiper-slide-sub-title {
        font-size: 1.5rem;
    }

    .swiper-slide-container .swiper-slide-description {
        font-size: 1rem;
    }
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}

/* Default bullets */
.swiper-slider-wide-banner-large .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 10px;
    background: #ddd;
    opacity: 1;
    transition: all 0.3s ease;
    margin: 0 4px !important;
}

/* Active bullet */
.swiper-slider-wide-banner-large .swiper-pagination-bullet-active {
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
    /* Indigo → Cyan */
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(79, 70, 229, 0.6);
}

/* Active main pill effect */
.swiper-slider-wide-banner-large .swiper-pagination-bullet-active-main {
    min-width: 1.5rem !important;
    border-radius: 0.25rem !important;
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

/* ----------------------------------------------
   7.2 HEADER COMPONENTS
---------------------------------------------- */


/* ----------------------------------------------
   7.2.1 Header Sidebar Components
---------------------------------------------- */
#appSidebarCanvas {
    --bs-offcanvas-width: 80%;
    max-width: 400px;
}

.toggle-sec {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.toggle-sec label {
    margin-right: 20px
}

[dir=rtl] .toggle-sec label {
    margin-right: 0;
    margin-left: 20px
}

.toggle-sec label span {
    display: block;
    color: #647589
}

.toggle-sec .toggle-btn {
    position: relative;
    width: 74px;
    height: 36px;
    overflow: hidden;
    border-radius: 100px;
    margin-left: auto
}

[dir=rtl] .toggle-sec .toggle-btn {
    margin-right: auto;
    margin-left: 0
}

.toggle-sec .toggle-btn .knobs,
.toggle-sec .toggle-btn .layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(237, 239, 244, .6);
    -webkit-transition: .3s ease all;
    transition: .3s ease all;
    z-index: 1;
    left: 0
}

.toggle-sec .toggle-btn .checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3
}

.toggle-sec .toggle-btn .knobs {
    z-index: 2
}

.toggle-sec .toggle-btn .knobs:before,
.toggle-sec .toggle-btn .knobs:after,
.toggle-sec .toggle-btn .knobs span {
    position: absolute;
    top: 4px;
    width: 28px;
    height: 28px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    border-radius: 50%;
    -webkit-transition: .4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    transition: .4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all
}

.toggle-sec .toggle-btn .knobs:before {
    content: "\F495";
    left: 4px;
    font-family: bootstrap-icons !important;
}

.toggle-sec .toggle-btn .knobs:after {
    content: "\F468";
    right: -24px;
    font-family: bootstrap-icons !important;
}

.toggle-sec .toggle-btn .knobs:before,
.toggle-sec .toggle-btn .knobs:after {
    color: #fff;
    z-index: 2
}

[class=dark] .toggle-sec .toggle-btn .knobs:before,
[class=dark] .toggle-sec .toggle-btn .knobs:after {
    color: #fff
}

.toggle-sec .toggle-btn .knobs span {
    left: 4px;
    background-color: rgba(0, 0, 0, .6);
    z-index: 1
}

.toggle-sec .toggle-btn .checkbox:checked + .knobs:before {
    left: -24px
}

.toggle-sec .toggle-btn .checkbox:checked + .knobs:after {
    right: 4px
}

.toggle-sec .toggle-btn .checkbox:checked + .knobs span {
    left: 42px;
    background-color: #ff4c3b
}

.toggle-sec .toggle-btn .checkbox:checked + .knobs ~ .layer {
    background-color: #edeff4
}

.header-sidebar .user-panel {
    padding: 16px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: rgba(237, 239, 244, .25);
    gap: .75rem;
    --bs-text-color: #000000;
    color: var(--bs-text-color);
}

[theme="dark"] .header-sidebar .user-panel {
    --bs-text-color: #FFFFFF;
}

.header-sidebar .user-panel .user-img {
    width: 45px;
    height: 45px;
    border-radius: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    margin-right: 16px
}

[dir=rtl] .header-sidebar .user-panel .user-img {
    margin-right: 0;
    margin-left: 16px
}

.header-sidebar .user-panel span {
    display: inline-block;
    font-size: 14px;
    font-weight: 700
}

@media (max-width: 340px) {
    .header-sidebar {
        width: 290px
    }
}

.sidebar-content {
    padding: 25px 0
}

.sidebar-content .link-section {
    padding: 0 22px;
    list-style: none;
}

.sidebar-content .link-section li {
    width: 100%;
    padding: 16px 6px;
    border-bottom: 1px solid rgba(237, 239, 244, .6)
}

.sidebar-content .link-section li a,
.sidebar-content .link-section li > div {
    --bs-text-color: #000000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--bs-text-color)
}

[theme="dark"] .sidebar-content .link-section li a,
[theme="dark"] .sidebar-content .link-section li > div {
    --bs-text-color: #FFFFFF;
}

.sidebar-content .link-section li a i,
.sidebar-content .link-section li > div i {
    font-size: 20px;
    margin-right: 16px
}

[dir=rtl] .sidebar-content .link-section li a i,
[dir=rtl] .sidebar-content .link-section li > div i {
    margin-right: 0;
    margin-left: 16px
}

.sidebar-content .link-section li a img,
.sidebar-content .link-section li > div img {
    margin-right: 16px;
    width: 20px
}

[dir=rtl] .sidebar-content .link-section li a img,
[dir=rtl] .sidebar-content .link-section li > div img {
    margin-right: 0;
    margin-left: 16px
}

.sidebar-content .link-section li a .content h4,
.sidebar-content .link-section li > div .content h4 {
    margin-bottom: 2px;
    font-weight: 700;
    text-transform: capitalize;
    font-size: 14px;
    line-height: 1.3;
}

.sidebar-content .link-section li a .content h6,
.sidebar-content .link-section li > div .content h6 {
    text-transform: capitalize;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    margin: 0;
    opacity: 85%;
}

.sidebar-content .link-section li:first-child {
    padding-top: 0
}

.sidebar-content .link-section li:last-child {
    padding-bottom: 0;
    border-bottom: 0
}

/* ----------------------------------------------
   7.3 Footer Components
---------------------------------------------- */
#goToTopButton {
    display: none;
    position: fixed;
    bottom: 75px;
    right: 30px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    font-size: 18px;
    border: none;
    cursor: pointer;
}

#goToTopButton:hover {
    background-color: #555;
}

body {
    --bs-primary: #1455ac;
    --bs-primary-rgb: 20, 85, 172;
}

body[theme="dark"] {
    --bs-primary: #000000;
    --bs-primary-rgb: 0, 0, 0;
}

.footer-root-container {
    color: var(--bs-white);
}

.footer-root-container .direction-ltr {
    direction: ltr !important;
}

.footer-root-container .footer-top-section {
    background-color: rgba(var(--bs-primary-rgb), 90%);
    color: var(--bs-white);
    padding-bottom: 3rem;
    user-select: none;
}

@media screen and (min-width: 768px) {
    .footer-root-container .footer-top-section {
        padding-bottom: 2.5rem;
    }
}

.footer-root-container .footer-top-section .footer-icon-title {
    display: flex;
    padding: 15px 0;
}

.footer-root-container .footer-top-section .footer-icon-title p {
    padding: 0;
    margin: 0;
}

.footer-root-container .footer-top-section .footer-icon-title .footer-icon-box {
    padding: 0 18px;
    font-size: 28px;
    line-height: 28px;
}

.footer-root-container .footer-links {
    color: #ffffffd6;
    font-size: 0.85rem;
}

.footer-main-section {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

body[theme="dark"] .footer-main-section {
    --bs-bg-opacity: 95%;
}

.footer-main-section .newsletter-container {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    border-radius: 1rem;
    padding: 1.5rem;
    transform: translateY(-35%);
    margin-bottom: -2rem;
    -webkit-box-shadow: 0 7.5px 10px 3px #00150f17;
    -moz-box-shadow: 0 7.5px 10px 3px #00150f17;
    box-shadow: 0 7.5px 10px 3px #00150f17;
    user-select: none;
}

body[theme="dark"] .footer-main-section .newsletter-container {
    box-shadow: 0 7.5px 10px 3px #8b8b8b17;
}

@media screen and (min-width: 768px) {
    .footer-main-section .newsletter-container {
        transform: translateY(-50%);
    }
}

.footer-main-section .newsletter-form {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.footer-main-section .newsletter-form label {
    width: 100%;
}

.footer-main-section .newsletter-form input {
    height: 40px;
    padding: 15px;
    font-size: .85rem;
    background-color: rgb(255 255 255 / 15%);
    color: var(--bs-white);
    border-radius: 0.25rem;
    border: 0;
}

.footer-main-section .newsletter-form input:-webkit-autofill {
    background-color: rgba(255, 255, 255, 0.15) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.15) inset !important;
    transition: background-color 5000s ease-in-out 0s;
    color: var(--bs-white) !important;
    -webkit-text-fill-color: var(--bs-white) !important;
}

.footer-main-section .newsletter-form input:focus {
    background-color: rgb(255 255 255 / 15%);
    color: var(--bs-white);
}

.footer-main-section .newsletter-form input::placeholder {
    color: rgba(var(--bs-white), 80%) !important;
}

.footer-main-section .newsletter-form button {
    position: absolute;
    right: 5px;
    font-size: .85rem;
    font-weight: 500;
    border-radius: 0.25rem;
    border: 0;
    height: 30px;
    display: flex;
    gap: .5rem;
    align-items: center;
}

.footer-main-section .company-description {
    font-size: .9rem;
    user-select: none;
}

[dir="rtl"] .footer-main-section .newsletter-form button {
    right: auto;
    left: 5px;
}

.theme-mode-button button {
    background-color: #fff;
    color: #000;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 3px solid #d5d5d5;
    transform: rotate(180deg);
    transition: .5s ease-in all;
}

.theme-mode-button button.moon {
    transform: rotate(320deg);
    transition: .5s ease-in all;
}

.footer-root-container .logo-footer {
    height: 60px;
    padding: 0 0 10px 0;
    object-fit: contain;
}

.footer-main-section .links-list .title {
    font-weight: 600;
    letter-spacing: 1px;
    user-select: none;
}

.footer-main-section .links-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-main-section .links-list ul li {
    padding: 5px 0;
    font-size: 14px;
}

.footer-main-section .app-logos img {
    max-width: 140px;
}

.footer-main-section .copyright-area {
    background-color: #00000017;
    user-select: none;
}

.footer-main-section .footer-links {
    user-select: none;
}

body[theme="dark"] .footer-main-section .copyright-area {
    background-color: #0000008c;
}

@media screen and (max-width: 768px) {
    .footer-main-section .copyright-area {
        padding-bottom: 4.5rem;
    }
}

.footer-main-section .copyright-area .social-icons-list {
    display: flex;
}

.footer-main-section .copyright-area .social-icons-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-main-section .copyright-area .social-icons-list ul li {
    padding: 0 10px;
    display: inline-block;
}

.form-loading-button {
    transition: 1s ease-in-out all;
}

.form-loading-button .spinner-grow-sm,
.form-loading-button .loading-text {
    display: none;
}

.form-loading-button.active-loading .default {
    display: none;
}

.form-loading-button.active-loading .spinner-grow-sm,
.form-loading-button.active-loading .loading {
    display: block;
}

/* ----------------------------------------------
   7.4 Product Components
---------------------------------------------- */
.product-medium-card {
    width: 100%;
    max-width: 230px;
    border-radius: 5px;
    overflow: hidden;
    transition: .25s ease-in all;
    /*box-shadow: 0 0 15px 0 #ddd;*/
    user-select: none;
    background-color: #FFF;
    border: 1px solid transparent;
}

.product-medium-card-list .product-medium-card {
    max-width: 100%;
    display: flex;
}

.product-medium-card a {
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

.product-medium-card-top {
    width: 100%;
    overflow: hidden;
    padding: 8px;
    position: relative;
    display: flex;
    align-items: center;
}

.product-medium-card-list .product-medium-card-top {
    max-width: 150px;
}

.product-medium-card-top img {
    --height-width: 100%;
    width: var(--height-width);
    height: var(--height-width);
    overflow: hidden;
    object-fit: cover;
    aspect-ratio: 1;
    transition: .25s ease-in-out all;
    border-radius: 3px;
}

.product-medium-card-badge {
    position: absolute;
    min-height: 1.5rem;
    inset-inline-start: 0;
    inset-block-start: 0;
    display: flex;
    align-items: center;
    color: #FFF;
    background-color: #f26e21;
    font-size: .8rem;
    font-weight: 700;
    padding: .05rem .5rem;
    border-radius: 0 0 .5rem 0;
    box-shadow: 2px 2px 2px 0px #00000021;
    z-index: 1;
}

.product-medium-card-icons {
    position: absolute;
    inset-inline-start: auto;
    inset-inline-end: -2rem;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border-radius: .25rem;
    background-color: #FFF;
    transition: .25s ease-in-out all;
    box-shadow: 0 0 15px 0 #44444414;
    z-index: 1;
}

.product-medium-card-icons i {
    font-size: 1rem;
    display: flex;
}

.product-medium-card:hover .product-medium-card-icons {
    inset-inline-end: .85rem;
}

.product-medium-card-icons div {
    --size: 30px;
    width: var(--size);
    height: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .25rem;
    cursor: pointer;
    transition: .5s ease-in-out all;
}

.product-medium-card-icons div:hover {
    background-color: #000;
    color: #FFF;
}

.product-medium-card-icons div svg {
    --size: 20px;
    width: var(--size);
    height: var(--size);
    fill: #000;
}

.product-medium-card-icons div:hover svg {
    fill: #FFF;
}

.product-medium-card-bottom {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    padding: 0 10px .5rem;
}

.product-medium-card-list .product-medium-card-bottom {
    padding: 1rem;
}

.review-icons {
    font-size: .65rem;
    display: flex;
    gap: .15rem;
    color: #FF7D1E;
}

.review-icons svg {
    width: 12px;
    height: 12px;
    fill: #FF7D1E;
}

.review-average {
    font-size: .65rem;
    font-weight: 600;
    color: var(--text-light-dark);
}

.product-medium-card-category {
    font-size: .8rem;
    font-weight: 400;
    opacity: 85%;
    cursor: pointer;
    transition: .25s ease-in-out all;
    color: var(--bs-theme-text-color, #000);
    padding: .05rem 0;
    margin: 0;
}

.product-medium-card-category a {
    color: var(--bs-theme-text-color);
}

.product-medium-card-category:hover {
    opacity: 100%;
}

.product-medium-card-title {
    font-weight: 400;
    font-size: .9rem;
    letter-spacing: 0;
    cursor: pointer;
    margin: 0;
    color: var(--bs-theme-text-color);
    transition: .25s ease-in-out all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    min-height: 3rem;
    padding: 0;
}

.product-medium-card-title a {
    --bs-theme-text-color: #454457;
    color: var(--bs-theme-text-color);
    transition: .5s ease-in-out all;
}

.product-medium-card-title:hover,
.product-medium-card-title a:hover {
    color: var(--bs-primary);
}

.product-medium-card-price {
    display: flex;
    align-items: end;
    font-size: 1.15rem;
    font-weight: 600;
    gap: .45rem;
    /*color: var(--bs-primary);*/
    color: #f26e21;
}

body[theme="dark"] .product-medium-card-price {
    color: #FFF;
}

.product-medium-card-price span:first-child {
    text-decoration: line-through;
    font-size: 1.05rem;
}

.ri-fire-line {
    color: #FF4500;
}

.product-list-view-style {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: 0;
    user-select: none;
}

.product-list-view-style .style-item {
    cursor: pointer;
    opacity: .5;
}

.product-list-view-style .style-item.active {
    opacity: 1;
}

/* ----------------------------------------------
   7.5 Brand Components
---------------------------------------------- */
.brand-single-card-image {
    background-color: #f8f8fa;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: .35rem;
    border: 1px solid #ededed59;
}

.brand-single-card-image img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: cover;
}

.brand-single-card .lozad-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-list-card {
    overflow: hidden;
    /*border: 1px solid #ededed59;*/
    border-radius: .35rem;
    text-align: center;
    background-color: #ffffff;
    cursor: pointer;
    user-select: none;
}

.brand-list-card-image {
    overflow: hidden;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-list-card-title {
    background-color: rgba(var(--bs-primary-rgb), .15);
    padding: .25rem;
    font-size: .875rem;
    border-top: 1px solid rgba(var(--bs-primary-rgb), .25);
}

.brand-list-card-image img {
    max-width: 100%;
    max-height: 95%;
    height: auto;
    object-fit: contain;
    transition: .5s ease-in-out all;
}

.brand-list-card-image:hover img {
    transform: scale(1.25);
}

.brand-list-card .lozad-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

/* ----------------------------------------------
   7.6 Vendors Components
---------------------------------------------- */
.shop-medium-card {
    border: 0;
    overflow: hidden;
    box-shadow: 0 0 16px 0 #e1e1e1a6;
    background: #FFFFFF;
    border-radius: .35rem;
}

.shop-medium-card .shop-medium-card-top {
    height: 120px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop-medium-card .shop-medium-card-top .lozad-image-wrapper {
    width: 100%;
}

.shop-medium-card .shop-medium-card-top img {
    max-width: 100%;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.shop-medium-card .shop-medium-card-bottom {
    position: relative;
    padding: 0 20px 20px 20px;
}

.shop-medium-card .shop-avatar-circle {
    width: 85px;
    height: 85px;
    border-radius: 100%;
    overflow: hidden;
    /* border: 3px solid #d7d7d7; */
    filter: drop-shadow(0px 0px 8px rgba(var(--bs-primary-rgb), .2));
    background-color: #FFFFFF;
    position: absolute;
    top: -45px;
}

.shop-medium-card .shop-avatar-circle img {
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.shop-medium-card .shop-medium-card-info {
    margin: 0 0 0 100px;
    padding: 10px;
}

.shop-medium-card .shop-medium-card-info .store-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 0.15rem;
    color: var(--text-light-dark);
}

.shop-medium-card .shop-medium-card-info .review-icons-area {
    font-size: 10px;
    display: flex;
    gap: 0.35rem;
    color: var(--text-light-dark);
}

.shop-medium-card .shop-medium-card-info .review-icons {
    color: #FF7D1E;
}

.shop-medium-card .shop-medium-card-bottom button {
    width: 100%;
    padding: .45rem .75rem;
    background: #0000001a;
    border: none;
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .1rem;
    color: var(--text-light-dark);
}

/* ----------------------------------------------
   7.7 BLOG COMPONENTS
---------------------------------------------- */
.blog-main-container .blog-list-title {
    color: rgb(41, 41, 75);
    font-weight: 700;
    font-size: 52px;
    text-align: center;
}

.blog-main-container .blog-list-sub-title {
    color: rgb(105, 105, 129);
    margin: 0 auto;
    max-width: 640px;
    text-align: center;
}

.blog-main-container .blog-category-button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.blog-category-button-container-title {
    width: 100%;
    text-align: center;
    color: #696981;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.blog-main-container .blog-category-button {
    display: flex;
    position: relative;
    border-radius: 2rem;
    padding: 0.35rem;
    align-items: center;
    gap: 0.5rem;
    color: #000;
    background-color: #fff;
    box-shadow: rgba(114, 114, 255, 0.12) 0 5px 15px 0;
    overflow: hidden;
    z-index: 1;
}

.blog-main-container .blog-category-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    border: 2px solid #31A41E;
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    transition: clip-path 0.5s ease-in-out;
    z-index: -1;
}

.blog-main-container .blog-category-button.active::before,
.blog-main-container .blog-category-button:hover::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

[dir="rtl"] .blog-main-container .blog-category-button::before {
    clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
}

[dir="rtl"] .blog-main-container .blog-category-button.active::before,
[dir="rtl"] .blog-main-container .blog-category-button:hover::before {
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}

.blog-main-container .blog-category-button img {
    --size: 2rem;
    width: var(--size);
    height: var(--size);
    aspect-ratio: 1;
    border-radius: 100%;
    overflow: hidden;
    object-fit: cover;
    padding: .15rem;
}

.blog-main-container .blog-category-button .blog-category-button-text {
    font-weight: 500;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
    padding-inline-end: 0.25rem;
}

@media screen and (max-width: 1024px) {
    .blog-main-container .blog-category-button .blog-category-button-text {
        max-width: 8rem;
    }
}

/* ----------------------------------------------
   7.7.1 Blog Card Components
---------------------------------------------- */

.blog-single-card .blog-card-top-area {
    border-radius: 1rem;
    border: none;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: #fff;
    box-shadow: rgba(114, 114, 255, 0.12) 0 5px 15px 0;
    position: relative;
}

.blog-single-card .blog-card-top-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-single-card .blog-card-top-area .blog-card-badge-container {
    position: absolute;
    top: .85rem;
    left: .85rem;
    inset-inline-start: .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.blog-single-card .blog-card-top-area .blog-badge {
    background: #FFFFFF;
    padding: .15rem .5rem;
    font-size: .75rem;
    border-radius: .35rem;
    font-weight: 600;
    user-select: none;
    box-shadow: rgb(0 0 0 / 28%) 0 2px 15px 0;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.blog-single-card .blog-card-top-area .blog-badge .icon {
    color: #ff5733;
}

.blog-single-card-info {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.blog-single-card-info .blog-single-card-category {
    font-size: .85rem;
    font-weight: 600;
    color: #31A41E;
    display: block;
    margin-bottom: 0;
}

.blog-single-card .blog-single-card-title {
    --text-color: #000000;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-color);
    display: block;
    margin-bottom: 0;
}

[theme="dark"] .blog-single-card .blog-single-card-title {
    --text-color: #FFFFFF;
}

.blog-single-card .blog-single-card-count {
    font-size: 14px;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 10px;
}

[theme="dark"] .blog-single-card .blog-single-card-count {
    color: #CCCCCC;
}

.blog-single-card .blog-single-card-description {
    font-size: 14px;
    letter-spacing: 0.5px;
    opacity: 70%;
    font-weight: normal;
    margin: 0;
}

[theme="dark"] .blog-single-card .blog-single-card-description {
    color: #CCCCCC;
}

.blog-thumbnail-card .blog-card-top-area {
    border-radius: 1rem;
    border: 1px solid transparent;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: #fff;
    box-shadow: rgba(114, 114, 255, 0.12) 0 5px 15px 0;
    position: relative;
}

.blog-thumbnail-card .blog-card-top-area .lozad-image-wrapper:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    top: 0;
    left: 0;
    background: #00000045;
}

.blog-thumbnail-card .blog-card-top-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-thumbnail-card .blog-card-top-area .blog-card-badge-container {
    position: absolute;
    top: .85rem;
    left: .85rem;
    inset-inline-start: .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.blog-thumbnail-card .blog-card-top-area .blog-badge {
    background: #FFFFFF;
    padding: .15rem .5rem;
    font-size: .75rem;
    border-radius: .35rem;
    font-weight: 600;
    user-select: none;
    box-shadow: rgb(0 0 0 / 28%) 0 2px 15px 0;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.blog-thumbnail-card .blog-card-top-area .blog-badge .icon {
    color: #ff5733;
}

.blog-thumbnail-card-info {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    position: absolute;
    z-index: 5;
    bottom: 0;
    padding: .75rem;
    width: 100%;
}

.blog-thumbnail-card-info .blog-thumbnail-card-category {
    font-size: .85rem;
    font-weight: 600;
    color: #ffffff;
    display: block;
    margin-bottom: 0;
    opacity: 80%;
}

.blog-thumbnail-card .blog-thumbnail-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

/* ----------------------------------------------
   7.7.2 Blog Details Components
---------------------------------------------- */
/* New UI CSS - Start */
.blog-links-container {
    padding-inline-end: .5rem;
    position: sticky;
    top: 2rem;
    padding-bottom: 5rem;
}

.blog-sidebar-container {
    position: sticky;
    top: 2rem;
    padding-bottom: 5rem;
}

.blog-links-container .title {
    font-size: 1.15rem;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    padding-bottom: .5rem;
}

.blog-links-container ul {
    padding: 0;
    font-size: .85rem;
    list-style: none;
}

.blog-links-container ul li {
    padding: 0;
}

.blog-links-container ul li a {
    padding: .25rem 0 .25rem 1rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    border: 2px solid #ddd;
    border-bottom: 0;
    border-top: 0;
    border-inline-end: 0;
    color: #878787;
}

.blog-links-container ul li a.active {
    color: #000000;
    border-color: #000000;
}

.blog-links-container ul a {
    color: #0a1819;
}


.blog-author-section {
    border: 1px solid #dddddd;
    border-right: 0;
    border-left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    margin: .75rem 0;
    flex-wrap: wrap;
}

.blog-author-box {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.blog-author-img-box {
    position: relative;
}

.blog-author-img-box img {
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    height: 100%;
}

.blog-author-name {
    font-size: .85rem;
    font-weight: 600;
    margin: 0;
    text-transform: capitalize;
}

.blog-author-info-box span {
    font-size: .85rem;
    padding-inline-end: .5rem;
}

.blog-links-share-box {
    display: flex;
    gap: .75rem;
}

.blog-links-share-item {
    color: #000000;
    font-size: .85rem;
    border: 1px solid #000000;
    border-radius: 1rem;
    padding: .15rem 1rem;
    display: block;
    min-width: fit-content;
}

.blog-links-share-box .dropdown-menu {
    padding: 0;
}

.blog-links-share-box .dropdown-menu li {
    padding: .175rem .75rem;
    cursor: pointer;
    display: flex;
    gap: .5rem;
    font-size: .85rem;
    user-select: none;
}

.blog-links-share-box .dropdown-menu li:hover {
    background: #ddd;
}


.blog-sidebar-card-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-inline-end: .5rem;
    position: sticky;
    top: 2rem;
    padding-bottom: 5rem;
}

.blog-sidebar-card {
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 5px 20px 0 rgba(114, 114, 255, .12);
}

.blog-sidebar-card .blog-sidebar-card-title {
    padding-bottom: .35rem;
    margin-bottom: .65rem;
    position: relative;
    width: fit-content;
}

.blog-sidebar-card .blog-sidebar-card-title:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    background: rgba(var(--bs-primary-rgb), 1);
    top: auto;
    bottom: 0;
}

.blog-sidebar-card .blog-sidebar-category-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: .5rem;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.blog-sidebar-card .blog-sidebar-category-button {
    display: flex;
    position: relative;
    border-radius: 2rem;
    padding: 0.35rem;
    align-items: center;
    gap: 0.5rem;
    color: #000;
    background-color: #fff;
    box-shadow: rgba(114, 114, 255, 0.12) 0 5px 15px 0;
    overflow: hidden;
    z-index: 1;
}

.blog-sidebar-card .blog-sidebar-category-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    border: 2px solid #31A41E;
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    transition: clip-path 0.5s ease-in-out;
    z-index: -1;
}

.blog-sidebar-card .blog-sidebar-category-button:hover::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

[dir="rtl"] .blog-sidebar-card .blog-sidebar-category-button::before {
    clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
}

[dir="rtl"] .blog-sidebar-card .blog-sidebar-category-button:hover::before {
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}

.blog-sidebar-card .blog-sidebar-category-button .blog-sidebar-category-text {
    font-weight: 500;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7rem;
    padding-inline-end: 0.25rem;
}

@media screen and (max-width: 1024px) {
    .blog-sidebar-card .blog-sidebar-category-button .blog-sidebar-category-text {
        max-width: 8rem;
    }
}

/* ----------------------------------------------
   7.8 AUTH COMPONENTS
---------------------------------------------- */

/* ----------------------------------------------
   7.8.1 Login Form Components
---------------------------------------------- */
.customer-auth-form-card {
    background-color: #FFF;
    border-radius: .5rem;
    overflow: hidden;
    border: 0;
    box-shadow: rgba(114, 114, 255, 0.12) 0 5px 15px 0;
}

.customer-auth-form-card .login-page-image {
    position: relative;
    height: 100%;
    width: 100%;
}

.customer-auth-form-card .login-page-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customer-auth-form-card .login-page-form {
    padding: 3rem;
}

/* Inputs */
.password-input-section {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-section-icon {
    cursor: pointer;
    position: absolute;
    inset-inline-end: 10px;
    font-size: .85rem;
    color: var(--bs-theme-text-color);
    background-color: transparent;
    width: 30px;
    text-align: center;
}

input.custom-form-input {
    --bs-border-radius: 0;
    height: 2.5rem;
    border-radius: 0;
}

.captcha-code-container {
    position: relative;
    height: 40px;
    overflow: hidden;
}

.captcha-code-container input {
    height: 40px;
}

.captcha-code-container .recaptcha-code-container {
    position: absolute;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    top: 0;
    inset-inline-end: 0;
    background: rgba(220, 210, 230, 1);
}

.captcha-code-container .recaptcha-code-container .icon {
    padding-left: .5rem;
    padding-right: .5rem;
    height: 100%;
    display: flex;
    align-items: center;
    border-left: 1px solid #ddd;
}

.social-login-button {
    --social-login-button-bg: var(--bs-primary);
    background: var(--social-login-button-bg);
    color: white;
    font-weight: 600;
    border-radius: 3px;
    padding: .3755rem 1.15rem;
    text-transform: capitalize;
    display: flex;
    gap: .5rem;
    font-size: .8rem;
    border: 1px solid var(--social-login-button-bg);
}

.social-login-button:hover {
    --social-login-button-bg: #FFFFFF;
    transition: all 0.2s ease-in-out;
    color: #000000;
    border: 1px solid #000000;
}

.social-login-google {
    --social-login-button-bg: #DB4437;
}

.social-login-github {
    --social-login-button-bg: #333333;
}

.social-login-facebook {
    --social-login-button-bg: #1877F2;
}

.social-login-linkedin {
    --social-login-button-bg: #0A66C2;
}

.social-login-discord {
    --social-login-button-bg: #5865F2;
}

.social-login-twitter {
    --social-login-button-bg: #1DA1F2;
}

.social-login-instagram {
    --social-login-button-bg: #E4405F;
}

.social-login-gitlab {
    --social-login-button-bg: #FC6D26;
}

.social-login-pinterest {
    --social-login-button-bg: #E60023;
}

.social-login-youtube {
    --social-login-button-bg: #FF0000;
}

.social-login-reddit {
    --social-login-button-bg: #FF4500;
}

.social-login-twitch {
    --social-login-button-bg: #9146FF;
}

.social-login-dribbble {
    --social-login-button-bg: #EA4C89;
}

.social-login-tumblr {
    --social-login-button-bg: #001935;
}

.social-login-spotify {
    --social-login-button-bg: #1DB954;
}

.social-login-slack {
    --social-login-button-bg: #4A154B;
}

.social-login-medium {
    --social-login-button-bg: #12100E;
}

.social-login-behance {
    --social-login-button-bg: #1769FF;
}

.auth-page-container {
    min-height: 100vh;
}

.auth-page-container .row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.auth-page-container .row .auth-page-column:nth-child(2) {
    background-color: #FFF;
    background-position: top center;
    background-size: 100%;
}

.auth-page-container .row .auth-page-column {
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding: 0 2rem;
}

.auth-page-container .row .auth-page-column .bg-grid-shape {
    width: 100%;
    height: 100%;
    background-position: top center;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    z-index: 10;
    left: 0;
    right: 0;
}

.auth-page-container .row .auth-page-column .bg-shape-layer {
    display: block;
    width: 100%;
    height: 100%;
    background: #0068e003;
    -webkit-backdrop-filter: blur(237px);
    backdrop-filter: blur(237px);
    position: absolute;
    bottom: 0;
    z-index: 2;
    left: 0;
}

.auth-page-container .row .auth-page-column .bg-yellow-shape {
    display: block;
    width: 150px;
    height: 159px;
    position: absolute;
    bottom: 71px;
    z-index: 1;
    inset-inline-end: 30px;
}

.auth-page-container .row .auth-page-column .bg-green-shape {
    display: block;
    width: 140px;
    height: 103px;
    position: absolute;
    bottom: 37px;
    z-index: 1;
    inset-inline-start: 95px;
}

.auth-page-container .row .auth-page-column .bg-yellow-shape svg,
.auth-page-container .row .auth-page-column .bg-green-shape svg {
    width: 100%;
    height: 100%;
}

.auth-page-container .row .auth-page-column .auth-page-form {
    display: grid;
    place-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 100;
    height: 100%;
}

.auth-page-container .row .auth-page-column .auth-page-form::-webkit-scrollbar {
    width: 0;
}

.auth-page-container .row .auth-page-column .auth-form {
    max-width: 446px;
    margin-left: auto;
    margin-right: auto;
    padding: 3rem 0;
}

/* ----------------------------------------------
   7.8.2 Social Auth Components
---------------------------------------------- */

/* ----------------------------------------------
   7.9 MARKETING COMPONENTS
---------------------------------------------- */

/* ----------------------------------------------
   7.9.1 Offers & Campaigns Components
---------------------------------------------- */
.offer-campaign-card-container {
    position: relative;
}

.offer-campaign-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 5;
    padding: 1.5rem 1rem;
    bottom: 0;
    width: 100%;
    background: linear-gradient(0deg, black, transparent);
}

.offer-campaign-card-container .offer-campaign-card-timer {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.offer-campaign-card-container .offer-days-number,
.offer-campaign-card-container .offer-hours-number,
.offer-campaign-card-container .offer-minutes-number,
.offer-campaign-card-container .offer-seconds-number {
    font-size: 1.15rem;
    line-height: 1.25rem;
    font-weight: bold;
    color: #FFF;
}

.offer-campaign-card-container .offer-days-label,
.offer-campaign-card-container .offer-hours-label,
.offer-campaign-card-container .offer-minutes-label,
.offer-campaign-card-container .offer-seconds-label {
    font-size: 0.8rem;
    color: #666;
}

.offer-campaign-card-container .offer-campaign-card-content {
    text-align: center;
}

.offer-campaign-card-container .offer-button {
    background: #f26e21;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 1rem 0 1rem 0;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
}

.offer-campaign-card-container .offer-button:hover {
    background: #dc6019;
}

.offer-campaign-card-timer .offers-number {
    background: #333;
    color: #FFF;
    min-height: 4rem;
    min-width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    border: 1px solid #a8a8a8;
    padding: .75rem;
    flex-direction: column;
}

.offer-campaign-card-timer .offers-label {
    font-size: .75rem;
}


/* ----------------------------------------------
   7.9.2 Flash Sale Components
---------------------------------------------- */
.flash-sales-title-container {
    background-color: rgba(var(--bs-primary-rgb), 5%);
    padding: 1rem;
    border-radius: .5rem;
    gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    /* background-size: cover;
    background-position: center; */
}

.line-before-title-style {
    position: relative;
    display: flex;
    align-items: center;
    padding-inline-start: 10px;
}

.line-before-title-style::before {
    position: absolute;
    content: '';
    width: .175rem;
    height: 70%;
    background-color: #ff0000;
    inset-block: auto;
    inset-inline-start: 0;
    border-radius: 5px;
}

.flash-sales-duration-container {
    gap: .65rem;
    display: flex;
    align-items: end;
}

.flash-sales-duration-container .time-box-item-separator {
    color: #ff0000;
    font-weight: 600;
}

.flash-sales-duration-container .time-box-item {
    display: flex;
    flex-direction: column;
}

.flash-sales-duration-container .time-box-item span:first-child {
    font-size: .65rem;
    font-weight: 800;
    text-align: end;
    margin-bottom: .25rem;
}

.flash-sales-duration-container .time-box-item span:last-child {
    font-size: 1.2rem;
    line-height: 1.2rem;
    font-weight: 800;
    text-align: end;
}

/* ----------------------------------------------
   7.9.3 Features Section Components
---------------------------------------------- */
.features-section-container {
    border: 1px solid #E4E7E9;
    border-radius: 5px;
    padding: 15px;
    margin: 1rem 0;
    user-select: none;
}

body[theme="dark"] .features-section-container .features-section-item-box {
    color: #FFFFFF;
}

.features-section-container .features-section-item-box {
    display: flex;
    gap: .75rem;
    align-items: center;
    position: relative;
}

.features-section-container .features-section-item-box::after {
    position: absolute;
    content: '';
    height: 70%;
    width: 1px;
    background-color: #E4E7E9;
    inset-inline-end: 0;
}

@media screen and (min-width: 1024px) {
    .features-section-container .features-section-item-box.last-item::after {
        content: unset;
    }
}

.features-section-container .features-section-item-box img {
    width: 2.5rem;
}

[theme="dark"] .features-section-container .features-section-item-box img {
    filter: invert(1);
}

.features-section-container .features-section-item-box h6 {
    font-size: .85rem;
    font-weight: 700;
}

.features-section-container .features-section-item-box p {
    font-size: .8rem;
    line-height: 1rem;
    padding: .25rem 0;
}


/* ----------------------------------------------
   7.10 CONTENT COMPONENTS
---------------------------------------------- */

/* ----------------------------------------------
   7.10.1 Policy Pages Components
---------------------------------------------- */
.policy-page-header {
    display: flex;
    min-height: 130px;
    justify-content: center;
    align-items: center;
    background-color: #dddddd;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.policy-page-header::before {
    --background-color: 255, 255, 255;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--background-color), 1);
    z-index: 0;
    opacity: 80%;
}

[theme="dark"] .policy-page-header::before {
    --background-color: 0, 0, 0;
}

.policy-page-header .policy-page-header-content {
    z-index: 1;
    position: relative;
    --color: 0, 0, 0;
    color: rgba(var(--color), 1);
}

[theme="dark"] .policy-page-header .policy-page-header-content {
    --color: 255, 255, 255;
}

.policy-page-header .policy-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.policy-page-breadcrumbs-container {
    display: flex;
    gap: .5rem;
    font-size: 0.85rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    --color: 0, 0, 0;
    color: rgba(var(--color), 1);
}

[theme="dark"] .policy-page-breadcrumbs-container {
    --color: 255, 255, 255;
}

.policy-page-breadcrumbs-container a {
    --color: 0, 0, 0;
    color: rgba(var(--color), 1);
}

[theme="dark"] .policy-page-breadcrumbs-container a {
    --color: 255, 255, 255;
}

/* policy-pages-rich-editor-content || Start */
[theme="dark"] .policy-pages-rich-editor-content {
    color: #FFFFFF;
}

.policy-pages-rich-editor-content,
.policy-pages-rich-editor-content ul,
.policy-pages-rich-editor-content p {
    font-size: .85rem;
}

.policy-pages-rich-editor-content h1 {
    font-size: 1.6rem;
}

.policy-pages-rich-editor-content h2 {
    font-size: 1.4rem;
}

.policy-pages-rich-editor-content h3 {
    font-size: 1.3rem;
}

.policy-pages-rich-editor-content h4 {
    font-size: 1.2rem;
}

.policy-pages-rich-editor-content h5 {
    font-size: 1rem;
}

.policy-pages-rich-editor-content h6 {
    font-size: 1rem;
}

.policy-pages-rich-editor-content a {
}

.policy-pages-rich-editor-content img {
    border-radius: .25rem;
    margin: .85rem auto;
    max-width: 100%;
    display: block;
}

.policy-pages-rich-editor-content ul {
    padding: 0 1rem;
}

.policy-pages-rich-editor-content table {
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--bs-border-color);
    caption-side: bottom;
    border-collapse: collapse;
    background-color: var(--bs-table-bg, #fff);
    /* Default table background color */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.policy-pages-rich-editor-content table > thead {
    vertical-align: bottom;
    background-color: var(--bs-table-head-bg, #f8f9fa);
    /* Light gray head background */
    color: var(--bs-table-head-color, #000);
    /* Default head text color */
}

.policy-pages-rich-editor-content table tbody tr:nth-child(even) {
    background-color: var(--bs-table-striped-bg, #f2f2f2);
    /* Striped background for even rows */
}

.policy-pages-rich-editor-content table tbody tr:hover {
    background-color: var(--bs-table-hover-bg, #e9ecef);
    /* Hover effect */
}

.policy-pages-rich-editor-content table tbody,
.policy-pages-rich-editor-content table td,
.policy-pages-rich-editor-content table tfoot,
.policy-pages-rich-editor-content table th,
.policy-pages-rich-editor-content table thead,
.policy-pages-rich-editor-content table tr {
    border-color: var(--bs-border-color, #dee2e6);
    /* Default border color */
    border-style: solid;
    border-width: 1px;
    /* Default border width */
}

.policy-pages-rich-editor-content table th,
.policy-pages-rich-editor-content table td {
    padding: 0.75rem;
    /* Default padding */
    text-align: left;
    /* Align text to the left */
    border: 1px solid var(--bs-border-color, #dee2e6);
    /* Default cell borders */
    vertical-align: top;
    /* Top align text */
}

.policy-pages-rich-editor-content table caption {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: var(--bs-caption-color, #6c757d);
    /* Default caption color */
    text-align: center;
    caption-side: bottom;
    /* Default caption position */
}

.policy-pages-rich-editor-content table-bordered th,
.policy-pages-rich-editor-content table-bordered td {
    border: 1px solid var(--bs-border-color, #dee2e6);
    /* Add border for table cells */
}

/* Responsive Table Wrapper */
.policy-pages-rich-editor-content table th,
.policy-pages-rich-editor-content table td {
    font-size: 1rem;
    /* Standard font size */
    padding: 0.75rem;
    /* Maintain padding */
    text-align: left;
    /* Align text to the left */
    border: 1px solid var(--bs-border-color, #dee2e6);
    /* Standard borders */
    vertical-align: top;
    /* Align text vertically at the top */
}

/* Optional: Reduce font size and padding for smaller screens */
@media (max-width: 768px) {
    .policy-pages-rich-editor-content table {
        display: block;
    }

    .policy-pages-rich-editor-content table th,
    .policy-pages-rich-editor-content table td {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
}

/* Add striped rows for better readability */
.policy-pages-rich-editor-content table tbody tr:nth-child(even) {
    background-color: var(--bs-table-striped-bg, #f2f2f2);
    /* Light striped background */
}

/* Add hover effect */
.policy-pages-rich-editor-content table tbody tr:hover {
    background-color: var(--bs-table-hover-bg, #e9ecef);
    /* Subtle hover background */
}

/* Thin and Styled Scrollbar */
.policy-pages-rich-editor-content pre::-webkit-scrollbar,
.policy-pages-rich-editor-content table::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background-color: #f5f5f5;
}

.policy-pages-rich-editor-content pre::-webkit-scrollbar-thumb,
.policy-pages-rich-editor-content table::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

.policy-pages-rich-editor-content pre::-webkit-scrollbar-thumb:hover,
.policy-pages-rich-editor-content table::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Scrollbar for Firefox */
.policy-pages-rich-editor-content pre,
.policy-pages-rich-editor-content table {
    scrollbar-width: thin;
    scrollbar-color: #888 #f5f5f5;
}

.policy-pages-rich-editor-content .code-block-container {
    position: relative;
}

.policy-pages-rich-editor-content .code-block-container:before {
    position: absolute;
    background-color: #333;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.25rem;
}

/* policy-pages-rich-editor-content || End */

/* Code Block Styling */
pre {
    background-color: #f4f4f4;
    /* Light gray background */
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    position: relative;
    margin-bottom: 1rem;
}

/* Syntax Highlighting - Example */
pre code {
    color: #000000;
    /* Default text color */
}

pre code span.keyword {
    color: #007bff;
    /* Blue for keywords */
    font-weight: bold;
}

pre code span.string {
    color: #28a745;
    /* Green for strings */
}

pre code span.comment {
    color: #6c757d;
    /* Gray for comments */
    font-style: italic;
}

/* Copy Button Styling */
.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}

.copy-btn:hover {
    background-color: #0056b3;
}

/* ----------------------------------------------
   7.10.2 FAQ Components
---------------------------------------------- */
.faq-page-accordion .accordion-button {
    --bs-accordion-btn-bg: #FFFFFF;
    --bs-accordion-btn-color: #000000;
    font-size: .85rem;
    font-weight: 500;
    color: var(--bs-accordion-btn-color);
}

[theme="dark"] .faq-page-accordion .accordion-button {
    --bs-accordion-btn-bg: #3C3F41;
    --bs-accordion-btn-color: #FFFFFF;
}

.faq-page-accordion .accordion-button:focus {
    box-shadow: none;
}

.faq-page-accordion .accordion-body {
    font-size: .85rem;
}

.faq-page-accordion.accordion .accordion-button::after {
    content: "\f341";
    background-color: transparent;
    background-image: none;
    font-family: bootstrap-icons !important;
}

.faq-page-accordion.accordion .accordion-button:not(.collapsed):after {
    content: '\f340';
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.faq-page-accordion.accordion .accordion-button:not(.collapsed) {
    background-color: rgba(49, 164, 30, 20%);
    font-weight: 500;
}

.faq-page-accordion.accordion-flush .accordion-item {
    --bs-accordion-btn-bg: #FFFFFF;
    background-color: var(--bs-accordion-btn-bg);
    text-align: left;
    position: relative;
    z-index: 3;
    margin-bottom: 24px;
    transition: 0.4s ease-in-out;
    border-radius: 10px;
    overflow: hidden;
    border: 0;
    box-shadow: rgba(114, 114, 255, 0.12) 0 5px 15px 0;
}

[theme="dark"] .faq-page-accordion.accordion-flush .accordion-item {
    box-shadow: rgb(115 115 115 / 12%) 0 5px 15px 0;
}

[theme="dark"] .faq-page-accordion.accordion-flush .accordion-item {
    --bs-accordion-btn-bg: #3C3F41;
}

[theme="dark"] .faq-page-accordion .accordion-item {
    --bs-accordion-color: #FFFFFF;
    --bs-accordion-border-color: #3C3F41;
}

.faq-accordion-top-section {
    display: flex;
    align-items: center;
    padding: 2rem 0 2.5rem 0;
}

.faq-accordion-top-section img {
    height: 80px;
}


/* ----------------------------------------------
   8. PAGES (OPTIONAL)
---------------------------------------------- */