@font-face {
    font-family: ' IRANSansWebFaNum';
    src: url('../fonts/IransSansWebFa/IRANSansWeb(FaNum).eot');
    src: url('../fonts/IransSansWebFa/IRANSansWeb(FaNum).eot') format('embedded-opentype'), url('../fonts/IransSansWebFa/IRANSansWeb(FaNum).woff') format('woff'), url('../fonts/IransSansWebFa/IRANSansWeb(FaNum).ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'IranSansWebEn';
    src: url('../fonts/IransanswebEn/IRANSansWeb.eot');
    src: url('../fonts/IransanswebEn/IRANSansWeb.eot') format('embedded-opentype'), url('../fonts/IransanswebEn/IRANSansWeb') format('woff'), url('../fonts/IransanswebEn/IRANSansWeb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'iranyekan';
    src: url('../fonts/IranYekan/iranyekanwebthin.612285dc.eot');
    src: url('../fonts/IranYekan/iranyekanwebthin.612285dc.eot') format('embedded-opentype'), url('../fonts/IranYekan/iranyekanwebthin.4672fc69.woff') format('woff'), url('../fonts/IranYekan/iranyekanwebthin.0d88b7bd.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BNazzanin';
    src: url('../fonts/BNazzanin/BNazzanin.eot');
    src: url('../fonts/BNazzanin/BNazzanin.eot') format('embedded-opentype'), url('../fonts/BNazzanin/BNazzanin.woff') format('woff'), url('../fonts/BNazzanin/BNazzanin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Btitr';
    src: url('../fonts/Btitr/Btitr.eot');
    src: url('../fonts/Btitr/Btitr.eot') format('embedded-opentype'), url('../fonts/Btitr/Btitr.woff') format('woff'), url('../fonts/Btitr/Btitr.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'B-Badr';
    src: url('../fonts/B-Badr/B Badr.eot');
    src: url('../fonts/B-Badr/B Badr.eot') format('embedded-opentype'), url('../fonts/B-Badr/B Badr.woff') format('woff'), url('../fonts/B-Badr/B Badr.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AMaghreb';
    src: url('../fonts/AMaghreb/A-Maghreb-jadid.eot');
    src: url('../fonts/AMaghreb/A-Maghreb-jadid.eot') format('embedded-opentype'), url('../fonts/AMaghreb/A-Maghreb-jadid.woff') format('woff'), url('../fonts/AMaghreb/A-Maghreb-jadid.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "KalamehWebFaNum";
    src: url("../fonts/KalamehWebFaNum/WebFonts/eba1f76fb362790bbfa2f7a343904394.eot");
    src: url("../fonts/KalamehWebFaNum/WebFonts/eba1f76fb362790bbfa2f7a343904394.eot?#iefix")format("embedded-opentype"), url("../fonts/KalamehWebFaNum/WebFonts/eba1f76fb362790bbfa2f7a343904394.woff")format("woff"), url("../fonts/KalamehWebFaNum/WebFonts/eba1f76fb362790bbfa2f7a343904394.woff2")format("woff2"), url("../fonts/KalamehWebFaNum/WebFonts/eba1f76fb362790bbfa2f7a343904394.ttf")format("truetype"), url("../fonts/KalamehWebFaNum/WebFonts/eba1f76fb362790bbfa2f7a343904394.svg#KalamehWebFaNum")format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
    direction: rtl;
    margin-bottom: 0;
}
.el-hidden {
    display: none;
}
.navbar.navbar-topbar{

    min-height:55px;
}
strong {
    font-weight: 800;
}
.btn {
    border-radius: 5px;
}
.input-group #discount-code {
    border-radius: 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
    .input-group #apply-discount-btn {
    border-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn:not(.btn-addbasket):not(.btn-copy):not(.btn-rect):not(.btn-outline-primary):not(.btn-circle) i {
    transform: translateX(0);
    transition: all .2s ease-in-out;
    transition-property: transform;
}
    .btn:not(.btn-addbasket):not(.btn-copy):hover:not(.btn-rect):not(.btn-outline-primary):not(.btn-circle):not(.icon-notchange) i {
        transform: translateX(-0.25rem);
        transition: all .2s ease-in-out;
        transition-property: transform;
    }
.container.brand-container {
    border-bottom: 1px solid #e1e1e1;
}
.list-styled {
    padding-right: 0;
    padding-left: 2rem;
}
.navbar-light .navbar-brand, .navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover, .navbar-light .navbar-nav .nav-link {
    color: #444;
    font-size: 14px;
}
.btn-danger {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.dropdown-menu {
    text-align: right;
}

.nav.nav-tabs .nav-link + .nav-link {
    margin-right: 2rem;
    margin-left: 0;
}

.ms-auto {
    margin-right: auto !important;
    margin-left: inherit !important;
}

.input-group-merge .input-group-append > * {
    border-right-width: 0;
    border-left-width: 1px;
}

.input-group-merge .form-control {
    border-left-width: 0;
    border-right-width: 1px;
}

html {
    scroll-behavior: smooth;
}

body {
    direction: rtl;
    font-family: KalamehWebFaNum, IRANSansWebFaNum;
}

p {
    margin-bottom: 0.5rem;
}

a:hover {
    color: var(--color-secondary)
}

.text-primary {
    color: var(--color-primary)!important;
}
.btn-outline-primary {
    border-color: var(--button-primary) !important;
    color: var(--button-primary) ;
}
    .btn-outline-primary:hover {
        color: #fff;
    }
    .btn-primary {
    background-color: var(--button-primary);
    border-color: var(--button-primary);
    color: #fff;
}

        .btn-primary:focus, .btn-primary:hover, .btn-primary:active{
            background-color: var(--color-secondary)!important;
            border-color: var(--color-secondary)!important;
            color: #fff !important;
        }
.btn:has(.btn-primary):focus,.btn:has(.btn-primary):focus-visible, .btn:has(.btn-primary):hover, .btn:has(.btn-primary):active {
            background-color: var(--color-secondary);
            border-color: var(--color-secondary);
            color: #fff;
        } .bg-white {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
    } .card-img-top {
    padding: 15px;
}
/*---------checkbox custom 1-----------*/
.checkbox-wrapper-46 input[type="checkbox"] {
    display: none;
    visibility: hidden;
} .checkbox-wrapper-46 .cbx {
    margin: auto;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
} .checkbox-wrapper-46 .cbx span {
        display: inline-block;
        vertical-align: middle;
        transform: translate3d(0, 0, 0);
    } .checkbox-wrapper-46 .cbx span:first-child {
            position: relative;
            width: 21px;
            height: 21px;
            border-radius: 3px;
            transform: scale(1);
            vertical-align: middle;
            border: 1px solid #9098A9;
            transition: all 0.2s ease;
        } .checkbox-wrapper-46 .cbx span:first-child svg {
                position: absolute;
                top: 3px;
                left: 1px;
                fill: none;
                stroke: #FFFFFF;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 16px;
                stroke-dashoffset: 16px;
                transition: all 0.3s ease;
                transition-delay: 0.1s;
                transform: translate3d(0, 0, 0);
            } .checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child::before {
    transform: scale(7.5,4);
    opacity: 0;
    transition: all 0.6s ease;
} .checkbox-wrapper-46 .cbx span:first-child:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #506EEC;
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
} .checkbox-wrapper-46 .cbx:hover span:first-child {
    border-color: #506EEC;
} .checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
    background: #506EEC;
    border-color: #506EEC;
    animation: wave-46 0.4s ease;
} .checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child svg {
        stroke-dashoffset: 0;
    } .checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child:before {
        transform: scale(3.5);
        opacity: 0;
        transition: all 0.6s ease;
    } @keyframes wave-46 {
    50% {
        transform: scale(0.9);
    }
} .checkbox-wrapper-46 .title {
    margin-right: 10px;
}
/*------checkbox custom 1--------*/
/*------checkbox custom 2--------*/
.checkbox-wrapper-9 .tgl {
    display: none;
} .checkbox-wrapper-9 .tgl, .checkbox-wrapper-9 .tgl:after, .checkbox-wrapper-9 .tgl:before, .checkbox-wrapper-9 .tgl *, .checkbox-wrapper-9 .tgl *:after, .checkbox-wrapper-9 .tgl *:before, .checkbox-wrapper-9 .tgl + .tgl-btn {
        box-sizing: border-box;
    } .checkbox-wrapper-9 .tgl::-moz-selection, .checkbox-wrapper-9 .tgl:after::-moz-selection, .checkbox-wrapper-9 .tgl:before::-moz-selection, .checkbox-wrapper-9 .tgl *::-moz-selection, .checkbox-wrapper-9 .tgl *:after::-moz-selection, .checkbox-wrapper-9 .tgl *:before::-moz-selection, .checkbox-wrapper-9 .tgl + .tgl-btn::-moz-selection, .checkbox-wrapper-9 .tgl::selection, .checkbox-wrapper-9 .tgl:after::selection, .checkbox-wrapper-9 .tgl:before::selection, .checkbox-wrapper-9 .tgl *::selection, .checkbox-wrapper-9 .tgl *:after::selection, .checkbox-wrapper-9 .tgl *:before::selection, .checkbox-wrapper-9 .tgl + .tgl-btn::selection {
            background: none;
        } .checkbox-wrapper-9 .tgl + .tgl-btn {
            outline: 0;
            display: block;
            width: 4em;
            height: 2em;
            position: relative;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        } .checkbox-wrapper-9 .tgl + .tgl-btn:after, .checkbox-wrapper-9 .tgl + .tgl-btn:before {
                position: relative;
                display: block;
                content: "";
                width: 50%;
                height: 100%;
            } .checkbox-wrapper-9 .tgl + .tgl-btn:after {
                right: 0;
            } .checkbox-wrapper-9 .tgl + .tgl-btn:before {
                display: none;
            } .checkbox-wrapper-9 .tgl:checked + .tgl-btn:after {
            right: 50%;
        } .checkbox-wrapper-9 .tgl-flat + .tgl-btn {
    padding: 2px;
    transition: all 0.2s ease;
    background: #fff;
    border: 4px solid #f2f2f2;
    border-radius: 2em;
} .checkbox-wrapper-9 .tgl-flat + .tgl-btn:after {
        transition: all 0.2s ease;
        background: #f2f2f2;
        content: "";
        border-radius: 1em;
    } .checkbox-wrapper-9 .tgl-flat:checked + .tgl-btn {
    border: 4px solid var(--color-primary);
} .checkbox-wrapper-9 .tgl-flat:checked + .tgl-btn:after {
        right: 50%;
        background: var(--color-primary);
    }
/*------checkbox custom 2 End--------*/
.zoom-img {
    width: 100%;
} .add-buttons {
    display: flex;
    justify-content: center;
} .cat-mob {
    display: grid;
    grid-template-rows: auto; /* 1 row */
    grid-template-columns: repeat(2, 1fr); /* 5 columns, each taking 1 fraction of the available space */
    grid-gap: 10px; /* 5 columns, each taking 1 fraction of the available space */

    margin: 10px 10px;
} .cat-mob .cat1-heading {
        cursor: pointer;
    } .cat-mob .cat1-items {
        padding: 1rem 2rem;
        text-align: center;
        border: 2px solid var(--rgba-primary-3);
        display: flex;
        flex-direction: column;
        border-radius: 5px;
        cursor: pointer;
    } .cat-mob .cat1-items img {
            width: 30px;
            margin: 0 auto 5px auto;
            height: auto;
        } 
      
      .nav-item.dropdown.depth2 .dropdown-menu, .nav-item.dropdown.depth1 .dropdown-menu{
    width:100%;
} .accordion-cat1 .accordion-item:nth-child(2n+1) .cat1-heading {
    background-color: var(--rgba-primary-1)
} .offcanvas-end {
    max-width: 85%;
} .cat2-mob {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 470px;
    max-width: 85%;
    flex-direction: column;
    overflow: auto;
    z-index: 10;
    background-color: white;
    color: black;
} 
   .cat2-mob.multi {

    display: none;
   
}

    .cat2-mob:has(.multi) .cat1-head {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 2fr 1fr;
    }
        
        .cat2-mob .cat1-head {
        text-align: center;
        padding: 15px 0;
      
    }
    .cat2-mob .cat1-head label {
        margin-left: auto;
        display: flex;
        font-size: 19px;
    } .cat2-mob .cat1-head span {
            font-size: 18px;
            font-weight: 800;
        } .accordion-item .cat1-heading {
    padding: 0.75rem 1rem;
    font-size: 15px;
} .cat2-body .cat3 {
    padding: 0 0 0.5rem 0;
} .cat2-body .cat3 .cat3-heading {
        font-weight: 800;
        position: relative;
    } .cat2-body .cat3:first-child .cat3-heading {
        color: var(--color-primary);
    } .cat2-body .cat3:first-child {
        margin-bottom: 0.75rem;
    } .cat2-body .cat3:first-child .cat3-heading:after {
            content: "\f104";
            font-family: "Font Awesome 6 Pro";
            margin-right: 10px;
        } .cat2-body .cat3:not(:first-child) .cat3-heading:not(.singlecat):after {
        content: "";
        display: inline-block;
        height: 0.7em;
        vertical-align: bottom;
        width: 90%;
        margin-right: 10px;
        margin-left: -100%;
        border-top: 1px solid black;
    } .cat2-body .cat3 .cat3-body {
        display: flex;
        flex-direction: column;
    } .cat2-body .cat3 .cat3-body .cat4 {
            padding: 0.4rem 1rem;
        } .cat2-body .cat3 .cat3-body .cat4:not(:last-child) {
                border-bottom: 1px solid #99959033;
            } .accordion-item .cat1-heading[aria-expanded="true"]::after {
    content: "\f107";
    font-family: "Font Awesome 6 Pro";
    float: left;
    transform: rotate(180deg);
    transition: transform 0.3s ease; /* Optional: Adds a smooth transition effect */
} .accordion-item .cat1-heading::after {
    content: "\f107";
    font-family: "Font Awesome 6 Pro";
    float: left;
    transition: transform 0.3s ease; /* Optional: Adds a smooth transition effect */
}
.cat2-mob .cat1-head button {
    margin-inline: auto 15px;
   
    position: inherit !important;
} .swiper-gallery {
    overflow: hidden;
    margin-top: 15px;
}
  
  :not(.toast-header):not(.alert) > .btn-close {
    z-index: 9;
    color: #22190d !important;
    opacity: 1;
} .accordion-cat1 {
} #modalCategory .btn-close {
    left: 1.5rem;
    right: auto;
}
.cat2-single:is(:first-child) {
}
    .cat2-single {
    padding: 0.6rem 2rem;
}
    .cat2-single:not(:last-child) {
        border-bottom: 1px solid #99959033;
    }



.cat1-link {
    padding: 2rem 2rem 1rem 2rem;
    color: var(--color-primary);
    font-weight: 800;
}

    .cat1-link::after {
        content: "\f104";
        font-family: "Font Awesome 6 Pro";
        margin-right: 10px;
    }

.cat2-d1 .cat2-d1-heading {
    font-weight: 800;
    position: relative;
}

    .cat2-d1 .cat2-d1-heading::after {
        content: "";
        display: inline-block;
        height: 0.7em;
        vertical-align: bottom;
        width: 90%;
        margin-right: 10px;
        margin-left: -100%;
        border-top: 1px solid black;
    }



    .cat2-d1 {
        padding: 0.6rem 2rem 0 2rem;
    }
        .cat2-d1 .cat2-d1-body .cat3-single {
            padding: 0.8rem 1rem;
        }
            .cat2-d1 .cat2-d1-body .cat3-single:is(:last-child) {
                border-bottom: 1px solid #000;
            }
        
        
        .cat2-d1 .cat2-d1-body {
            display: flex;
            flex-direction: column;
        }

            .cat2-d1 .cat2-d1-body .cat3-single:not(:last-child) {
                border-bottom: 1px solid #99959033;
            }
            /* Show the cat2-mob div when the associated radio button is checked */
            input[name="cat2-radio"]:checked + label + .cat2-mob {
                display: flex !important;
            } 
            .mob-nav {
    display: none;
} .navbar {
    padding: 0;
}
.nav-body .navbar-nav {
    padding: 0;
}
    .nav-body {
    margin-bottom: 5px;
}
        . nav-body .category .container{
            padding-inline:0;
        }
        .navbar-collapse#navbarCollapse li a.text-light {
            color: white;
            font-weight: 700;
        } .nav.nav-tabs .nav-link + .nav-link {
    margin-right: 2rem;
    margin-left: 0;
} li.nav-item dropdown a.nav-link {
    color: var(--header-colored-text);
} li.nav-item dropdown a.nav-link:hover {
        color: var(--header-colored-hover);
    }
.brand-container {
    padding: 0.9rem 0;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 4fr 3fr;
}
  .brand-container ul li {
        margin: auto 0;
    }
    .brand-container ul {
        justify-self: end;
        display: flex;
        align-items: center;
    }
#main-search-resault {
    width: 100%;
    max-width: 800px;
    left: 0;
    transform: none;
    right: 0; 
}
    .brand-container > div:first-child {
        justify-self: start; 
    }
.brand-container .search-big-div {
    justify-self: start;
    width: 90%;
    grid-column: 2;
    margin-right: 1rem;
    position: relative;
    margin: auto;
}
 
      .brand-container .search-big-div #main-search-resault {
            border-radius:5px;
            overflow:hidden;
        }

    .brand-container .search-big-div .search-input {
        background-color: #A0A0A017;
        padding: 2px 0px;
        margin: auto;
    } .brand-container .search-big-div div svg {
            font-size: 1.2rem;
            vertical-align: middle;
            opacity: 0.7;
        } .brand-container .search-big-div input {
            border: none;
            width: 93%;
            background-color: initial;
            outline: none;
            padding: 10px 19px;
        }
/* General responsive layout using auto-fit */
.navbar-brand {
    margin-right: 0;
} .topnav-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Responsive columns */
} .topnav-container .top-text {
        grid-column: 1 / 2; /* Start in the first column */
        grid-row: 1; /* Stay in the first row */
    } .topnav-container .top-links {
        grid-column: 2 / 4; /* Span across the next available column */
        grid-row: 1; /* Stay in the first row */
        justify-content: end; /* Align to the end of the column */
    } .topnav-container ul {
        display: flex;
        flex-direction: row;
        padding: 0;
    } .topnav-container ul li {
            margin: 0 0.5rem;
            display: inline-block;
        } .topnav-container .top-social {
        grid-column: 4; /* Move to the next available column */
        grid-row: 1; /* Stay in the first row */
        justify-self: end; /* Align to the start of the column */
    }
.tinylogin-button, .tiny-user-button {
    display: none;
    padding-left: 15px;
    font-size: 30px;
} 
          
          
          @media (min-width: 1200px) {
        .container, .container-lg, .container-md, .container-sm, .container-xl {
            max-width: 1140px;
        }
    } @media (min-width: 1500px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1440px;
    }
} a {
        color: #1f1f1f;
    } .container.col2 {
        display: grid;
        grid-template-rows: auto; /* 1 row */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 20px;
    } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: inherit;
    }
#main-loader {
    width: 100%;
    position: fixed;
    height: 100%;
    background-color: #00000036;
    display: flex;
    justify-content: center;
    z-index: 100;
}


    #main-loader .loader-logo {

        position:static;
        margin-block:auto;
    }
        #main-loader .mainloader {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 32px 0 #fff, -32px 0 #fff;
        position: relative;
        animation: mainloaderflash 0.5s ease-out infinite alternate;
    }
@keyframes mainloaderflash {
    0% {
        background-color: #fff;
        box-shadow: 16px 0 #c4c4c4, -16px 0 #777;
    }

    50% {
        background-color: #c4c4c4;
        box-shadow: 16px 0 #777, -16px 0 #fff;
    }

    100% {
        background-color: #777;
        box-shadow: 16px 0 #fff, -16px 0 #c4c4c4;
    }
}
        .action-item {
        padding: 30px;
        border: 1px solid #f9e7e7;
        border-radius: 6px;
        margin-bottom: 30px;
    } .nstSlider {
        background: none;
        width: 100%;
        height: 3px;
        background: #f0f0f0;
        direction: ltr;
        margin-bottom: 13px;
    } .nstSlider .bar {
            max-width: 100% !important;
            background: #ee403d;
            height: 3px;
            top: 0;
        } .nstSlider .price-range-grip {
            background: #ee403d;
            width: 11px;
            height: 11px;
            top: -3.6px;
        } .range-label-area {
        direction: rtl;
        text-align: right;
        margin-bottom: 30px;
        display: block;
        align-items: center;
        justify-content: space-between;
        margin-top: 5px;
    } .range-label-area .range-lbl {
            font-size: 14px;
            color: #999999;
            font-weight: 500;
            margin-left: 5px;
        } .range-label-area .price-range-label {
            width: 100%;
            direction: ltr;
            text-align: center;
            font-weight: 500;
            border: none;
            height: 35px;
            border-bottom: 1px solid;
            outline: none;
        } .currency-symbol {
        font-weight: 500;
        margin-right: 10px;
    } .range-label-area .range-lbl {
        font-size: 14px;
        color: #999999;
        font-weight: 500;
        margin-left: 5px;
    } .flex {
        display: flex;
    } .min-price {
        margin-bottom: 10px;
    } .min-price div {
            padding: 0;
        }
.filter-section #filterNav {
    padding: 1rem 0.5rem;
    border-radius: 5px;
    box-shadow: 0px -1px 2px 1px var(--rgba-primary-4);
} .filter-section {
        padding: 0 0.7rem;
    } .card-img-hover .card-img-front {
        margin-right: -100%;
        margin-left: 0;
    } .first-cat {
        padding-left: 0.5rem;
    }
.breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-left: 0.3rem;
    padding-right: 0;
    color: var(--color-primary) !important;
    font-size: 10px;
} .owl-item .item::marker {
        display: none !important;
    } .owl-item .item {
        list-style: none;
    } .bask-button:hover {
        color: #909090 !important;
    } .bask-button {
        color: #767676 !important;
        transition: all .1s ease-in-out;
        transition-property: all;
        transition-property: color;
        background: no-repeat;
        border: none;
    } .rem-b-c {
    } .form-check-img > .form-check-input {
        opacity: 0.2;
    } .disable-color {
        position: absolute;
        top: 48%;
        right: -11px;
        left: 0px;
        border: 1.1px solid black;
        transform: rotate(45deg);
        width: 127%;
    } .tooltip-inner {
        border-radius: 6px;
        font-family: KalamehWebFaNum, IRANSansWebFaNum;
    } .form-check > .form-check-label {
        margin-right: .875rem;
        margin-left: 0;
    } .color-check {
        width: 2.5rem;
    } .color-box {
        transition: all .3s ease;
        border: solid 2px #0000;
    } .color-box .a-tooltip {
            top: 145%;
        } .color-box:hover {
            border: solid 2px var(--color-primary) !important;
            border-radius: 25px !important;
            padding: 1px !important;
            transition: all .3s ease;
        } .color-check .color-check-input {
        width: 30px;
        height: 30px;
        margin: 0;
        cursor: pointer;
        background: none;
    } .color-check span {
        width: 45px !important;
        height: 45px !important;
        display: block;
        border-radius: 50%;
    } .color-check span.active {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M9 1 3.5 7 1 4.273'/%3E%3C/svg%3E");
            background-size: 70%;
            border-color: #0f0f0f45;
            border-width: 2px;
            background-repeat: no-repeat;
            background-position: center;
        } .fs-6 {
        font-size: 2rem !important;
    } .fs-7 {
        font-size: 2.5rem !important;
    } .fs-8 {
        font-size: 3rem !important;
    } .fs-15 {
        font-size: 15px;
    }.fs-35{
         font-size: 2.5rem;
     } 
     .fs-22{
         font-size:22px;
     }
     .fs-16{
         font-size:16px;
     }
      .form-check-input:disabled {
        cursor: not-allowed !important;
        pointer-events: auto !important;
    } .form-check-color.form-check-input {
        width: 2rem;
        height: 2rem;
    } .form-check-input:checked[type="radio"] {
        background-image: none;
    } #listing-loading img {
        width: 128px;
        margin: 10% auto;
        display: inline;
    } #listing-loading {
        border-style: none;
        max-width: 100%;
        font-size: 11px !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        background-color: #e0e0e0;
        opacity: 0.6;
        text-align: center;
        z-index: 5;
        transition: all ease .5s;
        display: none;
    } .listing-data {
        position: relative;
    } .remove-f {
        background: #0ff0;
        border: none;
        pointer-events: auto;
        cursor: pointer;
    } .left-nav {
        justify-content: left;
    }

.list-styled-link {
    width: max-content;
}

.list-styled-div {
        width: max-content;
    } .black-color {
        color: #000 !important;
    } .list-styled-link i {
        font-size: 11px;
        margin-right: 2px;
    } .list-styled-link svg {
        font-size: 11px;
        margin-right: 2px;
    } .list-styled-div a svg {
        font-size: 11px;
        margin-right: 2px;
    } .p-divider {
        border-bottom: 1px solid;
        margin: 12px 0;
    } .loader-spinner {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: block;
        margin: 15px auto;
        position: relative;
        color: #FFF;
        left: -100px;
        box-sizing: border-box;
        animation: shadowRolling 2s linear infinite;
    } @keyframes shadowRolling {
        0% {
            box-shadow: 0px 0 var(--rgba-primary-1), 0px 0 var(--rgba-primary-1), 0px 0 var(--rgba-primary-1), 0px 0 var(--rgba-primary-1);
        }

        12% {
            box-shadow: 100px 0 var(--rgba-primary-2), 0px 0 var(--rgba-primary-2), 0px 0 var(--rgba-primary-2), 0px 0 var(--rgba-primary-2);
        }

        25% {
            box-shadow: 110px 0 var(--rgba-primary-5), 100px 0 var(--rgba-primary-5), 0px 0 var(--rgba-primary-5), 0px 0 var(--rgba-primary-5);
        }

        36% {
            box-shadow: 120px 0 var(--rgba-primary-9), 110px 0 var(--rgba-primary-9), 100px 0 var(--rgba-primary-9), 0px 0 var(--rgba-primary-9);
        }

        50% {
            box-shadow: 130px 0 var(--rgba-primary-9), 120px 0 var(--rgba-primary-9), 110px 0 var(--rgba-primary-9), 100px 0 var(--rgba-primary-9);
        }

        62% {
            box-shadow: 200px 0 var(--rgba-primary-9), 130px 0 var(--rgba-primary-9), 120px 0 var(--rgba-primary-9), 110px 0 var(--rgba-primary-9);
        }

        75% {
            box-shadow: 200px 0 var(--rgba-primary-5), 200px 0 var(--rgba-primary-5), 130px 0 var(--rgba-primary-5), 120px 0 var(--rgba-primary-5);
        }

        87% {
            box-shadow: 200px 0 var(--rgba-primary-2), 200px 0 var(--rgba-primary-2), 200px 0 var(--rgba-primary-2), 130px 0 var(--rgba-primary-2);
        }

        100% {
            box-shadow: 200px 0 var(--rgba-primary-1), 200px 0 var(--rgba-primary-1), 200px 0 var(--rgba-primary-1), 200px 0 var(--rgba-primary-1);
        }
    } .pl, .pl__worm {
        position: relative;
        /*    left: 96%;
*/ animation-duration: 3s;
        animation-iteration-count: infinite;
    } #spinner {
        float: right !important;
    } .pl {
        animation-name: bump;
        animation-timing-function: linear;
        width: 1em;
        height: 1em;
    } .pl__ring {
        stroke: white;
        transition: stroke 0.3s;
    } .pl__worm {
        animation-name: worm;
        animation-timing-function: cubic-bezier(0.42,0.17,0.75,0.83);
    } :root {
    --bs-danger-rgb: rgb(228, 37, 19);
    --bs-danger-light-rgb: rgba(228, 37, 19, 0.26);
    --bs-warning-light-rgb: #ff97361a;
    --bs-success-light-rgb: #28bb7436;
    --bs-info-light-rgb: #3b86ff36;
} .bg-warning-light {
        background-color: var(--bs-warning-light-rgb) !important;
    } .bg-danger-light {
        background-color: var(--bs-danger-light-rgb) !important;
    } .bg-success-light {
        background-color: var(--bs-success-light-rgb) !important;
    } .bg-info-light {
        background-color: var(--bs-info-light-rgb) !important;
    }
/* Dark theme */
@media (prefers-color-scheme: dark) {
        :root {
            --bg: hsl(var(--hue),10%,10%);
            --fg: hsl(var(--hue),10%,90%);
        }

        .pl__ring {
            stroke: hsla(var(--hue),10%,90%,0.1);
        }
    }
/* Animations */
@keyframes bump {
        from, 42%, 46%, 51%, 55%, 59%, 63%, 67%, 71%, 74%, 78%, 81%, 85%, 88%, 92%, to {
            transform: translate(0,0);
        }

        44% {
            transform: translate(1.33%,6.75%);
        }

        53% {
            transform: translate(-16.67%,-0.54%);
        }

        61% {
            transform: translate(3.66%,-2.46%);
        }

        69% {
            transform: translate(-0.59%,15.27%);
        }

        76% {
            transform: translate(-1.92%,-4.68%);
        }

        83% {
            transform: translate(9.38%,0.96%);
        }

        90% {
            transform: translate(-4.55%,1.98%);
        }
    } @keyframes worm {
        from {
            stroke-dashoffset: 10;
        }

        25% {
            stroke-dashoffset: 295;
        }

        to {
            stroke-dashoffset: 1165;
        }
    }
 .log-red-alert {
        border-radius: 5px;
        text-align: center;
        margin-top: 10px;
        font-size: 15px;
    } .error-wrapper {
        border: 1px solid red;
    } @media (min-width: 768px) {
        .offset-md-3 {
            margin-right: 25%;
        }
    } .dropend-toggle::after {
        content: "\f104";
        float: left;
    } .draw-line {
        border-bottom: 0.5px solid #2020202b !important;
    } .font-sm {
        font-size: 13px !important;
    } .unAProd {
        background-color: #ff00000f;
        padding: 7px;
        border-radius: 5px;
    } .align-center {
        align-content: center;
    } .dropdown-toggle::after, .dropend-toggle::after {
        float: left;
    } .filter-list {
        border-right: 3px solid var(--color-primary) !important;
    } #filters-sidebar .nav-item a {
        font-weight: 800;
        font-size: 18px !important;
    } #filter-price-sidebar .nav-item a {
        font-weight: 800;
        font-size: 18px !important;
    } .sort strong {
        font-weight: 800;
    } @media (min-width: 992px) {
        .offset-lg-1 {
            margin-right: 8.33333%;
            margin-left: inherit;
        }

        .offset-lg-2 {
            margin-right: 16.66667%;
            margin-left: inherit;
        }

        .offset-lg-3 {
            margin-right: 25%;
            margin-left: inherit;
        }

        .offset-lg-4 {
            margin-right: 33.33333%;
            margin-left: inherit;
        }

        .offset-lg-5 {
            margin-right: 41.66667%;
            margin-left: inherit;
        }

        .offset-lg-6 {
            margin-right: 50%;
            margin-left: inherit;
        }

        .offset-lg-7 {
            margin-right: 58.33333%;
            margin-left: inherit;
        }

        .offset-lg-8 {
            margin-right: 66.66667%;
            margin-left: inherit;
        }

        .offset-lg-9 {
            margin-right: 75%;
            margin-left: inherit;
        }
    } .p-des .div-des p {
        margin-bottom: 0.5rem;
    } .p-des .div-des {
        overflow: hidden;
    } .p-des .inactive {
        max-height: 100px;
        pointer-events: none;
    } .p-des .active {
        max-height: 500px; /* Adjust based on your content */
        pointer-events: auto;
        overflow-y: scroll;
    } .p-des button {
        background: none;
        border: none;
        padding: 0;
        width: auto;
        color: var(--color-primary);
        margin-bottom: auto;
    } .fs-11 {
        font-size: 11px;
    } hr .light {
    } .fs-14 {
        font-size: 14px;
    }
      .fs-18{
          font-size:18px;
      }
      .prop2-div.form-check > .form-check-input:checked + .form-check-label {
        border: 0.13rem solid;
    } .card-body .personal-info div {
        border: 2px solid #0f0c071a;
        border-radius: 4px;
        padding: 10px 15px;
    } .edit-profile {
        float: left;
        margin: 10px;
    } .float-left {
        float: left;
    } .profile-nav .list-group {
        border-right: 2px solid rgba(0, 0, 0, 0.21);
    } .profile-nav .list-group .list-group-item {
            padding: 0.4rem 10px 0.4rem 0;
            border: none;
            margin-right: -3px;
        } .profile-nav .list-group .list-group-item-action {
            padding: 0.4rem 10px 0.4rem 0 !important;
            font-size: 14px;
        } .profile-nav .list-group .list-group-item-action.active {
                border-right: 2px solid #0009 !important;
                margin-right: -3px !important;
                background-color: var(--rgba-primary-1);
            } .profile-nav .list-group .list-group-item-action:focus, .list-group-item-action:hover {
                border-right: 2px solid #0009 !important;
                margin-right: -3px !important;
            } .phone-verify-badge {
        border-radius: 5px;
        margin-right: 8px;
        font-size: 12px;
    }
button.no-back {
    background: none;
    border: none;
    color: inherit;
    border: none;
} .fs-19 {
        font-size: 19px;
    } .fw-800 {
        font-weight: 800;
    } .rp::placeholder {
        direction: rtl; /* This sets the direction of the placeholder text to RTL */
        text-align: right; /* This aligns the placeholder text to the right */
    } .modal-dialog form {
        width: 100%;
    } .profile-info .card {
        border: none !important;
    } .profile-info h6 {
        border-bottom: 2px solid var(--color-primary);
        padding: 6px 0;
        width: fit-content;
    } .edit-address .dropdown .dropdown-menu.show a {
        padding: 0.8rem 1.25rem;
    } .edit-address .dropdown .dropdown-menu.show button {
        padding: 0.8rem 1.25rem;
    } .address-info {
        border-radius: 6px;
        padding: 2rem 1.5rem ;
        border-radius: 4px;
    } .address-info p.sec {
            font-size: 13px;
            color: #4b4b4b;
        } .edit-address {
        float: left;
        margin: 10px;
    } .fs-12 {
        font-size: 12px;
    } .fs-13 {
        font-size: 13px;
    } .fs-16 {
        font-size: 16px;
    } .fs-17 {
        font-size: 17px;
    } .fs-19 {
        font-size: 19px;
    } .fs-20 {
        font-size: 20px;
    } .modal-footer, .modal-header {
        padding: 0.9rem 2rem;
    } .prop2-box.disabled:hover {
        border: .1rem solid #e3e3e3;
        text-shadow: none;
    }
.prop2-box {
    border: .1rem solid #e3e3e3;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    width: 2rem !important;
    margin: 0 2px;
    transition: all .3s ease;
    position: relative;
    min-width: fit-content;
    font-size: 12px;
} .prop2-box ::after {
            border-radius: .3rem;
            bottom: .5rem;
            content: "";
            height: .1rem;
            left: 50%;
            right: 50%;
            position: absolute;
            transition: all .3s ease;
            top: 1.56rem;
        }
.form-check-size > .form-check-input:disabled ~ .form-check-label {
    background-color: #e4e4e4;
}

.form-check > .form-check-input:disabled + .form-check-label {
    color: #828282 !important;
}
        .prop2-box:not(.disabled):hover ::after {
            background-color: var(--color-primary);
            right: .42rem;
            left: .42rem;
        }
.prop2-box .form-check-input:not([disabled]) + label:hover {
    border-color: #000;
    text-shadow: 0.06rem 0 #000;
} 
.prop2-box .form-check-input + label {
            border: .1rem solid #e3e3e3;
        }

.form-check-size > .form-check-input:checked ~ .form-check-label {
        border: .1rem solid #e3e3e3;
    } .prop2-box .form-check-input.active + label {
        border-color: #000 !important;
        text-shadow: 0.06rem 0 #000;
    }
        .prop2-box .form-check-input.active + label::after {
            background-color: var(--color-primary);
            right: .42rem;
            left: .42rem;
            transition: all .3s ease;
        } .prop2-box label {
        margin: 0 !important;
        padding: .2rem !important;
    } .card-collapse .card-footer .prop2 a:hover {
        color: inherit;
    } .card-collapse .card-footer .prop2 ::after {
        border-radius: .3rem;
        bottom: .5rem;
        content: "";
        height: .2rem;
        left: 50%;
        position: absolute;
        right: 50%;
        transition: all .3s ease;
    } .card-collapse .card-footer .prop2 ::after:hover {
            background-color: #d4af37;
            left: .7rem;
            right: .7rem;
        } 
      
      
      span.color {
        width: 1.125rem;
        height: 1.125rem;
        display: block;
        border-radius: 50%;
    }
.quant-row .quant-change {
    padding: 0.5rem;
    box-shadow: 0px 0px 4px #00000061;
    border-radius: 4px;
    justify-content: center;
} .b-info-row a {
        align-content: center;
    } .quant-change .deactive {
        color: var(--color-primary-deactive);
        cursor: not-allowed;
    } .quant-loader .spinner-border {
        height: 1.5rem;
        position: absolute;
        width: 1.5rem;
        left: 37%;
    } .quant-loader {
        position: relative;
        display: none;
    } .quant-loader.active {
            display: block;
        } span.deactive {
        visibility: hidden;
    } .quant-change {
        position: relative;
    } .cart-rows li {
        overflow: hidden;
        display: block;
        padding: 2rem 1rem; /* 2rem top/bottom padding, 1rem left/right padding */
        opacity: 1;
        height: auto;
        transition: opacity 0.8s ease, height 1s ease, padding 1s ease;
    } .cart-rows li.deactive {
            opacity: 0; /* Fade out */
            height: 0 !important; /* Collapse height */
            padding: 0 1rem; /* Remove top/bottom padding, keep left/right padding */
        } #shopCartp.deactive {
        opacity: 0; /* Fade out */
    } #shopCartp {
        opacity: 1;
        transition: opacity 0.8s ease, height 1s ease, padding 1s ease;
    } .checkout-products ul.ck-ul {
        max-height: 22rem !important;
        overflow-y: scroll;
        overflow-x: clip;
    } .d-p {
        float: left;
        border: 1px dotted black;
        padding: 7px;
        bottom: 1rem;
        position: relative;
        border-radius: 4px;
        background: rgba(17, 23, 117, 0.61) !important;
        color: white !important;
    } .pay-loader.active {
        display: block;
    } .pay-loader {
        display: none;
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
        background: #060b18ad;
    } .pay-loader .spinner-border {
            height: 1.5rem;
            position: absolute;
            width: 1.5rem;
            left: 47%;
            top: 47%;
        } .scroll-tbl {
        max-height: 15rem; /* Adjust height to show exactly two rows */
        overflow-y: auto;
    } .checkout-page .check-title {
        background: var(--color-gradiant1);
        padding: 14px 10px;
        border-radius: 3px;
        color: white;
    } .checkout-page form .list-group {
        border-right: 2px solid rgba(0, 0, 0, 0.21);
    } .btn-prod-detail:hover {
        background: var( --site-primary-hover);
        color: white;
    } .btn-prod-detail {
        background: var( --color-primary);
        color: white;
    } .product-other-buttons{
    display:flex;
    gap:0.8rem;
    direction:ltr;
} .product-other-buttons button {
    background: none;
    border: none;
    font-size: 1.8rem;
} .product-other-buttons .fav button::after {
        content: "\f004";
        font-family: "Font Awesome 6 Pro";
        color: red;
    } .product-other-buttons .fav button:hover::after, .product-other-buttons .fav button.active {
        font-weight: 900;
    } .product-other-buttons .share button::after {
    content: "\f1e0";
    font-family: "Font Awesome 6 Pro";
}





      
      
      .product-other-buttons .share button:hover::after, .product-other-buttons .fav button.active {
        font-weight: 900;
    } .add-buttons {
        gap: 10px;
    }
.quant-row {
    gap: 10px;
} .inbasket {
        text-align: center;
        margin-top: 10px;
    }
#addbutton-loader, .login-button-loader, #quant-loader {
    height: 100%;
    display: none;
    padding: 0;
    position: relative;
    top: -10%;
}
.login-button-loader {
    padding-inline: 1.8rem;
}
    #addbutton-loader.active, .login-button-loader.active, #quant-loader.active {
        display: block;
    }

    #addbutton-loader .mainloader {
        top: 35%;
        margin: auto;
        position: absolute;
        left: 48%;
    }
.login-button-loader .mainloader {
    top: 20%;
    margin: auto;
    position: absolute;
    left: 43%;
}
#quant-loader .loader2 {
    width: 30px !important;
    height: 30px !important;
    left: auto !important;
    right: -3px !important;
    top: -3px !important;
    position: absolute !important;
}

.loader2 {
    position: relative;
    width: 100px;
    height: 100px;
}

.loader2:before , .loader2:after{
  content: '';
  border-radius: 50%;
  position: absolute;
  inset: 0;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
}
    .loader2:after {
        box-shadow: 0 2px 0 var( --color-primary) inset;
        animation: rotate 2s linear infinite;
    }

@keyframes rotate {
  0% {  transform: rotate(0)}
  100% { transform: rotate(360deg)}
}








#add-quantch {
    background: white;
    width: clamp(70px, 185px, 200px) !important;
    display: flex;
    justify-content: space-evenly;
}
#removebask-item button {
    display: flex;
}
    #removebask-item {
    background: white;
    padding: 11px 9px;
} #removebask-item button svg {
            font-size: 23px;
        } #removebask-item button svg:hover {
                color: red;
            }
/*-------Custom ToolTip Start--------*/
.a-tooltip-container {
        position: relative;
        display: inline-block;
    } .a-tooltip {
        visibility: hidden;
        background-color: var(--color-primary);
        color: #fff;
        text-align: center;
        border-radius: 4px;
        position: absolute;
        z-index: 1;
        top: 105%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 0.3s;
        padding: 0.3rem;
        max-width: 185px;
    } .a-tooltip p {
        margin: 0;
    } .a-tooltip::before {
        content: '';
        position: absolute;
        bottom: 100%; /* Arrow pointing down */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #0000 transparent var(--color-primary) #1c111100;
    } .a-tooltip-container:hover .a-tooltip {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s;
}
/*-------Custom ToolTip End--------*/
.a-tooltip-container .spec-content {
    background-color: var(--rgba-primary-1);
    border-radius: 4px;
    cursor: pointer;
} .a-tooltip-container .spec-content .title {
        color: #00000070;
        font-size: 0.8rem;
    } .a-tooltip-container .spec-content .spec {
        color: var(--site-primary-text);
        font-size: 1rem;
        font-weight: 800;
    } .a-tooltip-container .spec-content div p {
        margin: 8px 0;
    } .a-tooltip-container .spec-content {
    padding: .01rem 1rem;
}
.product-title * {
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 0;
} .product-detail-prop1 {
} .product-detail-prop1 .prop-title, .product-detail-prop2 .prop-title {
        font-weight: 800;
        font-size: 1rem;
    } .product-detail-prop1 .prop-val, .product-detail-prop2 .prop-val {
        margin-right: 5px;
        font-size: 0.9rem;
        color: #484848d9;
    }
/*-------Slick Slider--------*/
/* .slick-vertical .slick-slide {
        margin: 5px 0;
    }

    #gallery-slider {
        direction: ltr;
    }

        #gallery-slider.vertical-slider {
            max-height: 513.75px;
            margin-top: 35px !important;
            margin-bottom: 35px !important;
            overflow: hidden;
        }

        #gallery-slider .horizontal-slider a {
            margin: 0 0.3rem;
        }

        #gallery-slider.vertical ul {
            padding: 0;
        }*/
/*-------Slick SliderEnd--------*/
/*-------Elements Start--------*/
/*-------Tab Desc--------*/
.desc-nav.nav-tabs {
    background-color: var(--rgba-primary-1);
    border-radius: 5px;
    border-bottom: 5px solid var(--color-primary) !important;
} ew .desc-nav.nav-tabs a:hover {
    color: var(--color-primary);
    background-color: transparent;
    border-color: var(--color-primary) var(--color-primary) transparent;
} .desc-nav.nav-tabs a {
    color: var( --color-primary);
} .desc-nav.nav-tabs a.active {
        color: var(--color-primary);
        border-color: var(--color-primary) var(--color-primary) transparent;
    } .desc-nav.nav-tabs a.active:before {
            border-top-color: var(--color-primary);
        }
/*-------Tab Desc--------*/
.back-light {
    background-color: var(--color-primary) !important;
} .margin {
    margin: clamp(1rem,-0.2rem + 2.479vw,2.6rem) 0;
} .menu-nav {
    padding: .5rem 0;
    color: white;
} .menu-nav .nav-button {
        padding: .5rem;
        white-space: nowrap;
        margin-right: 1rem;
        margin-left: 0;
        border-radius: 5px;
        color: white;
    } .menu-nav span.nav-button:hover {
        color: white;
    } .menu-nav a.nav-button:hover {
        color: var(--color-secondary);
        background-color: var(--color-primary);
        border-color: #bababa #bababa transparent;
        transition: all 0.3s ease-out;
    } .menu-nav.nav-tabs {
        border-radius: 5px;
    } .menu-nav.nav-tabs a {
            color: white;
            transition: all 0.3s ease-out;
        }
/*-------Slick SliderEnd--------*/
.cut2 {
    clip-path: polygon(1% 6.7%,99% 6.7%, 100% 50%, 99% 93.3%, 1% 93.3%, 0% 50%);
}

product__specs {
    display: revert;
} .product__specs ul {
        list-style: none;
        padding-inline-start: 0;
    } .product__specs ul li {
            list-style: none;
            padding-inline-start: 0;
            display: flex;
            gap: 1.6rem;
        } .product__specs ul li span:first-child {
                flex: 0 0 30%;
            }


.big-tab .product__specs ul li span {
    padding-block: 0.1rem;
    padding-inline: 1.5rem 0.5rem;
    align-items: center;
    display: flex;
    flex: 1;
    font-size: 0.9rem;
    gap: .4rem;
    line-height: 1.6rem;
}

.product__specs ul li span .title {
    font-weight: 800;
    font-size: 14px;
}
    .tab-mob .product__specs ul li span {
    padding-block: 0.1rem;
    padding-inline: 1.5rem 0.5rem;
    align-items: center;
    display: flex;
    flex: 1;
    font-size: 0.9rem;
    gap: .4rem;
    line-height: 1.6rem;
} .product__specs ul li:nth-child(2n+1) {
                background-color: var(--rgba-primary-1);
                border-radius: 5px;
            } .card-wish-active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.el-32 .card-body span {
    text-align: left;
    float: left;
    font-size: 15px;
    font-weight: 800;
} .el-32 .card-body a {
    float: right;
    text-align: right;
    font-size: 15px;
    font-weight: 800;
    min-height: 2.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.swiper-el32 .swiper-slide img {

width:100px;
}
  .swiper-el32 .swiper-slide {
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(185, 185, 185, 0.01);
} .swiper-el32 .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
/*hot spot*/
input.hotspot {
    display: none !important;
} .button-hotspot {
    color: white;
    font-weight: bold;
    font-size: 20px;
    background-color: #ffffff2b;
    display: block;
    padding: 12px 12px;
    border-radius: 100%;
    cursor: pointer;
    animation: fadein .5s;
    animation: pulse 1.5s infinite;
    position: absolute;
} .content-hotspot {
    background: white;
    padding: 1rem 1rem 2rem 1rem;
    text-align: center;
    visibility: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 2px -2px rgba(211,47,47,0);
    position: absolute;
} .cross {
    font-weight: bold;
} .flickity-slider {
    position: relative;
} .hotspot-label {
    visibility: hidden;
    transition: all 0.3s ease-out;
    opacity: 0;
    z-index: 2;
    position: absolute;
} .el1-box:hover .hotspot-label {
    visibility: visible !important;
    transition: all 0.3s ease-out;
    opacity: 1;
} input:checked.hotspot ~ label .content-hotspot {
    visibility: visible;
    animation: fadein .5s;
    position: absolute;
    z-index: 3;
} input:checked ~ label .button {
    display: none !important;
    animation: fadeout .5s;
} .button:hover {
    color: #d32f2f;
    background: white;
} .cta {
    display: inline-block;
    background: #d32f2f;
    color: white;
    padding: 12px 24px;
    margin-top: 48px;
    border-radius: 24px;
    text-decoration: none;
    transition: all .3s ease;
} .cta:hover {
        text-decoration: underline !important;
        box-shadow: 0 0 0 6px rgba(211, 46, 46, 0.4);
    } @keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
} @keyframes fadeout {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
} @keyframes pulse {
    from {
        box-shadow: 0 0 0 0px var(--rgba-primary-9);
    }

    to {
        box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
    }
} .left-content-hotspot {
    right: 3%;
    top: 21px;
} .right-content-hotspot {
    left: 100%;
    top: 20px;
} .content-hotspot {
    min-width: 450px;
}
/* inspired by this article/tutorial > https://curated.email/hotspots-in-email */
/*-------hot spot End--------*/
.glass-primary {
    backdrop-filter: blur(10px);
    background-color: var(--rgba-primary-1) !important;
} .glass-dark {
    backdrop-filter: blur(10px);
    background-color: #BDBBBB1A !important;
} .glass-light {
    backdrop-filter: blur(7px);
    background-color: #F2EFEFA1 !important;
} .el-dynamic-banner a {
        font-size: 19px;
        font-weight: 800;
    } .banner_FullWidth_Bottom {
    margin-bottom: 0 !important;
} .banner_left_middle {
    margin: auto auto auto 5% !important;
} .banner-el {
    padding: 1.5rem 5rem;
} .banner-el-8 .card-body, .card-xl .card-footer {
    padding: 1rem 1.5rem ;
} .banner-el-8 {
    border-radius: 5px;
} .banner-el-8 .card-body *, .banner-el .card-body * {

            margin-bottom:0;
        } .banner_right_middle {
            margin: auto 5% auto auto !important;
        } .banner_middle {
    margin: auto !important;

} .banner_middle * {
    text-align:center;
    
    } .login-button a {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
} .hidden {
    display: none;
} .swiper-gallery-hor {
    display: none;
} .sort-filter {
    display: flex;
    background-color: white;
    justify-content: end;
} .sort-filter .filter-drop {
        display: none;
    } .nav-overflow {
    overflow-y: hidden;
}
.nav-link.active::before {
    content: "";
    position: absolute;
    bottom: .25rem;
    height: 1px;
    background-color: var(--color-primary);
    left: 50%;
    right: 50%;
    transition: all 0.3s ease-out;
}
.big-cat .nav-link:hover::before {
    left: .75rem;
    right: .75rem;
}

.sort-dropdown button {
    background-color: var(--rgba-primary-1);
    clip-path: polygon(0 5px);
    clip-path: polygon(6% 6.7%,94% 6.7%, 100% 50%, 94% 93.3%, 6% 93.3%, 0% 50%);
    padding: 1rem 2rem;
    font-size: clamp(0.8125rem, 0.7768rem + 0.1786vw, 0.9375rem);
    display: flex;
    gap: 8px;
} .sort-dropdown button i {
    margin:auto;
    } .sort-dropdown button::after {
        margin: 0 2px;
    } .sort-menu label {
    cursor: pointer;
} .sort-menu .card-body {
    padding: 0 !important;
} .sort-menu .card-body ul {
        padding: 0.2rem;
    } .sort-menu .card-body li {
        text-align: center;
        padding: 0.3rem 1rem;
        margin: 0;
    } .sort-menu .card-body li:nth-child(2n+1) {
            background-color: var(--rgba-primary-1);
        } .sort-menu .card-body li label {
            width: 100%;
            text-align: right;
            font-size: 0.9rem;
        } .search-small-div {
    display: none;
} .shop-cat-title i {
    display: none;
} .sort-filter .sort-drop .mob-sort {
    display: none;
} .offcanvas-bottom .offcanvas-header button.btn-close {
    left: 1.5rem !important;
    right: auto;
} #filter-offcanvas.offcanvas.show:not(.hiding), .offcanvas.showing {
    min-height: 90vh;
} #filter-offcanvas .offcanvas-body {
    padding: 0;
} #filter-offcanvas .offcanvas-body ul {
        padding: 0 1rem;
    } #filter-offcanvas .offcanvas-body ul li a {
            padding: 1rem 0;
        } #filter-offcanvas .offcanvas-body ul li div #sizeGroup {
            margin: 0;
            padding: 0;
        } #filter-offcanvas .offcanvas-body ul li div.collapse.show {
            padding: 1rem 0px;
        } #filters-dynamics-mob #colorCollapse {
    margin: auto;
}
#filters-dynamics-mob #colorGroup {
    display: flex !important;
    gap: 25px;
    padding: 5px 0;
    flex-wrap: wrap !important;
    flex-direction: row;
    padding-inline: 5px;
}
    #filters-dynamics-mob #colorGroup .form-check-color {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
        grid-template-rows: auto;
        justify-self: right;
    } #filters-dynamics-mob #colorGroup .form-check-color * {
            margin: auto;
        } #filters-dynamics-mob #colorGroup .form-check-color input {
            background-color: #005522;
            box-shadow: 0px 0px 2px 2px #0b1d2d30;
            padding: 1.5rem;
            margin-bottom: 7px;
        } #filters-dynamics-mob #colorGroup .form-check-color input:checked[type="checkbox"] {
                box-shadow: 0px 0px 4px 3px var(--rgba-primary-9);
            } #sizeCollapse #sizeGroup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    grid-template-rows: auto;
} #sizeCollapse #sizeGroup .form-check-size {
        margin: 5px auto;
    } #sizeCollapse #sizeGroup .form-check-size label {
            margin: auto;
        } .instock {
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
} .instock .value {
        margin-left: 10px;
    } #filters-dynamics-mob .dynamic-filter .title {
    font-size: 13px;
} #filters-dynamics #colorGroup .form-check-color input {
    box-shadow: 0px 0px 1px 2px #9fa5aa85;
} .form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M9 1 3.5 7 1 4.273'/%3E%3C/svg%3E");
} .card-collapse-parent {
    transition: transform 0.6s ease;
    position: relative;
} .card-collapse {
    margin-top: -1px; /* Slight overlap to prevent gap */
} .card-body {
    margin-bottom: -1px; /* Ensure there's no gap between body and collapse */
}

.pr-mob-content .product-name {
    font-size: 16px;
}
.pr-mob-price {
    margin-top: 20px;
}
.pr-mob-content .properties {
    margin-top: 10px;
}
.card-collapse .card-footer .color span, .pr-mob-content .properties .color span {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    background-position: 50%;
    border-radius: 50%;
}

.card-collapse .card-footer .color, .pr-mob-content .properties .color {
    transition: all .3s ease;
    border: solid 2px #0000;
}

    .card-collapse .card-footer .color:hover, .pr-mob-content .properties .color:hover{
        border: solid 2px var(--color-primary);
        border-radius: 25px;
        padding: 1px;
        transition: all .3s ease;
    }


.product.card-footer .card-color, .pr-mob-content .properties .card-color {
    display: flex;
    gap: 5px;
    justify-content: left;
    flex-wrap: wrap;
}
    .product.card-footer .card-color .color, .pr-mob-content .properties .card-color .color {
        margin: 0;
    }
        .product.card-footer .card-color .color span, .pr-mob-content .properties .card-color .color span {
            box-shadow: 0px 0px 2px 2px #ababac70;
        }
.product.card-footer .card-prop2, .pr-mob-content .properties .card-prop2 {
    display: flex;
    gap: 5px;
    justify-content: left;
    flex-wrap: wrap;
}






    .card-footer .a-size, .card-footer .a-color, .pr-mob-content .properties .a-color, .pr-mob-content .properties .a-size {
        font-size: 11px;
        font-weight: 800;
        color: #313131bf;
    }
.card .product .card-footer {
    padding: 0.7rem;
} .card-body {
    padding: 0.75rem 0.5rem 0.5rem 0.5rem;
} .prop2-box a {
    margin: 0 !important;
    padding: .2rem !important;
    border: none !important;
} #product-listing .card, .el-32 .card {
    box-shadow: 0px -1px 4px #00000038;
    transition: all 0.3s ease-out;
    padding: 2px;
    overflow:hidden;
} #product-listing .card:hover, .el-32 .card:hover {
        box-shadow: 0px -5px 30px #00000038;
        transition: all 0.3s ease-out;
        padding: 0;
    } .listing-data {
    margin: auto;
    padding: 0;
} .cat-breadcrum {
    margin: auto;
}  #a_f .a_f_div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 5px 5px;
} #a_f .a_f_div span {
        padding: 0.1rem;
        margin: 0;
        font-size: 12px;
        height: auto;
        box-shadow: 0px 0px 2px 1px #ff0101b8;
        padding: 0.1rem 0.3rem;
    } #a_f .a_f_div span i {
            vertical-align: middle;
        } #a_f .a_f_div span button {
            padding: 0.1rem 0.5rem;
            font-size: 13px;
        } .a_f_title {
    display: flex;
    justify-content: space-around;
} .a_f_title .remove-f {
        margin: 0;
        font-size: 12px;
        height: auto;
        padding: 4px;
        background: #ff1414;
        color: white;
        border-radius: 4px;
    } .a_f_title .remove-f i {
            padding: 3px;
            border-radius: 50%;
            color: red;
            background: white;
        } ul#filterNav li:not(#a_f):not(.instock) a {

    padding: 1rem;
    font-size: 16px;
    font-weight: 800;
    color: #00000075;
} 
          #filters-dynamics #colorGroup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    grid-template-rows: auto;
    padding: 15px 0;
    gap: 5px;
    overflow: auto;
    padding-inline:5px;
}
#filters-dynamics #sizeGroup {
    overflow: auto;
    max-height:270px;
}
    #filters-dynamics #colorGroup .form-check-color {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
        grid-template-rows: auto;
        margin: 2px 0;
    } #filters-dynamics #colorGroup .form-check-color * {
            margin: auto;
        } #filters-dynamics #colorGroup .form-check-color input {
            background-color: #005522;
            box-shadow: 0px 0px 2px 2px #0b1d2d30;
            padding: 1.4rem;
            margin-bottom: 7px;
        } #filters-dynamics #colorGroup .form-check-color label {
            font-size: 12px;
        } #filters-dynamics #colorGroup .form-check-color input:checked[type="checkbox"] {
            box-shadow: 0px 0px 4px 3px var(--rgba-primary-9);
        } #filters-dynamics #sizeGroup .form-check .form-check-input.active + label {
    border-color: #000 !important;
    text-shadow: 0.06rem 0 #000;
} #filters-dynamics #sizeGroup .form-check .form-check-input.active + label::after {
        background-color: #d4af37;
        right: .42rem;
        left: .42rem;
        transition: all .3s ease;
    } #filters-dynamics #sizeGroup {
    margin: 0.5rem 0;
} #filters-dynamics #sizeGroup .prop2-box {
        margin: 0.3rem 0;
    } #filters-dynamics .oth-fiter {
    margin: 0.3rem 0;
} #filters-dynamics .oth-fiter .form-check {
        margin: 0.2rem 0;
    } .sort-filter {
    margin-bottom: 10px;
    justify-content: end;
} #filters-dynamics-mob .prop2-box label {
    padding: .3rem !important;
} .a_f_mob {
    position: sticky;
    top: 70px;
} .applied-m .swiper-slide {
    width: max-content;
    padding: 0.5rem;
    background: rgb(255, 239, 239);
    border-radius: 6px;
} #a_f_mob {
    position: sticky;
    top: 117px;
    z-index: 99;
    background-color: white;
    padding-bottom: 7px;
} #a_f_mob {
    display: none;
} .navbar-brand > img {
    max-height: 75px;
} .ptb-60 {
    padding-top: 60px;
    padding-bottom: 60px;
} .rounded-circle {
    border-radius: 50% !important;
} .ptb-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
} .mt-20 {
    margin-top: 20px;
} .mb-30 {
    margin-bottom: 30px;
} .aiart-shadow {
    box-shadow: 0px 4px 24px 0px rgba(58,76,102,.04) inset,0px -1.5px 4.5px 0px rgba(191,197,202,.65) inset;
}
/*------------Routin El 10-----------*/
.aiart-counter {
    width: 104px;
    height: 104px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(-23.56%, rgba(103, 240, 55, 0.71)), color-stop(96.15%, rgba(255, 239, 95, 0)));
    background: linear-gradient(180deg, rgba(103, 240, 55, 0.71) -23.56%, rgba(255, 239, 95, 0) 96.15%);
} .aiart-art-item:nth-child(2)::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/aiart_home/line_arrow.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    bottom: 75px;
    left: -35px;
    z-index: -1;
} .aiart-art-item:nth-child(2) {
    -webkit-margin-start: 60px;
    margin-inline-start: 60px;
    position: relative;
} .aiart-art-item:nth-child(3)::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/aiart_home/line_arrow.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    bottom: 75px;
    left: -35px;
    z-index: -1;
} .aiart-art-item:nth-child(3) {
    -webkit-margin-start: 120px;
    margin-inline-start: 120px;
    position: relative;
}
/*------------Routin El 10 End ----------*/
/* Circular box */
.cat-circule-box {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background-color: white;
    position: relative;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 0;
}
/* Top half image mask */
.cat-circule-box .image-mask {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
    } .cat-circule-box .image-mask img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            clip-path: ellipse(360% 60% at 50% 0); /* Clip the image to the top half of the circle */
        } .cat-circule-box p, .cat-swiper p {
        margin: 0;
    }
/* Text in the bottom half */
.cat-circule-box .text-content, .cat-swiper .text-content {
        position: relative;
        z-index: 2; /* Ensure the text appears on top */
        width: 100%;
        text-align: center;
    } .cat-circule-box .text-content * .cat-swiper .text-content * {
            margin: 0;
            text-align: center;
        } .cat-circule-box .text-content p, .cat-swiper .text-content p {
            margin-top: 0.8rem !important;
        } .bg-white p, .bg-white li, .bg-white span {
    color: #737373;
} .cat-swiper{
    overflow:hidden;
} .cat-swiper .swiper-slide .image-div img {
    border-radius: 50%;
    width: 100%;
} .swiper-slide {
    display: flex;
    justify-content: center;
} .card-collapse {
    position: absolute;
    top: 100%;
    width: 100%;
    overflow: hidden;
    transition: max-height 0.35s ease;
    display: block !important;
} .card-collapse-parent:hover {
    transform: translateY(calc(-1 * var(--collapse-height)));
}
/*button hover effect 1 */
.button-hover-1 {
    -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    cursor: pointer;
    -webkit-animation: ani2 0.7s steps(22) forwards;
    animation: ani2 0.7s steps(22) forwards;
} .button-hover-1:hover {
        -webkit-animation: ani 0.7s steps(22) forwards;
        animation: ani 0.7s steps(22) forwards;
        color: black !important;
    }
/*button hover effect 1  End*/
.mas {
    position: absolute;
    color: #000;
    text-align: center;
    width: 101%;
    position: absolute;
    overflow: hidden;
    font-weight: bold;
} @-webkit-keyframes ani {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }

    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
} @keyframes ani {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }

    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
} @-webkit-keyframes ani2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }

    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
} @keyframes ani2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }

    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
} .button-container-1 {
    position: relative;
}
.btn-rect {
    border-radius: 10%;
    transform: translateX(300%);
    transition: all 0.4s ease-in-out
}



.footer-single-col h3, .footer-single-col .h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 36px;
}
.footer-single-col.links.link1 li, .footer-single-col.links.link2 li {
    margin: 10px 0;
} .footer-single-col .h3 * {
    margin: 0;
} .footer-single-col.links i{
    margin-left:5px;
    font-size:18px;
}

.footer-single-col.links span.ch-301 {
    display: flex;
}

    .footer-single-col.links span.ch-301 p {
        margin: 0;
    }

  
  .aiart-footer.pay-gw-style .ca-two-newsletter-form .btn {
    background: var(--color-primary);
}
.footer-social-list li a {
    display: block;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    border: 2px solid rgba(255,255,255,.12);
    color: #65676d;
    border-radius: 4px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    font-size: 18px;
} .aiart-footer.pay-gw-style .footer-social-list li a:hover {
    background: var(--color-primary);
} .pt-120 {
    padding-top: 120px;
} .pb-40 {
    padding-bottom: 40px;
} .bgc-white {
    background-color: #fff;
} .footer-nav-list {
    padding-right: 0;
} .pl-40 {
    padding-left: 40px;
} .pl-20 {
    padding-left: 20px;
} .pr-40 {
    padding-right: 40px;
} .pr-20 {
    padding-right: 20px;
} .pt-40 {
    padding-top: 40px !important;
} .aiart-footer .ca-two-newsletter-form .btn {
    background: linear-gradient(80.72deg, #F22FB0 17.87%, #FF7426 84.39%);
    border: 0;
    height: 47px;
    top: 1px;
    left: 1px;
} .ca-two-newsletter-form .btn {
    position: relative;
    width: 52px;
    height: 48px;
    background-color: #fff;
    border-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
} .form-control {
    display: block;
    width: 100%;
    padding: .65rem 1rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--bs-body-color);
    background-color: var(--bs-form-control-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid rgba(17,24,39,.12);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
} .aiart-footer .ca-two-newsletter-form .btn::after {
    -webkit-filter: invert(1);
    filter: invert(1);
} .ca-two-newsletter-form .btn::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("/Media/Icons/newsletter.png");
    background-repeat: no-repeat;
    background-size: 45%;
    background-position: center;
    left: 0;
    top: 2px;
} .el32-swiper-button * {
    margin: auto;
} .el32-swiper-button span {
    font-size: 19px;
} .el-32-swiper-button-next.swiper-button-disabled, .el-32-swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none;
}

.el46-title {
    width: 100%;
    margin-block: 0.5rem 0.75rem;
}
.title-dot {
    margin-top: 1rem !important
} .title-dot path {
        fill: var(--color-primary);
    } .add-buttons .btn-addbasket{
    min-width:fit-content;
}
.search-product-slider {
    border: 1px solid lightgray;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-product-slider:hover {
    border-color: var(--color-primary);
    transition: all 0.3s ease;
} .search-product-slider .row{
    padding:5px;
    width:100%;

}
    .search-product-slider .product-name {
        padding-inline: 0.3rem !important;
        min-height: 3.6rem;
    }
} .search-product-slider .product-name span{
        line-height:1.4rem;
    } .limited-text-2 {
    display: -webkit-box; /* Display type for WebKit browsers */
    -webkit-box-orient: vertical; /* Sets the box orientation to vertical */
    overflow: hidden; /* Hide any overflowed content */
    text-overflow: ellipsis; /* Show ellipsis (...) when overflow happens */
    -webkit-line-clamp: 2; /* Limit the content to 2 lines */
    line-clamp: 2; /* Standard line-clamp */
    max-height: 3.6em; /* Approx. 2 lines of text height, adjust based on font-size */
    line-height: 1.8em; /* Adjust line height according to your font size */
} .search-product-slider img {
    max-width: 3rem;
    max-height: 100%
}
#main-search-resault {
    opacity: 0;
    z-index: -1;
    overflow: hidden;
    transition: all 0.6s ease-out !important;
    position: absolute;
    top: -17px;
    width: 100%; 
    max-width: 1000px; 
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;

} #main-search-resault input {
        border: 0;
        outline: none;

    } #main-search-resault ul {
        margin: 10px 0 0;
        padding: 0;
        list-style: none;
    }
        #main-search-resault ul li, #search-mob ul.search-resaul li {
            padding: 8px 10px;
            cursor: pointer;
            display: flex;
        }
            #main-search-resault ul li a, #search-mob ul.search-resaul li a {
                margin-right: 1rem;
            }
            #main-search-resault ul li:hover, #search-mob ul.search-resaul li:hover {
                background-color: #f1f1f1;
            }
/* Active state for showing the results with transition */
#main-search-resault.active {
        opacity: 1;
        z-index: 1001;
        transition: all 0.6s ease-out !important;
    } #main-search-resault .search-large-div * {
        background: white;
        display: flex;
    } #main-search-resault .search-large-div {
        background-color: var(--color-primary);
        padding: 8px 12px;
    }
/* Class for background fade effect */
.bg-fade {
        background-color: rgba(0, 0, 0, 0.5); /* Dark transparent background */
        transition: background-color 0.3s ease;
    } .footer-social-list ul{
    direction:ltr;
    margin-top:5px;

} .footer-social-list li a {
    display: block;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    border: 2px solid rgba(255,255,255,.12);
    color: #65676d;
    border-radius: 4px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
} .pay-bg-two.risk-color {
    background-color: #faf9f6;
    font-size: 21px;
} .risk-color {
    color: var(--color-primary) !important;
} .aiart-footer.pay-gw-style .footer-social-list li a:hover {
    background: var(--color-primary) !important;
} .aiart-footer .footer-social-list li a:hover {
    color: #fff !important;
} .footer-about img {
        max-width: 200px;
        margin-bottom:10px;
    } .search-product {
    margin: 7px 0;
}
.search-product-slider > a {
    width:100%;
}
} .search-product-slider img {
    border-radius: 10px;
} .cat-search li i{
    margin-left:7px !important;
} #search-resault hr {
    margin: 15px 0;
} #search-resault {
    padding: 10px 0;
} .list-inline-item:not(:last-child) {
    margin-left: .5rem;
    margin-right:0;
} .footer-social-list {
    justify-content: center;
    padding: 0;
    margin-top:5px;
} .fw-800 {
    font-weight: 800 !important;
} .basket-request .title {
    font-size: 15px;
} .basket-request{
    margin-block:0.5rem;
} .basket-price .title-bold {
    font-weight: 800 !important;
} .basket-price, .basket-request {
    display: flex;
    justify-content: space-between;
} #payment .card-body ul{
    padding:1rem;
} .order-payment .card-body ul {
    padding: 1rem;
} input.error-wrapper {
    border: 2px solid red;
} input:invalid:focus {
    outline: 2px solid red;
} .width-100{
    width:100% !important;
} @supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox-wrapper-14 input[type=checkbox] {
        --active: var(--color-primary);
        --active-inner: #fff;
        --focus: 2px rgba(39, 94, 254, .3);
        --border: var(--rgba-primary-4);
        --border-hover: var(--color-primary);
        --background: #fff;
        --disabled: #F6F8FF;
        --disabled-inner: var(--rgba-primary-2);
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

        .checkbox-wrapper-14 input[type=checkbox]:after {
            content: "";
            display: block;
            left: 0;
            top: 0;
            position: absolute;
            transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
        }

        .checkbox-wrapper-14 input[type=checkbox]:checked {
            --b: var(--active);
            --bc: var(--active);
            --d-o: .3s;
            --d-t: .6s;
            --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
        }

        .checkbox-wrapper-14 input[type=checkbox]:disabled {
            --b: var(--disabled);
            cursor: not-allowed;
            opacity: 0.9;
        }

            .checkbox-wrapper-14 input[type=checkbox]:disabled:checked {
                --b: var(--disabled-inner);
                --bc: var(--border);
            }

            .checkbox-wrapper-14 input[type=checkbox]:disabled + label {
                cursor: not-allowed;
            }

        .checkbox-wrapper-14 input[type=checkbox]:hover:not(:checked):not(:disabled) {
            --bc: var(--border-hover);
        }

        .checkbox-wrapper-14 input[type=checkbox]:focus {
            box-shadow: 0 0 0 var(--focus);
        }

        .checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
            width: 21px;
        }

            .checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
                opacity: var(--o, 0);
            }

            .checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
                --o: 1;
            }

        .checkbox-wrapper-14 input[type=checkbox] + label {
            display: inline-block;
            vertical-align: middle;
            cursor: pointer;
            margin-left: 4px;
        }

        .checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
            border-radius: 7px;
        }

            .checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
                width: 5px;
                height: 9px;
                border: 2px solid var(--active-inner);
                border-top: 0;
                border-left: 0;
                left: 7px;
                top: 4px;
                transform: rotate(var(--r, 20deg));
            }

            .checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
                --r: 43deg;
            }

        .checkbox-wrapper-14 input[type=checkbox].switch {
            width: 38px;
            border-radius: 11px;
        }

            .checkbox-wrapper-14 input[type=checkbox].switch:after {
                left: 2px;
                top: 1px;
                border-radius: 50%;
                width: 17px;
                height: 17px;
                background: var(--ab, var(--border));
                transform: translateX(var(--x, 0));
            }

            .checkbox-wrapper-14 input[type=checkbox].switch:checked {
                --ab: var(--active-inner);
                --x: 17px;
            }

            .checkbox-wrapper-14 input[type=checkbox].switch:disabled:not(:checked):after {
                opacity: 0.6;
            }
} .checkbox-wrapper-14 * {
    box-sizing: inherit;
} .checkbox-wrapper-14 *:before, .checkbox-wrapper-14 *:after {
        box-sizing: inherit;
    } #reviews .prod-img {
    max-height: 320px;
    width: auto;
} .cm-rating {
    padding: 0;
} .cm-rating li {
    display: flex;
} .cm-rating li > span:first-child.--empty:first-child::after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='21' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E3E3E3' d='m11 17-6.466 3.4 1.235-7.2L.54 8.1l7.228-1.05L11 .5l3.233 6.55 7.229 1.05-5.231 5.1 1.235 7.2z'/%3E%3C/g%3E%3C/svg%3E");
        background-position: 50%;
        background-repeat: no-repeat;
        content: "";
        display: inline-block;
        height: 2.2rem;
        position: relative;
        top: -.2rem;
        width: 1.2rem;
    } .cm-rating li > span:first-child {
        align-items: center;
        display: flex;
        font-size: 1.5rem;
        font-style: italic;
        font-weight: 600;
        gap: 1.2rem;
        line-height: 4rem;
    } .cm-rating li ._score::before {
        background: #e3e3e3;
        border-radius: .4rem;
        content: "";
        display: block;
        height: 1rem;
        width: 100%;
    } .cm-rating li ._score {
        flex: 1;
        margin: 0 1.2rem;
        padding: 1.6rem 0;
        position: relative;
    } .cm-rating li > span:last-child {
        color: #5f5f5f;
        font-size: 1.8rem;
        font-style: italic;
        line-height: 4rem;
        width: 3.2rem;
    } .button-loader-1 {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 30px 0 #fff, -30px 0 #fff;
    position: relative;
    animation: flash 0.5s ease-out infinite alternate;
    font-size: 10px;
} @keyframes flash {
    0% {
        background-color: #FFF2;
        box-shadow: 10px 0 #FFF2, -10px 0 #FFF;
    }

    50% {
        background-color: #FFF;
        box-shadow: 10px 0 #FFF2, -10px 0 #FFF2;
    }

    100% {
        background-color: #FFF2;
        box-shadow: 10px 0 #FFF, -10px 0 #FFF2;
    }
} .text-primary-350 {
    color: var(--rgba-primary-3);
} .text-primary-350:hover {
        color: var(--rgba-primary-9);
    }
.resend-span {
    opacity: 0.5;
    display: flex;
}
    .resend-span #counter {

        min-width:40px;
        text-align:center;
    }
    #resendButton {
    color: var(--color-secondary);
}

#sort-mob.nav-vertical{
    padding:0;
} #sort-mob.nav-vertical li {
        padding: 10px 10px;
        font-size: 15px;
        border-bottom: 1px solid #b3b3b342;
        cursor:pointer;
    } #sort-mob.nav-vertical li label {
            cursor: pointer;
        } #sort-mob.nav-vertical li.active {
            color: var(--color-primary);
        } #sort-offcanvas.offcanvas.show:not(.hiding), .offcanvas.showing {
    min-height: 90vh;
} #sort-offcanvas .offcanvas-footer .btn-off-check, #sort-offcanvas .offcanvas-header .btn-off-close {
    left: 1.5rem !important;
    right: auto;
    z-index: 9;
    position: absolute;
    margin-bottom: -1rem;
    margin-right: -1rem;
    margin-top: -1rem;
    padding: 1rem;
} #sort-offcanvas .offcanvas-footer .btn-off-check{

        bottom:1rem;
    } #sort-offcanvas .offcanvas-footer .btn-off-check i, #sort-offcanvas .offcanvas-header .btn-off-close i {
        font-size: 1.5rem;
        opacity: .5;
        width: 1em;
        height: 1em;
    } #sort-mob label.active::before {
    content: "\f00c";
    margin-left: 5px;
    font-family: "Font Awesome 6 Duotone";
    font-size: 19px;
} .cat-product .card-actions .action-btn {
    box-shadow: 0px 0px 4px 1px var(--rgba-primary-4);
} .brand-img {
    max-height: 4rem;
} .brand {
    padding: 1rem;
} .bg-c-dark-2 {
    background-color: #02020245;
} .flickity-button.previous::before {
    content: "\f104"
} .flickity-button.next::before {
    content: "\f105"
}
.flickity-button.flickity-prev-next-button.previous {
    background-color: whitesmoke;
    right: 70px;
    bottom: 0%;
    top: auto;
    left: auto;
}
.flickity-button.flickity-prev-next-button.next {
    background-color: whitesmoke;
    bottom: 0%;
    top: auto;
    right: 20px;
    left: auto;
} .link-underline {
    font-size: 20px;
    font-weight: 800;
} .flickity-page-dots .dot {
    background: #fff !important;
} .option-el {
    padding: 3px 10px;
    margin: auto 10px;
    border-radius: 5px;
    font-size: 35px;
    color: var(--color-primary);
} .specs .ch-102 .option-el {
    padding: 5px 0 0 10px !important;
    font-size: 27px !important;
    margin: 0 !important;
} .specs .ch-103 .option-el {
    font-size: 45px !important;
    margin: 0 !important;
} .specss .ch-103 p{
    margin:0;
} .cat-circule-box:hover {
    transform: translateY(-1rem);
    transition: all .2s ease-in-out;
} .cat-circule-box {
    transition: all .2s ease-in-out;
} .cat-swiper .swiper-wrapper {
    padding-top: 10px;
} .form-check-input:checked {
    background-color: var(--color-primary);
} .text-danger {
    color: var(--bs-danger-rgb)!important;
}

.order-completed {
    border: 3px solid var(--color-primary);
    border-radius: 10px;
    box-shadow: 0 0 9px 1px var(--color-primary);
    padding-block: 1rem;
} .border-box {
    border: var(--bs-border-width) var(--bs-border-style) var(--rgba-primary-3) !important;
    padding: 0;
    border-radius: 5px;
} .border-box .box {
        padding:1.5rem ;
    } .counter-badge {
    background-color: var(--color-primary);
    padding: 6px 22px;
    border-radius: 5px;
    font-size: 24px;
    text-align:center;
    color:white;
} .counter-order{
    text-align:center;
} .ls-1 {
    letter-spacing: 0.1rem;
} .order-rows-title {
    background: #65a8ff;
    color: white;
    border-radius: 5px;
    margin-bottom: 12px;
} .order-rows-title * {
    
    margin:0;
    }
/*.table-hover:not(.) > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
}*/
.checkbox-wrapper-47 input[type="radio"] {
    display: none;
    visibility: hidden;
} .checkbox-wrapper-47 label {
    padding-left: 1em;
    padding-right: 2em;
    line-height: 2;
    cursor: pointer;
    display: inline-flex;
    top: 0;
    position: absolute;
    right: 2px;
} .checkbox-wrapper-47 label:before {
        box-sizing: border-box;
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: 1.4em;
        height: 1.4em;
        border: 2px solid var(--color-primary);
        border-radius: 6px;
        z-index: -1;
    } .checkbox-wrapper-47 input[type=radio]:checked + label {
    padding-left: 1em;
    color: var(--color-primary);
} .checkbox-wrapper-47 input[type=radio]:checked + label:before {
        top: 0;
        width: 100%;
        height: 2em;
        background: var(--rgba-primary-1);
        border-color: var(--color-primary);
    } .checkbox-wrapper-47 label, .checkbox-wrapper-47 label::before {
    transition: 0.25s all ease;
} .checkbox-wrapper-15 {
    margin-right: 1rem;

} .checkbox-wrapper-15 .cbx {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
} .checkbox-wrapper-15 .cbx span {
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
} .checkbox-wrapper-15 .cbx span:first-child {
        position: relative;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        transform: scale(1);
        vertical-align: middle;
        border: 1px solid #B9B8C3;
        transition: all 0.2s ease;
    } .checkbox-wrapper-15 .cbx span:first-child svg {
            position: absolute;
            z-index: 1;
            top: 4px;
            left: 2px;
            fill: none;
            stroke: white;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 16px;
            stroke-dashoffset: 16px;
            transition: all 0.3s ease;
            transition-delay: 0.1s;
            transform: translate3d(0, 0, 0);
        } .checkbox-wrapper-15 .cbx span:first-child:before {
            content: "";
            width: 100%;
            height: 100%;
            background: var(--color-primary);
            display: block;
            transform: scale(0);
            opacity: 1;
            border-radius: 50%;
            transition-delay: 0.2s;
        } .checkbox-wrapper-15 .cbx:hover span:first-child {
    border-color: #3c53c7;
} .checkbox-wrapper-15 .inp-cbx:checked + .cbx span:first-child {
    border-color: var(--color-primary);
    background: var(--color-primary);
    animation: check-15 0.6s ease;
} .checkbox-wrapper-15 .inp-cbx:checked + .cbx span:first-child svg {
        stroke-dashoffset: 0;
    } .checkbox-wrapper-15 .inp-cbx:checked + .cbx span:first-child:before {
        transform: scale(2.2);
        opacity: 0;
        transition: all 0.6s ease;
    } .checkbox-wrapper-15 .inp-cbx:checked + .cbx span:last-child {
    color: #B9B8C3;
    transition: all 0.3s ease;
} .checkbox-wrapper-15 label {
        cursor: pointer;
    } .checkbox-wrapper-15 label.cbx {
            position: absolute;
            top: 4px;
            right: 4px;
        } tr:has(.checkbox-wrapper-15 .inp-cbx.parent-selector:checked) {
    border: 3px solid var(--color-primary);
} .list-group-item:has(.checkbox-wrapper-15 .inp-cbx.parent-selector:checked) {
    border: 3px solid var(--color-primary);
} @keyframes check-15 {
    50% {
        transform: scale(1.2);
    }
} .category .dropdown-menu hr {
    width: 75%;
    color: #c2c0c0;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.seperator {
    display: inline-block;
    width: 1px;
    background-color: #e0e0e0;
    height: 16px;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
  
  .tab-desc .tab-content h3, .tab-desc .tab-content h4, .tab-desc .tab-content h2, .tab-desc .tab-content h5, .tab-desc .tab-content h6 {

    margin-bottom:0.2rem;
    
  
} .el-11-border > div {
    justify-content: right;
}
.ch-103 .title * {
    margin:0;
}
    .ch-103 .text * {
margin:0;
}
} .ch-103 .text {
    font-size: 14px;
} .ch-103 .heading-xxs{
    font-size:15px;
} .accordion.tab-mob button.accordion-button:before {
    content: "\f0ca";
    font-family: "Font Awesome 6 Pro";
    transform: rotate(-180deg);
    margin-left:10px;
} .accordion.tab-mob button.accordion-button::after {
    margin-inline: auto 3% !important;
    content: "\f106";
    font-family: "Font Awesome 6 Pro";
    color: #6d6d6d !important;
    background: none;
}
.accordion.tab-mob button.accordion-button {
    color: #6d6d6d !important;
    padding-block: 20px;
}
    .accordion.tab-mob button.accordion-button.collapsed {
        background-color: #ececec !important
    }
    
    .accordion.tab-mob button.accordion-button:not(.collapsed) {
        background-color: #f9f9f9cc !important;
    } .bg-norepeat{
    background-repeat:no-repeat;
} .no-decoration:hover{
color:initial;
} .flickity-page-dots {
    width: fit-content !important;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.7rem 3rem !important;

} .big-cat {
    left: 50%;
    transform: translate(-50%,.5rem);
} .navbar-nav > .dropdown.position-static > .dropdown-menu::before{
    right:0;
    height:initial !important;
} .btn-close{
    background:none;
} .title-line-bottom::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 65px;
    height: 5px;
    background-color: var(--color-primary);
} .comment-form .title{
    position:relative;
    margin-bottom:0.6rem;
    padding-bottom:0.6rem;
    font-size:20px;
} .rating:not(:checked) > label::before {


    content: '★ ';
    content: "\f586";
    font-family: 'bootstrap-icons', serif;
    width: 30px;
    height: 30px;
    position: absolute;
    background-color: #fff;

} .rating:not(:checked) > label {
    float: right;
    width: 1em;
    padding: 0 .1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 200%;
    line-height: 1.2;
    color: #ddd;
} .rating > input:checked ~ label {
    color: #f7ad0d;
} .rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label {
    color: #f7ad0d;
}.rating:not(:checked) > input {
    position: absolute;
    bottom: 50%;
    clip: rect(0, 0, 0, 0);
} .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label {
    color: #f7ad0d;
} .form-floating > label{
    right:0;
    left:auto;
} .product-rateing .number {
    text-align: center;
    padding: 20px 30px;
    border: 1px solid #ddd;
    border-radius: 5px;
} .product-rateing .number h2 {
        margin: 30px 0;
        color: #333;
        font-size: 40px;
    } .product-rateing .number .star {
        padding: 5px;
        background: #dddddd5b;
        border-radius: 10px;
    } .bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    display: inline-block;
    font-family: bootstrap-icons, serif !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} .product-rateing .number .star .bi-star-fill {
    color: rgb(246, 130, 5);
} .main-color-two-bg:hover {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
} .main-color-two-bg {
    background-color: var(--color-primary) !important;
    color: #fff !important;
} .comment-form .submit-button {
    padding-block: 1rem !important;
} .btn.effect1 {
    position: relative;
    overflow:hidden;
} .btn.effect1::before {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 100%;
    display:inline-block;
} .btn:hover::before {
    transition: 800ms;
    left: -100%;
}
.comment .title {
    background-color: #f8f9fb;
    padding: 5px 10px;
    border-radius: 30px;
    box-shadow: var(--shadow-sm);
} .comment {
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
    background-color: #fff;
} .border-ui {
    border: 1px solid var(--bs-gray-400);
} .shadow-box {
    box-shadow: rgb(0 0 0 / 10%) 0 0 10px 0 !important;
} .comment .avatar-img img {
    width: 25px;
    height: 25px;
} .avatar-img{
    height:auto;
    width:auto;
} .text-muted {
    color: #565757 !important;
} .bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    display: inline-block;
    font-family: bootstrap-icons, serif !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} .star i.bi-star {
    color: #ccc;
    font-size: 20px;
} .star i.bi-star-fill {
    color: #f7ad0d;
    font-size: 20px;
} .comment-form .number .value {
    font-size: 2rem;
    margin-block:1rem;
}
.comment-form .number .title {
    font-size: 1.5rem;
} .nocomment {
    text-align: center;
    padding: 3rem 0;
    border: 1px solid #cecece;
    border-radius: 5px;
    background: #f7f7f7;
    margin-top: 2rem;
    font-size: 25px;
} .category .dropdown-menu .card-body {
    padding-inline: 10rem;
} .list-styled-item + .list-styled-item {
    margin-top: .5em;
} .depth2 .mainTitles a {
    color: black;
    font-size: 17px;
} .depth2 .mainTitles + hr {
    color: var(--rgba-primary-6);
} .card-lg .card-body {
    padding: 0.75rem 0.5rem 2.5rem 0.5rem;
} .depth3 .tab-content .mainTitle , .depth2 .tab-content .mainTitle {
    color: var(--color-primary) !important;
} .depth2 .dropdown-menu .card-body .col, .depth3 .dropdown-menu .card-body .col, .depth1 .dropdown-menu .card-body .col {
    position: relative;
} .depth2 .dropdown-menu .card-body .col:not(:last-child):after, .depth3 .dropdown-menu .card-body .col:not(:last-child):after, .depth1 .dropdown-menu .card-body .col:not(:last-child):after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 2px;
        background-color: #d9d9d9;
    } .depth1 .search-container {
    margin-block: 0.7rem 0.8rem;
    width: fit-content;
    padding: 0.5rem 2rem;
    border-style: solid;
    border-width: 2px;
    border-color: #f0f0f0;
    border-radius: 5px;
    outline: none; /* Removes the outline */

    transition: border-style 0.4s ease-in-out;
} .depth1 .search-container:has(input:focus) {
        border: none;
        border-bottom: 2px solid var(--color-primary);
        border-radius: 0;
        outline: none; /* Removes the outline */

        transition: border 0.4s ease-in-out;
    } .depth1 .search-container input {
        outline: none; /* Removes the outline */

        border: none;
    } .depth1 .search-container input:focus {
            border: none;
            outline: none; /* Removes the outline */

        } .depth1 .mainTitle {
    margin-right: 2rem;
} .depth1 .main-links, .depth1 .pro-links {
    position: relative;
} .depth1 .main-links:not(:last-child):after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%; /* Match the line height to the div’s height */
        width: 2px;
        background-color: #d9d9d9;
    } .depth1 .pro-links .mainTitle:before {
        content: "";
        padding-inline: 3rem;
        position: absolute;
        height: 1px;
        bottom: 0;
        border-bottom: 1px solid;
        color: #dfdfdf;
    } .depth1 .pro-links .mainTitle {
        display: flex;
        position: relative;
        padding-bottom: 0.4rem;
        margin-bottom: 0.9rem;
    }
.depth3 .tab-content .mainTitle a:after, .depth2 .maintitle-container a:after {
    content: "\f0d9\f0d9";
    font-family: "Font Awesome 6 Duotone";
    margin-right: 0.75rem;
    font-size: 13px;
    margin-block: auto;
}
.depth3 .tab-content .mainTitle a:before, .depth2 .maintitle-container a:before {
    content: "";
    padding-inline: 3rem;
    position: absolute;
    height: 1px;
    bottom: 0;
    border-bottom: 1px solid var(--color-primary);
}
.depth3 .tab-content .mainTitle a, .depth2 .maintitle-container a {
    display: flex;
    position: relative;
    padding-bottom: 0.4rem;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
} .depth1 .dropdown-menu .maintitle-container > .maintitle:before {
    content: "";
    padding-inline: 3rem;
    position: absolute;
    height: 1px;
    bottom: 0;
    border-bottom: 1px solid var(--color-primary);
} .depth1 .dropdown-menu .maintitle-container {
    margin-bottom: 0.2rem;
}
    .depth1 .dropdown-menu .maintitle-container > .maintitle {
        display: flex;
        position: relative;
        padding-bottom: 0.4rem;
        color: var(--color-primary);
        margin-bottom: 0.7rem;
    } .depth1 .dropdown-menu .maintitle-container > .maintitle:after {
            content: "\f0d9\f0d9";
            font-family: "Font Awesome 6 Duotone";
            margin-right: 0.75rem;
            font-size: 13px;
            margin-block: auto;
        } .depth1 .card-body .main-links .sublinks {
    overflow: auto;
    max-height: 200px;
} .depth1 .card-body .main-links .sublinks.search-resaul .cs-resaults * {
        color: var(--color-secondary);
    } .depth1 .card-body .main-links .sublinks.search-resaul .cs-resaults {
        display: flex;
    } .depth1 .card-body .main-links .sublinks.search-resaul::after {
        content: "";
        padding-inline: 3rem;
        position: absolute;
        height: 1px;
        bottom: 0;
        border-bottom: 1px solid #dbdad9;
    } .depth1 .card-body .main-links .sublinks.search-resaul {
        margin-bottom: 0.5rem;
        position:relative;
        padding-bottom:0.5rem;


    } .depth1 .card-body .main-links .sublinks.search-resaul .cs-resaults i.fa-magnifying-glass {
            margin-left: 0.5rem;
            margin-block: auto;
        } .depth1 .card-body, .depth2 .card-body {
    padding: 1.5rem 1.5rem 2.5rem 1.5rem;
} .request-group .request-box .request-content.active {
border:1px solid blue;

} .request-group .request-box .request-content {
    background: #eee;
    padding: 0.8rem 1rem;
    border-radius: 5px;
    text-align: center;
    cursor:pointer;
} .req-label {
    width: 100%;
    padding: 1rem 0.7rem;
    background-color: #eee;
    border-radius: 5px;
    text-align: center;
    cursor:pointer;
} .req-label.active {
        border: 1px solid var(--color-secondary);
    } .ZoomContainer {
    pointer-events: none;
} :not(.toast-header):not(.alert) > .btn-close{
    left:1.5rem;
    right:auto;


}
.mainloader {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 32px 0 #fff, -32px 0 #fff;
    position: relative;
    animation: flash 0.5s ease-out infinite alternate;
}

@keyframes flash {
    0% {
        background-color: #FFF2;
        box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
    }

    50% {
        background-color: #FFF;
        box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
    }

    100% {
        background-color: #FFF2;
        box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
    }
}

.form-check-color > .c-flex > .form-check-input {
    border-radius: 50%;
    cursor: pointer;
    height: 1.375rem;
    width: 1.375rem;

}
.form-check-color > .c-flex {
    display: flex;
    flex-direction: column;
}

.color-check-label{

    width:100%;
    height:100%;
    }
.color-check {
    margin: 0.3rem 0.55rem;
}
#pay-loader .mainloader {
    top: 48%;
    right: 45%;
    position: absolute;
}
#adlist .address-info.odd {
    background: var(--rgba-primary-2);
}
.flickity-slider > div {
    margin-right: 10px; /* فاصله بین اسلایدها */
}
.el-dynamic-banner .card{
    height:100%;
}
.no-click{
    cursor:default;
}
ul #filter-static, ul #filters-dynamics {
    list-style: none;
    padding-inline: 0.75rem;
}


#filterNav ul{
    padding-inline:0.75rem;
    padding-block:0.1rem;
}
    #filterNav ul li {
    padding-block:0.5rem;
    }

.card .card-footer {
    padding: 0.75rem;
}
.msg-prd {
    min-height: 20px;
    display: flex;
    font-size: 13px;
    font-weight: 800;
}
    .msg-prd span {
vertical-align :middle;   }

.prop2-list {
    min-height: 40px;
}
.price-prd > * {
    margin: auto 3px;
    display: flex;
    gap: 5px;
}
.price-prd {
    flex-wrap: wrap;
    display: flex;
    min-height: 60px;
    justify-content:space-between;
}
.prd-add-div{
    min-height:65px;
}
.o-color {
    border: 1px solid #645c51;
}
.bg-danger {
    background: #e12a2a !important;
}
.search-small-div .cut2 .btn-off-close i {
    font-size: 1.5rem;
    color: #7e7e7e;margin:auto;
}
.search-small-div .cut2 .btn-off-close {
    padding: 0 1rem;
}
    .search-small-div .cut2 {
    padding-block: 0.7rem;
    cursor:pointer;
    display:flex;


}
.mob-mains-in {
    padding: 0 1rem !important;
    font-size: 1.3rem;
}

#search-mob.offcanvas.show:not(.hiding), .offcanvas.showing {
    min-height: 90vh;
}
#search-mob .offcanvas-header {
    padding: 1rem 0.2rem;
    margin: 1rem 0;
}
.ush-title  {
    margin-top: 2rem !important;
}
    .ush-title * {
        color: #3f4064;
    }
    .ush-title .title strong {
        margin-right: 0.75rem !important;
    }

.most-search, .search-history {
    margin-block: 1rem;
    position: relative;
}
    .most-search .swiper-slide, .search-history .swiper-slide {
        border: 1px solid #959595;
        width: fit-content;
        padding: 0.3rem 0.8rem;
    }
        .most-search .swiper-slide a, .search-history .swiper-slide a {
            margin: 0;
        }

            .most-search .swiper-slide a div, .search-history .swiper-slide a div {
                display: flex;
            }
                .most-search .swiper-slide a div i, .search-history .swiper-slide a div i {
                    margin: auto;
                }

.cut2 i{
    margin:auto;
}


.uh-swiper-button-prev::after ,.ms-swiper-button-prev::after {
    content: "\f104" !important;
    font-family: "Font Awesome 6 Pro";
}
.uh-swiper-button-next::after, .ms-swiper-button-next::after {
    content: "\f105" !important;
    font-family: "Font Awesome 6 Pro";
}
.uh-swiper-button-prev, .uh-swiper-button-next, .ms-swiper-button-prev, .ms-swiper-button-next {
    position: absolute;
    top: 5%;
    padding: 0.05rem 0.5rem;
    background-color: #fff;
    z-index: 2;
    border: 1px solid #797979a8;
    border-radius: 50%;
}
    .uh-swiper-button-prev.swiper-button-disabled, .uh-swiper-button-next.swiper-button-disabled ,.ms-swiper-button-prev.swiper-button-disabled, .ms-swiper-button-next.swiper-button-disabled {
        display: none;
        opacity: .35;
        cursor: auto;
        pointer-events: none;
    }
.uh-swiper-button-prev ,.ms-swiper-button-prev {
    left: -5px;
}
.uh-swiper-button-next, .ms-swiper-button-next {
    right: -5px;
}
#srmh{
    padding-inline:1rem;
}
.lg-outer .lg-inner{
    display:flex;
}

/*Faq1 Element*/

.faq-icon {
    font-size: 25px;
    line-height: normal;
}
/*Faq1 Element*/
.video-poster .play-icon {
    bottom: 30%;
    font-size: 6rem;
    color: white;
    left: 40%;
    position: absolute;
    transition: 0.3s ease-in-out;
}
.video-poster:hover .play-icon {
    color: var(--rgba-primary-9);
    transition:0.3s ease-in-out;
}
    .video-poster {
    cursor: pointer;
    position:relative;
    border-radius:10px;

}
.colvideo.video-poster .play-icon {
    bottom: 35% !important;
    left: 45% !important;
}

    .colvideo {
    margin: auto;
    width: fit-content;
  
}
.alert-popup {
    position: fixed;
    top: 1rem;
    min-width: 30vw;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    right: 1rem;
}

    .alert-popup.show {
        opacity: 1;
    }
.shop-cat-title h1 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem !important;
}

#srmh{
    overflow:hidden;
}

.el-03 .card-body {
    padding: 0.6rem 0 !important;
    margin-inline: 3rem !important;
}
    .el-03 .card-body .btn {
        padding-block: 0.8rem 0.2rem;
        height: fit-content;
    }
    .el-03 .card-body p, .el-03 .card-body span
{
    margin:0;
}

.el06-ch img {
    border-radius: 6px;
}
.p2-help{
    position:relative;

}
    .p2-help::after {
        border-radius: .3rem;
        bottom: .5rem;
        content: "";
        height: .1rem;
    
        position: absolute;
        transition: all .3s ease;
        top: 1.56rem;
        background-color: var(--rgba-primary-5);
        right: 0.1rem;
        left: 0.1rem;
    }
    .p2-help:hover::after {
  

        background-color: var(--color-primary);
        right: .42rem;
        left: .42rem;

    }
.glass-primary {
    border-radius: 6px;
}
.shop-cat-section .productlist-section{
    margin:auto;
}
.pr-mob-item{
    padding-inline:0;
}
    .pr-mob-item .pr-mob-img, .pr-mob-item .pr-mob-content {
        padding-inline: 0.7rem;
    }
        .pr-mob-item > .row {
    margin: 1rem 0.1rem;
}

.pr-mob-item div.pr-mob-img img {
    width: 100%;
    border-radius: 7px;
    overflow: hidden;
}
.pr-mob-content{
    margin-block:auto;
}

.pr-mob-swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .pr-mob-swiper .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
.pr-mob-swiper {
    overflow:hidden;
}

    .pr-big-price{

    display:flex;
    justify-content:end;
}
.pr-big-price {
    display: flex;
    justify-content: left;
}
.pr-price > span{
    color:black;
}

.pr-mob-price {
    display: flex;
    justify-content: left;
}
            .pr-mob-price:has(.pr-discount) .pr-discount, .pr-big-price:has(.pr-discount) .pr-discount {
                margin-block: auto;
            }
                .pr-mob-price:has(.pr-discount) .discount-badge, .pr-big-price:has(.pr-discount) .discount-badge {
                background: red;
                color: white;
                padding: 2px 5px;
                border-radius: 5px;
                font-weight: 800;
                font-size: 12px;
            }
.pr-big-price:has(.pr-discount) .discount-badge {
    font-size: 14px;
}
                .pr-mob-price:has(.pr-discount), .pr-big-price:has(.pr-discount) {
                    display: flex;
                    justify-content: space-between;
                }

    .basket-price .price-section *{
    display:block;
}
.basket-price .price-section .actual-price b {
margin-left:0.5rem
}
.basket-price .price-section .actual-price {
    display: flex;
}
#order-payment .list-group-item .discount-alert, #payment .list-group-item .discount-alert {
    font-size: 13px;
    color: red;
}

.order-payment li.total-price-section ,#payment li.total-price-section {
    display: block !important;
}



.color-button-label:after {
    border-radius: .3rem;
    bottom: .5rem;
    content: "";
    height: .1rem;
    left: 50%;
    right: 50%;
    position: absolute;
    transition: all .3s ease;
    bottom: 4%;
}

.color-button-label:hover {
    border-color: #000;
    text-shadow: 0.02rem 0 #000;
}

    .color-button-label:hover::after {
        background-color: var(--color-primary);
        right: .42rem;
        left: .42rem;
    }

.color-button-label.active::after {
    background-color: var(--color-primary);
    right: .42rem;
    left: .42rem;
    border-color: var(--color-primary);
    transition: all .3s ease;
}

.color-button-label.active {
    text-shadow: 0.02rem 0 #000;
    border-color: var(--color-primary);
}

.color-button-label {
    padding: 8px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
    border: solid 1px #ccc;
    border-radius: 8px;
    margin-inline: 5px;
    justify-content: center;
}

    .color-button-label span.color {
        margin-left: 5px;
        border-radius: 4px;
    }

    .color-button-label .title {
        font-size: 14px;
        font-weight: 800;
        text-shadow: 0.02rem 0 #fff;
        color: #3e3e3ee8;
    }


/*Product Detail Slider */

.product-gallery .gallery-thumbs {
    padding-left: 29px;
    margin-right: 5%;
    width: 90%;
    border-radius: 5px;
}
    .product-gallery .gallery-main {
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: center;
}
    .product-gallery .gallery-main  .swiper-slide {
        padding: 25px;
    }
        .product-gallery .gallery-main .swiper-slide img {
            border-radius: 7px;
            box-shadow: 0px 0px 3px 1px #b5b5b5;
            border: 1px solid #aeaeae;
        }

        .product-gallery .gallery-main .swiper-button-prev {
            right: auto;
            left: 16%;
            top: 90%;
            box-shadow: 0 0 7px 1px #626161;
        }
        .product-gallery .gallery-main .swiper-button-next {
            left: 7%;
            right: auto;
            top: 90%;
            box-shadow: 0 0 7px 1px #626161;
        }
    .gallery-main, .gallery-main-mob, .gallery-thumbs {
        position: relative;
    }
.gallery-main, .gallery-main-mob {
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
}

.gallery-thumbs {
    width: 100%;
    direction:rtl;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

    .gallery-thumbs .swiper-slide {
        width: auto;
        cursor: pointer;
        opacity: 0.6;
    }

    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }

.product-gallery .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.swiper-button-next {
    top: 50%;
    left: 2%;
}
    .swiper-button-next::after {
        content: "\f104" !important;
        font-family: "Font Awesome 6 Pro";
    }
.swiper-button-prev::after {
    content: "\f105" !important;
    font-family: "Font Awesome 6 Pro";
}
.swiper-button-prev {
    top: 50%;
    left: 94%;
    right: 2%;
}
    .swiper-button-prev.mainbanner {
        top: auto;
        right: 90px;
        left: auto;
        bottom: 5px;
        z-index:11;
    }
.swiper-button-next.mainbanner {
    top: auto;
    left: auto;
    right: 130px;
    bottom: 5px;
    z-index: 11;
}

.swiper-button-prev, .swiper-button-next {
    position: absolute;
    color: #333; /* رنگ دکمه‌ها */
    background-color: rgba(255, 255, 255, 0.7); /* پس‌زمینه شفاف */
    border-radius: 50%; /* گرد کردن دکمه‌ها */
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 2;
    opacity:0.8;
}

  

        .swiper-button-prev::after:hover, .swiper-button-next::after:hover {
            color: white;
            
        }

    .swiper-button-prev::after, .swiper-button-next::after {
        font-size: 28px; /* اندازه آیکون */
        font-weight: bold;
    }
#srd .search-product{
    position:relative;
}
    #srd .search-product .swiper-button-prev::after, #srd .search-product .swiper-button-next::after {
        font-size: 18px;
    }
    #srd .search-product .swiper-button-prev, #srd .search-product .swiper-button-next {
        width: 40px;
        height: 40px;
        top: 18%;
    }

    #srd .search-product .swiper-button-prev.swiper-button-disabled, #srd .search-product .swiper-button-next.swiper-button-disabled {
        opacity: 0;
        cursor: auto;
        pointer-events: none;
    }
.color-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-row-gap: 5px;
}
.color-list-mob {
    display: flex;
flex-wrap:wrap;
justify-content:right;

}
    .color-list-mob > * {
        margin-bottom: 0.6rem;
        min-width: 7rem;
    }


.gallery-thumbs .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
}
.gallery-thumbs swiper-slide:not(.swiper-slide-thumb-active) {
    opacity: 0.6;
}
.lg-medium-zoom {
    z-index: 1099;
    position: relative;
}
.pr-mob-img .discount-badge {
    background-color: red;
    color: white;
    padding: 0.2rem 1.4rem;
    position: absolute !important;
    left: 7%;
    top: 10px;
    border-radius: 0 7px 7px 7px;
    z-index: 2;
    font-weight: 800;
    font-size: 18px;
    display: flex;
}
.card-img .card-img-hover, .pr-mob-img {
    position: relative;
}
    .card-img .discount-badge, .pr-mob-img > .discount-badge {
        background-color: red;
        color: white;
        padding: 0.2rem 1.4rem;
        position: absolute !important;
        left: 7%;
        top: 10px;
        border-radius: 0 7px 7px 7px;
        z-index: 2;
        font-weight: 800;
        font-size: 18px;
        display: flex;
    }
    .card-img .discount-badge * {
    margin:0 1px;
    }
.cat2-body.depth1 .cat3 * {
    font-weight: 500;
}
.cat2-body.depth1 .cat3:not(:first-child) {
    padding-block: 0.6rem;
    border-bottom: 1px solid #99959033;
}
.cat2-body, .cat2-d1-body {
    margin-right: 0.3rem;
    margin: 1rem;
    box-shadow: 2px 0 #e1e1e1;
    padding-right: 1rem;
}

.mb-element-0 * {
    margin-bottom: 0;
}
.accordion-cat1 > *:nth-child(2n+1) .cat1-heading, .accordion-cat1 > *:nth-child(2n+1).cat2-single{
    background-color: var(--rgba-primary-1);
}
.no-product {
    width: 100%;
    display: flex;
    justify-content: center;
}
#srd.mainloader {
    top: 25%;
    margin: auto;
    position: absolute;
    left: 50%;
    animation: flashdark 0.5s ease-out infinite alternate;
}
#srm.mainloader {
    top: 15%;
    margin: auto;
    position: absolute;
    left: 50%;
    animation: flashdark 0.5s ease-out infinite alternate;
}
@keyframes flashdark {
    0% {
        background-color: var(--rgba-primary-9);
        box-shadow: 32px 0 var(--rgba-primary-5), -32px 0 var(--rgba-primary-9);
    }

    50% {
        background-color: var(--rgba-primary-9);
        box-shadow: 32px 0 #7e7e7e, -32px 0 var(--rgba-primary-5);
    }

    100% {
        background-color: var(--rgba-primary-9);
        box-shadow: 32px 0 var(--rgba-primary-9), -32px 0 var(--rgba-primary-5);
    }
}
.ch-103 .icon {
    margin-bottom: 0.3rem;
}



.comment {
    position: relative;
    padding: 15px;
    border-radius: 12px; /* گوشه‌های گرد */
    background: #fff; /* رنگ پس‌زمینه */
}

    .comment::before {
        content: "";
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-radius: 12px;
        z-index: -1;
        background: linear-gradient(45deg, var(--rgba-primary-4), var(--rgba-primary-9));
    }
.el-11-border .title > *{
    line-height:0.7;
}
.footer-nav-list i {
    align-items: center;
    display: flex;
}

.pd-off-badge {
    margin-inline: 0.5rem;
    display: flex;
    text-decoration: none;
    filter: drop-shadow(2px 2px 5px #000000a3);
}

    .pd-off-badge:focus {
        outline: 0.125rem dashed #000a;
        outline-offset: 0.25rem;
    }



    .pd-off-badge > span {
        margin: auto;
        font-size: 13px;
        padding-block: 0.5rem;
        text-align: center;
        color: white;
        font-weight: 800;
        padding-block: 0.3rem;
        background: linear-gradient(#f70000, #bb1616);
        flex: 1;
        border-radius: 4px;
    }

    

.flickity-fade {
    position: relative;
    overflow: hidden;
}

.flickity-fade-cell {
    width: 100%; /* یا هر عرضی که می‌خوای */
    height: 400px;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* تنظیم مدت زمان و نوع ترنزیشن */
    position: absolute;
    top: 0;
    left: 0;
}

    .flickity-fade-cell.is-selected {
        opacity: 1; /* فقط اسلاید انتخاب‌شده قابل مشاهده باشه */
        position: relative;
    }
.prd-add-div > * {
    margin-block: auto;
}
.prd-support {
    position: relative;
}
.prd-support button {
    padding-inline: 0;
}
    .prd-support button > span > i {
        font-size: 26px;
    }
    .prd-support button > span {
        padding-inline: 1rem;
    }

.prd-add-div .col, .prd-add-div .col-auto {
    padding-inline: 0.2rem;
}
.prd-support > .prd-support-text {
    position: absolute;
    top: -50px;
    background: #e6e6e6;
    padding: 0.4rem 0.7rem;
    padding-bottom: 0.6rem;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 800;
    width: max-content;
    text-align: center;
    clip-path: polygon(50% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
    left: 50%;
    transform: translateX(-50%);
}
#add-to-basket-button .prd-add-div {
    margin-block: 9px !important;
}
#add-to-basket-button #product-price, #add-to-basket-button .prd-add-div {
    padding-inline: 0.1rem !important;
}
.prd-support-mob{
    margin-bottom:0.7rem;
}
.prd-add-div .prd-support-text-mob, .prd-add-div #addsp {
    align-items: center;
    display: flex;
    justify-content: center;
}
.prd-add-div i {
    font-size: 20px;
    margin-block: auto;
}
.footer-single-col.links.link1 .footer-nav-list a{
    display:flex;
}
#product-price .prd-add-div .quant-row{
    justify-content:left;
}
/* Video background for navbar */
.navbar-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

    .navbar-video-background video,
    .navbar-video-background img {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: 100%;
        transform: translateX(-50%) translateY(-50%);
        object-fit: cover;
    }

/* For narrow video/gif effect */
.navbar-narrow-bg .navbar-video-background {
    width: 60%;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
}

/* Ensure content appears above the video */
.navbar-topbar {
    position: relative;
    overflow: hidden;
}

    .navbar-topbar .container {
        position: relative;
        z-index: 1;
    }

/* Semi-transparent overlay for better text visibility */
.navbar-video-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.select2-container--default .select2-results > .select2-results__options {
    max-height: 300px;
    overflow-y: auto;
}

.select2-result-user__name {
    font-weight: bold;
}

.select2-result-user__info {
    width: 100%;
}
/* Product Slider with Featured Box Styles */
.product-slider-el32 .product-feature-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

    .product-slider-el32 .product-feature-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .product-slider-el32 .product-feature-box img {
        object-fit: cover;
        height: 200px;
        width: 100%;
    }

.product-slider-el32 .feature-title {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.product-slider-el32 .feature-description {
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: #666;
    flex-grow: 1;
}

.product-slider-el32 .el-32 .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .product-slider-el32 .el-32 .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

@media (max-width: 991px) {
    .product-slider-el32 .product-feature-box {
        margin-bottom: 20px;
    }

        .product-slider-el32 .product-feature-box img {
            height: 150px;
        }
}
/* استایل‌های شمارنده معکوس */
.countdown-container {
    background-color: #e6123d;
    border-radius: 8px;
    padding: 10px 5px;
    margin-bottom: 10px;
    direction: ltr;
}

.countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 5px;
}

.countdown-value {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.countdown-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
}

.countdown-separator {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

/* تنظیمات ریسپانسیو */
@media (max-width: 576px) {
    .countdown-value {
        font-size: 14px;
    }

    .countdown-label {
        font-size: 8px;
    }

    .countdown-separator {
        font-size: 14px;
    }
}

/* استایل اسلایدر محصولات با طراحی مشابه توپ رایان */
.list-by-category {
    margin-bottom: 30px;
}

    .list-by-category .kala {
        flex-direction: row;
        background: #f9f9f9;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

        .list-by-category .kala .pad {
            width: 190px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 15px;
            background-color: #f5f5f5;
        }

    .list-by-category .image-holder {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 160px;
        margin-bottom: 15px;
    }

        .list-by-category .image-holder img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            height: fit-content;
        }

    .list-by-category .btn-loadmore {
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .list-by-category .name {
        text-align: center;
        margin-bottom: 10px;
    }

        .list-by-category .name span {
            font-size: 14px;
            color: #666;
            display: block;
            margin-bottom: 5px;
        }

        .list-by-category .name h2 {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin: 0;
        }

    .list-by-category .btn-more {
        display: inline-flex;
        align-items: center;
        color: var(--color-primary);
        font-size: 12px;
        padding: 8px 15px;
        border-radius: 4px;
        transition: all 0.3s;
    }
        .list-by-category .btn-more i {
            font-size: 10px;
        }
        
      

        .list-by-category .btn-more i {
            margin-right: 5px;
        }

    .list-by-category .kala {
    display:flex;
    }
        .list-by-category .kala-list {
        padding: 15px;
        flex-shrink: 0;
        position: relative;
        display: block;
        width:100%;
    }

/* Product item styles */
.product-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    background: white;
}

  
    .product-item .image {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }

        .product-item .image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

    .product-item .body {
        padding: 10px;
        flex-grow: 1;
    }

    .product-item .title {
        font-size: 14px;
        height: 40px;
        overflow: hidden;
        margin-bottom: 5px;
    }

        .product-item .title a {
            color: #333;
            text-decoration: none;
        }

    .product-item .tag {
        padding: 0 10px;
    }

        .product-item .tag .ending {
            display: inline-block;
            color: #e74c3c;
            font-size: 12px;
            font-weight: bold;
        }

    .product-item .price-box {
        padding: 10px;
        border-top: 1px solid #f0f0f0;
    }

    .product-item .label-takhfif {
        display: flex;
        justify-content: left;
        gap: 5px;
    }

        .product-item .label-takhfif del {
            color: #999;
            font-size: 13px;
        }

        .product-item .label-takhfif .darsad {
            display: inline-block;
            background: #e74c3c;
            color: white;
            font-size: 14px;
            padding: 0 8px;
            border-radius: 5px;
            font-weight: 700;
            letter-spacing: 3px;
        }

    .product-item .price-now {
        font-size: 16px;
        font-weight: bold;
        text-align: left;
    }

    .product-item .unit {
        font-size: 12px;
        color: #666;
    }

/* Swiper customization */
.one-row {
    width: 100%;
    overflow: hidden;
    position: relative;
}

    .one-row .swiper-button-next,
    .one-row .swiper-button-prev {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 30%;
        width: 32px;
        height: 32px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: color 0.3s ease;
    }
        .one-row .swiper-button-next:hover::after,
        .one-row .swiper-button-prev:hover::after {
            color: white;
            transition: color 0.3s ease;
        }

        .one-row .swiper-button-next:after,
        .one-row .swiper-button-prev:after {
            font-size: 16px;
            color: #000;
            transition: color 0.3s ease;
        }


/* Product image styling similar to Top Rayan */
.list-by-category .product-item .image img.main {
    position: relative;
    width: 90%;
    height: 90%;
    margin: auto;
    object-fit: contain;
    border-radius: 20px;
    padding: 5%;
    border: 1px solid #eee;
    background: #fff;
    box-shadow: inset #f5f5f5 0 0 10px 0;
    transition: all 0.3s ease;
}

.list-by-category .product-item:hover .image img.main {
    border-color: var(--color-primary);
    box-shadow: inset var(--rgba-primary-1) 0 0 10px 0;
}

/* Main category image styling */
.list-by-category .image-holder img.main-image {
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 8px;
    background: #fff;
    box-shadow: inset #f5f5f5 0 0 10px 0;
    transition: all 0.3s ease;
}

.list-by-category .kala .pad:hover .image-holder img.main-image {
    box-shadow: inset var(--rgba-primary-3) 0 0 10px 0;
}

/* Improve the unavailable badge styling */
.product-item .tag .ending {
    display: inline-block;
    color: #e74c3c;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    background-color: rgba(231, 76, 60, 0.1);
    border-radius: 4px;
    margin-top: 8px;
    text-align: center;
}
/* Product card styling for element 32 slider */
.product-slider-card {
    border: 1px solid #eee;
    border-radius: 24px;
    margin: 12px 0;
    transition: all ease-in-out .2s;
    height: 100%;
    cursor: pointer;
}

    .product-slider-card:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-5px);
        border-color: var(--color-primary);
    }

    /* Title style with 2-line limit and ellipsis */
    .product-slider-card .title {
        font-size: 14px;
        height: 40px;
        overflow: hidden;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    /* Ensure consistent card heights regardless of content */
    .product-slider-card .price-box {
        min-height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .product-slider-card .tag {
        min-height: 30px;
        display: flex;
        align-items: center;
    }

    /* Image styling with Top Rayan-like effects */
    .product-slider-card .image img.main {
        position: relative;
        width: 90%;
        height: 90%;
        margin: auto;
        object-fit: contain;
        border-radius: 20px;
        padding: 5%;
        border: 1px solid #eee;
        background: #fff;
        box-shadow: inset #f5f5f5 0 0 10px 0;
        transition: all 0.3s ease;
    }

    .product-slider-card:hover .image img.main {
        border-color: var(--color-primary);
        box-shadow: inset var(--rgba-primary-1) 0 0 10px 0;
    }

    /* Improved unavailable badge */
    .product-slider-card .tag .ending {
        display: inline-block;
        color: #e74c3c;
        font-size: 12px;
        font-weight: bold;
        padding: 4px 8px;
        background-color: rgba(231, 76, 60, 0.1);
        border-radius: 4px;
    }
/* Top Rayan style product cards for slider element 32 */
.one-row .product-item {
    border: 1px solid #eee;
    border-radius: 24px;
    margin: 12px 0;
    transition: all ease-in-out .2s;
    height: 100%;
    cursor: pointer;
}

    .one-row .product-item:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border-color: #ddd;
    }

    /* Consistent title height with 2-line limit */
    .one-row .product-item .title {
        font-size: 14px;
        height: 40px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    /* Ensure consistent heights for different sections */
    .one-row .product-item .tag {
        min-height: 30px;
        display: flex;
        align-items: center;
    }

    .one-row .product-item .price-box {
        min-height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Top Rayan style image styling */
    .one-row .product-item .image img.main {
        position: relative;
        width: 90%;
        height: 90%;
        margin: auto;
        object-fit: contain;
        border-radius: 20px;
        padding: 5%;
        border: 1px solid #eee;
        background: #fff;
        box-shadow: inset #f5f5f5 0 0 10px 0;
        transition: all 0.3s ease;
    }

    .one-row .product-item:hover .image img.main {
        border-color: #e6e2e2;
        box-shadow: inset var(--rgba-primary-1) 0 0 10px 0;
    }

    /* Improved unavailable badge */
    .one-row .product-item .tag .ending {
        display: inline-block;
        color: #e74c3c;
        font-size: 12px;
        font-weight: bold;
        padding: 4px 8px;
        background-color: rgba(231, 76, 60, 0.1);
        border-radius: 4px;
        margin-top: 8px;
    }
.product-tag {
    padding: 2px 16px;
    border-radius: 10px;
}
.element-header {
    margin-bottom: 25px;
}

.element-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #333;
}

.element-description {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
}

.view-all-btn {
    transition: all 0.3s ease;
}

    .view-all-btn:hover {
        transform: translateX(-5px);
    }

@media (max-width: 768px) {
    .element-title {
        font-size: 20px;
    }

    .element-header .row {
        display: flex;
        flex-direction: column;
    }

    .element-header .col-auto {
        margin-top: 10px;
        align-self: flex-start;
    }
}
/* Dynamic Video Element Styles */
.dynamic-video-container {
    padding: 60px 0;
}

.dynamic-video-grid {
    margin-top: 30px;
}

.video-tile {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    min-height: 200px;
}

    .video-tile:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

.video-cover-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-cover {
    position: relative;
    width: 100%;
    height: 100%;
}

.play-button-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.3);
    border-radius: inherit;
    transition: all 0.3s ease;
}

.video-tile:hover .play-button-overlay {
    background-color: rgba(0,0,0,0.5);
}

.play-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.8);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .play-button i {
        font-size: 24px;
        color: #e74c3c;
        margin-left: 4px;
    }

.video-tile:hover .play-button {
    transform: scale(1.1);
    background-color: rgba(255,255,255,1);
}

.video-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: white;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

    .video-title h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .video-title p {
        font-size: 14px;
        opacity: 0.8;
    }
.category-icon-slider.column-style {
    padding: 40px 0;
}

.slide-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.category-row {
    width: 100%;
}

.category-item {
    background-color: #fff;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    height: 100%;
}

    .category-item:hover span {
        color: #D71E1E;
    }
    .category-item:hover {
        transform: translateY(-5px);
    }

.category-item-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.category-icon {
    text-align: center;
    margin-bottom: 15px;
}

    .category-icon img {
        width: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

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

.category-info {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.category-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 15px;
    display: block;
}

.category-desc {
    color: #777;
    font-size: 13px;
    line-height: 1.4;
}

/* Navigation buttons styling */
.swiper-button-next,
.swiper-button-prev {
    background-color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 30%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
    color: #333;
    transition: all 0.3s ease;
}
   
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 18px;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background-color: #484747;
        color: white;
        transition: all 0.3s ease;
    }

    .swiper-button-next::after:hover,
    .swiper-button-prev::after:hover {
        color:white;
    }
.nav-link .basket-icon, .nav-link .fa-user, .nav-link .login-m-icon, .nav-link .fa-right-to-bracket {
    font-size: 30px;
}
.navbar-nav.flex-row > li:not(:last-child) {
    position: relative;
}
    .navbar-nav.flex-row > li:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 38px;
        width: 1px;
        background-color: rgba(0, 0, 0, 0.15); /* Light gray divider */
    }



    /* Ensure first and last items are properly aligned */
    .navbar-nav.flex-row > li:first-child {
        margin-right: 0;
    }

    .navbar-nav.flex-row > li:last-child {
        margin-left: 0;
    }
.user-icon {
    display: inline-block;
    width: 37px;
    height: 37px;
    background-image: url('/Media/Icons/userProfile.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-left: 5px;
    position: relative;
    top: -1px;
}
.nav-link i.fa-angle-down {
    margin-right: 1px;
    font-size: 10px;
    color: #b3b3b3;
}


.kala-list .swiper-button-next {
    left: 12px;
    right: auto;
}

   

    /* Ensure consistent product card styling */
    .swiper-el32 .product-item {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
        background: white;
    }

        /* Standardize image container height */
        .swiper-el32 .product-item .image {
            height: 235px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .swiper-el32 .product-item .image img.main {
                max-height: 100%;
                max-width: 100%;
                object-fit: contain;
            }

        /* Fix title truncation - limit to 2 lines with ellipsis */
        .swiper-el32 .product-item .title {
            font-size: 14px;
            height: 40px;
            overflow: hidden;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
        }

        /* Standardize other sections for consistent heights */
        .swiper-el32 .product-item .tag {
            min-height: 30px;
            display: flex;
            align-items: center;
        }

        .swiper-el32 .product-item .price-box {
            min-height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }


/* Make responsive fixes */
@media (max-width: 768px) {
    .swiper-el32 .product-item .image {
        height: 150px;
    }

    .swiper-el32 .product-item .title {
        height: 36px;
        font-size: 13px;
    }

    .swiper-el32 .product-item .price-box {
        min-height: 50px;
    }
}
.subcategories-slider {
    padding: 30px 0;
}

    .subcategories-slider .category-card {
        text-align: center;
        transition: transform 0.3s ease;
        padding: 15px;
        border-radius: 8px;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

        .subcategories-slider .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

    .subcategories-slider .category-image {
        height: 120px;
        width: 120px;
        margin: 0 auto 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        overflow: hidden;
        background-color: #f5f5f5;
    }

        .subcategories-slider .category-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
        }

    .subcategories-slider .category-title {
        font-size: 14px;
        margin: 0;
        font-weight: 600;
        color: #333;
    }

    .subcategories-slider .category-desc {
        font-size: 12px;
        color: #666;
        margin-top: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .subcategories-slider .category-link {
        color: inherit;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

        .subcategories-slider .category-link:hover {
            color: var(--color-primary);
        }

    /* Swiper navigation styling */
    .subcategories-slider .swiper-button-next,
    .subcategories-slider .swiper-button-prev {
        background-color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

        .subcategories-slider .swiper-button-next:after,
        .subcategories-slider .swiper-button-prev:after {
            font-size: 18px;
            color: #333;
        }

/* Responsive adjustments */
@media (max-width: 767px) {
    .subcategories-slider .category-image {
        height: 80px;
        width: 80px;
    }

    .subcategories-slider .category-title {
        font-size: 12px;
    }

    .subcategories-slider .category-desc {
        font-size: 10px;
    }
}
.my-sorter-box {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
    margin-bottom: 16px;
}

.grid-list-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}

.sort-header {
    font-weight: bold;
    margin-left: 15px;
    color: #333;
    display: flex;
    align-items: center;
}

    .sort-header i {
        margin-right: 8px;
        cursor: pointer;
        font-size: 14px;
    }

.grid-list-buttons span {
    position: relative;
}

.grid-list-buttons input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.grid-list-buttons label {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 15px;
    color: #666;
    transition: all 0.2s ease;
    font-size: 12px;
}

    .grid-list-buttons label:hover {
        color: #333;
    }

   

.f-checkbox {
    margin-right: 0;
}

@media (max-width: 768px) {
    .my-sorter-box {
        display: none;
    }
}
label.sort-label{
    font-size:15px
}
    label.sort-label.active {
        color: #d30a0a;
        font-weight: bold;
    }



.certificates-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.certificate-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

    .social-icon:hover {
        opacity: 0.8;
        transform: translateY(-3px);
    }
.footer-links li a i {
margin-block:auto;
}
.footer-links li a {
    gap: 5px;
    display: flex;
    color: #555;
}
.footer-title{
    font-size:22px;
    display:block;
    margin-bottom:1.7rem;
}
.icon-img-container {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    margin: 0 5px;
}

.icon-img {
    max-width: 50px;
    max-height: 50px;
    transition: transform 0.3s ease;
    vertical-align: middle;
}

.icon-img-container:hover .icon-img {
    transform: scale(1.2);
}

.separator-line {
    display: inline-block;
    width: 1px;
    height: 1.2em;
    background-color: rgba(0,0,0,0.2);
    margin: 0 10px;
    vertical-align: middle;
}
.intro-icons {
    padding: 30px 0;
}



.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 4rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f5f5f5b2;
    border-radius: 8px;
}

    .icon-item img {
        margin-bottom: 10px;
        width:auto;
    }

    .icon-item strong {
        font-size: 14px;
    }

    .icon-item:hover {
        transform: translateY(-5px);
    }
.el-11 .icon-item:hover .title {
    color: var(--color-primary);
}
.seperator {
    display: inline-block;
    width: 1px;
    background-color: #e0e0e0; /* Or any color that matches your design */
    height: 16px;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Alternative method using ::before pseudo-element */
.nav-item.with-separator::before {
    content: "";
    width: 1px;
    background-color: #e0e0e0;
    height: 16px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.depth1 .layer1{

}
.depth1 .layer2 {
     color: #444;
}


.depth2 .layer3 {
    color: #717171;
}

.depth3 .layer1  {
}
/* Main table styling */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0px 9px rgba(0, 0, 0, 0.51);
    margin: 20px 0;
}

/* Header styling */

thead td {
    color: white;
    font-weight: bold;
    padding: 12px 15px;
}

/* Body styling with alternating colors */
table thead tr {
    background: var(--color-primary);
}

tbody body tr:nth-child(even) {
    background-color: #f2f2f2;
}

tbody body tr:nth-child(odd) {
    background-color: white;
}

/* Hover effect */
tbody body tr:hover {
    background-color: #e0f7fa;
    transition: background-color 0.2s ease;
}

/* Cell styling */
tbody td, thead td {
    border: 1px solid #ddd;
    padding: 10px 15px;
    box-shadow: 0 0px 0px 1px rgba(2, 2, 2, 0.51);
}


/* Improved navbar slideshow styles */
.navbar-topbar {
    overflow: hidden;
}

.navbar-slide p {
margin-bottom:0;
}
.navbar-slide {
    position: relative;
    min-height: 55px;
    width: 100%;
}

.4-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.navbar-video-background {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .navbar-video-background img,
    .navbar-video-background video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.topnav-container {
    position: relative;
    z-index: 1;
    padding: 8px 0;
}
/* Banner Slider Styles - Full Width and Contained */
.swiper-full-width,
.swiper-contained {
    overflow: hidden;
    position: relative;
}

.swiper-full-width {
    width: 100%;
    margin: 0;
}

.swiper-contained {
    border-radius: 8px;
    margin: 20px auto;
}

.full-width-slide-image,
.contained-slide-image {
    width: 100%;
    height: auto;
    display: block;
}

.full-width-slide {
    width: 100%;
}

.contained-slide {
    border-radius: 8px;
    overflow: hidden;
}

.swiper-pagination {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    background: #ffffff80;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: white;
    width: 12px;
    height: 12px;
}

/* Text position classes */
.banner_FullWidth_Bottom {
    margin-bottom: 0 !important;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 15px;
}

.banner_left_middle {
    margin: auto auto auto 5% !important;
    padding: 15px;
}

.banner_right_middle {
    margin: auto 5% auto auto !important;
    padding: 15px;
}

.banner_middle {
    margin: auto !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    text-align: center;
}
/* Full Width Slider Fix - Make it truly span the entire screen width */
.swiper-full-width {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
}

    .swiper-full-width .swiper-slide {
        width: 100%;
    }

    .swiper-full-width img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Make text content properly positioned in full-width slider */
    .swiper-full-width .card-body {
        position: relative;
    }
/* استایل‌های مورد نیاز برای منوی موبایل */
#mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1499;
    display: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}

    #mobile-menu-overlay.active {
        display: block;
        opacity: 1;
    }



    #navbar-cats.active {
        right: 0;
    }

.pop-parent {
    position: relative;
    width: 100%;
    justify-content: start;
    padding-right: 0 !important;
    padding-left: 0 !important;
    direction: rtl;
}

.close-cats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
    margin: 0 0 10px 0;
    color: #535353;
}

    .close-cats i {
        cursor: pointer;
        font-size: 1.2rem;
    }


.menu-level2 {
    margin: 0 10px 0 0;
    padding: 0;
    border-right: 1px solid #ddd;
}

  
    .menu-level2 > li {
        list-style: none;
        line-height: 45px;
        position:relative;
    }

        .menu-level2 > li:first-child {
            padding-right: 12px;
        }
        .menu-level2 > li:not(:first-child) {
            border-right: 1px solid #eaeaea;
            padding-right: 12px;
            margin-right: 25px;
        }

        .menu-level2 > li:first-child::before {
            border-top: 2px dotted #595858;
            content: "";
            position: absolute;
            top: 22px;
            right: 19px;
            width: 20px;
            height: 14px;
            z-index: 1;
        }

        .menu-level2 > li:not(:first-child)::before {
            content: "";
            position: absolute;
            top: 22px;
            right: 19px;
            width: 20px;
            height: 14px;
            border-top: 2px dotted #c6c6c6;
            z-index: 1;
        }
       
    
        .menu-level2 > li .L2Item {
            color: #474747;
            font-weight: 500;
            font-size: 14px;
            position: relative;
            display: block;
            padding-right: 25px;
            margin: 0 20px 0 0;
            cursor: pointer;
        }
.menu-level3 > li{
    position:relative;
}
    .menu-level3 > li:first-child {
        border-right: 1px solid #eaeaea;
        padding-right: 20px;
    }

        .menu-level3 > li:first-child::before {
            content: "";
            position: absolute;
            top: 20px;
            right: 8px;
            width: 20px;
            height: 14px;
            border-top: 2px dotted #666;
            z-index: 1;
        }
    .menu-level3 > li:not(:first-child)::before {
        content: "";
        position: absolute;
        top: 20px;
        right: 8px;
        width: 20px;
        height: 14px;
        border-top: 2px dotted #c6c6c6;
        z-index: 1;
    }

.menu-level3 > li:not(:first-child) {
    border-right: 1px solid #eaeaea;
    padding-right: 20px;
    margin-right: 15px;
}

.L3Item.mobile-menu-click ::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #333;
    margin-left: 8px;
    transition: background-color 0.3s ease;
    position: absolute;
    top: 20px;
    right: 13px;
}
    .L3Item.active::before {
        background-color: #ea1a1a;
    }

.menu-level3.active {
    display: block;
}

    .menu-level3 li {
        margin-top: 5px;
        position: relative;
        line-height: initial;
        list-style: none;
    }

    .menu-level3 .L3Item {
        font-size: 13px;
        display: block;
        position: relative;
        padding: 10px 15px;
        color: #555;
    }

.menu-level4 {
    padding: 0 15px;
    display: none;
    margin-right: 10px;
}

    .menu-level4.active {
        display: block;
    }

    .menu-level4 .L4Item {
        font-size: 12px;
        display: block;
        padding: 8px 15px;
        color: #666;
    }

.mobile-menu-click {
    position: relative;
}

    .mobile-menu-click::after {
        content: "\f107";
        font-family: "Font Awesome 6 Pro";
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
    }

    .mobile-menu-click.active::after {
        transform: translateY(-50%) rotate(180deg);
    }

.nav-item.dropdown .dropdown-menu {
    display: none;
}

.nav-item.dropdown.show .dropdown-menu {
    display: block;
}

.nav-item.dropdown .nav-link {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    border-bottom: 1px solid #eee;
}
#mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1499;
    display: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}

    #mobile-menu-overlay.active {
        display: block;
        opacity: 1;
    }

#navbar-cats {
    position: fixed;
    background: #fff;
    z-index: 1500;
    width: 100%;
    box-shadow: 0 0 10px #0000005c;
    top: 0;
    right: -100%;
    bottom: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: right 0.3s ease;
    direction: rtl;
}

    #navbar-cats.active {
        right: 0;
    }

/* استایل‌های سطح اول - لول 1 */
.nav-item.dropdown {
    background-color: #fff; /* حالت بسته: سفید */
    transition: background-color 0.3s ease;
}

    .nav-item.dropdown.show {
        background-color: #f5f5f5; /* حالت باز: طوسی کم‌رنگ */
    }

/* استایل‌های سطح دوم - لول 2 */
.menu-level2 {
    margin: 0 10px 0 0;
    padding: 0;
    border-right: 1px solid #333; /* خط مشکی سمت راست */
}

.nav-item.dropdown.show .menu-level2 {
    border-right-color: var(--color-primary, #ff0000); /* خط قرمز در حالت باز */
}

/* استایل‌های سطح سوم - لول 3 */
.L2Item.mobile-menu-click::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 18px;
    background-color: #333; /* دایره مشکی */
    margin-left: 8px;
    transition: background-color 0.3s ease;
    position: absolute;
    top: 13px;
    right: 13px;
}

/* استایل‌های سطح چهارم - لول 4 */
.L3Item.mobile-menu-click::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #333; /* دایره مشکی کوچکتر */
    margin-left: 8px;
    transition: background-color 0.3s ease;
}

.L3Item.mobile-menu-click.active::before {
    background-color: var(--color-primary, #ff0000); /* دایره قرمز در حالت باز */
}

/* استایل‌های عمومی */
.close-cats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
    margin: 0 0 10px 0;
    color: #535353;
    
}

    .close-cats i {
        cursor: pointer;
        font-size: 1.2rem;
        border: 1px solid #ddd;
        padding: 8px 9px;
        border-radius: 50%;
    }



.mobile-menu-click {
    position: relative;
    cursor: pointer;
}

    .mobile-menu-click::after {
        content: "\f107";
        font-family: "Font Awesome 6 Pro";
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
    }

    .mobile-menu-click.active::after {
        transform: translateY(-50%) rotate(180deg);
    }


.menu-level3 {
    padding: 0px 10px;
    margin-right: 23px;
    display: none;
}


    .menu-level3.active, .menu-level4.active {
        display: block;
    }

    .menu-level3 .L3Item {
        font-size: 13px;
        display: block;
        position: relative;
        padding: 10px 15px;
        color: #555;
    }

    .menu-level4 .L4Item {
        font-size: 12px;
        display: block;
        padding: 8px 15px;
        color: #666;
    }
.L2Item.active:before {
    background-color: #ea1a1a;
}

.L2Item:before{


}
.L2Item.active {
    background: #f5f5f5;
}
.footer-contact ul{
    padding:0;
}
.video-enhanced-slider .media-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-enhanced-slider .media-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.video-enhanced-slider .full-width-slide-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-enhanced-slider .video-slide {
    background: #000;
}

.video-enhanced-slider .lazy-video,
.video-enhanced-slider .lazy-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
    .video-enhanced-slider .lazy-video:focus {
        outline: none;
    }
.video-enhanced-slider .lazy-video {
    background-color: #f8f9fa;
}
    .video-enhanced-slider .contained-slide-media {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.navbar-slideshow {
    position: relative;
    overflow: hidden;
    min-height: 55px;
}

.navbar-slides {
    width: 100%;
    height: 100%;
    position: relative;
}
/* تغییر استایل‌های navbar-slide */
.navbar-slide {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 55px;
    display: block;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* فقط وقتی navbar-slideshow وجود دارد، المان‌ها absolute شوند */
.navbar-slideshow .navbar-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 55px;
    display: none;
    opacity: 1;
}

    .navbar-slideshow .navbar-slide.active {
        display: block;
        opacity: 1;
        position: relative;
    }
    
/* همین background styles را نگه دارید */
.navbar-slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.navbar-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

    .navbar-video-background video,
    .navbar-video-background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.topnav-container {
    position: relative;
    z-index: 1;
    padding: 8px 0;
}


/* Ensure content appears above background */
.navbar-topbar .container {
    position: relative;
    z-index: 1;
}

.navbar-slideshow .navbar-slide .topnav-container {
    position: relative;
    z-index: 2;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.navbar-slideshow .navbar-slide.fade-out .topnav-container {
    opacity: 0;
    transform: translateY(20px);
}

.navbar-slideshow .navbar-slide.fade-in .topnav-container {
    opacity: 1;
    transform: translateY(0);
    animation: textFadeIn 0.3s ease-in-out;
}

/* استایل‌های انیمیشن برای بک‌گراند */
.navbar-slideshow .navbar-slide .navbar-slide-background,
.navbar-slideshow .navbar-slide .navbar-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: opacity 0.5s ease-in-out;
    transition-delay: 0.2s; /* تاخیر برای fade شدن بعد از متن */
}

.navbar-slideshow .navbar-slide.fade-out .navbar-slide-background,
.navbar-slideshow .navbar-slide.fade-out .navbar-video-background {
    opacity: 0;
    transition-delay: 0.3s; /* بک‌گراند بعد از متن fade می‌شود */
}

.navbar-slideshow .navbar-slide.fade-in .navbar-slide-background,
.navbar-slideshow .navbar-slide.fade-in .navbar-video-background {
    opacity: 1;
    animation: backgroundFadeIn 0.5s ease-in-out;
    animation-delay: 0.2s; /* بک‌گراند بعد از متن fade in می‌شود */
}

/* Animation keyframes */
@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes backgroundFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes navbarFadeIn {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

@keyframes navbarFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}



/* Semi-transparent overlay for better text visibility if needed */
.navbar-slide-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 1;
    pointer-events: none;
}

/* Ensure text is visible over background */
.topnav-container .top-text {
    position: relative;
    z-index: 3;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .navbar-slideshow {
        min-height: 45px;
    }

    .navbar-slide {
        min-height: 45px;
    }

    .topnav-container {
        padding: 6px 0;
    }
}