/* Color Link
    https://colorhunt.co/palette/171F489B1111fcffe7CA0F0F
    CA0F0F
    CA0F0F
    9B1111
*/
html {
    scroll-behavior: smooth;
}
@font-face {
    font-family: 'IRANSansWebFaNum';
    src: url('../fonts/IRANSansWeb(FaNum).eot');
    src: url('../fonts/IRANSansWeb(FaNum).eot') format('embedded-opentype'), url('../fonts/IRANSansWeb(FaNum).woff') format('woff'), url('../fonts/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;
}


h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1{
    line-height:1.5;
}

    :host, :root {
        --fa-style-family-brands: "Font Awesome 6 Brands";
        --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
    }

    :host, :root {
        --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Pro";
    }

    :host, :root {
        --fa-style-family-classic: "Font Awesome 6 Pro";
        --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Pro";
    }

    body {
        font-family: IRANSansWebFaNum,sans-serif;
        direction: rtl;
        text-align: right;
    }

    html {
        overflow-x: hidden;
    }

    .footer-nav-list li a {
        display: contents;
    }

p {
    margin-bottom: 0.5rem;
    color: var(--bs-body-color);
}

.rsp-cols {
    display: grid;
    align-items: start;
}

.rsp-col {
    min-width: 0;
}

@media (max-width: 767px) {
    .rsp-cols {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .rsp-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .rsp-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}
'}]}”, etc. But the multi_replace JSON has formatting issue due to inserted curly? Need check. I need use valid JSON. Let's do separate replacements, one per file. We'll use multi_replace_string_in_file with proper JSON. Need no weird bracket issue. We'll replace app.js content and CSS insertion. Let's do carefully. Use exact snippet from file. Ensure quoting. We'll include explanation. Let's use multi_replace_string_in_file. Need be careful because file uses CRLF? Probably fine. We'll include exact snippet from file. For CSS, insert after p block. We'll use context around p block. Let's do. no issues. The previous tool call had malformed JSON because of quote; fix. Let's proceed. Another note: maybe need `grid-template-columns: repeat(2, minmax(0, 1fr));`. But existing is `repeat(2,1fr)`. fine. Use exact. Let's patch. The oldString for app.js snippet includes full content. We'll replace. Use explanation. Let's do. Full replacement for entire block. For CSS, insert after p block. We'll maintain style. Let's do. Use multi_replace_string_in_file. need one message. Let's ensure JSON syntax valid. We'll quote properly. Use `"` escaped inside. But in JSON object there is no actual line breaks? The tool uses JSON object; we can include them as string values containing newlines. Fine. Let's send.व. Wait the tool expects JSON, and newString can include line breaks. It's okay. Let's do. art. Use double quotes around property strings. Prepare carefully. Let's send. We'll maybe not include invalid stray chars. Let's do. Also use `filePath` relative path from solution directory, not absolute? The editing tools require relative. The previous ones used absolute; but relative should work. I can use relative paths. Good. We'll use relative paths `ResnaWeb/wwwroot/js/app.js`, etc. Great. We'll do. We'll also maybe patch `tinymceConfig.js` not necessary. But app.js fix enough. Let's do. Keep consistent. Use `C:	mp`? no. We'll use relative. Good. Let's call. We'll also maybe run get_errors after? But JS syntax maybe. get_errors maybe not for JS? It might. We'll just run. No build needed; maybe syntax. But maybe `get_errors` on app.js. Fine. Let's patch. Use multi_replace_string_in_file. Need likely path `ResnaWeb/wwwroot/js/app.js` and `ResnaWeb/wwwroot/css/theme-custom.css`. Let's do. Wait workspace root is `C:\Usersin..
esnaweb` and project folder is `ResnaWeb`. The solution file is in repo root. The project is maybe `ResnaWeb` folder inside repo root. So relative path from repo root is `ResnaWeb/wwwroot/js/app.js`. Our prior file path with `ResnaWeb	hing` worked. We can use exactly from file context. Great. Let's patch. Use a single replacement for app.js and one for CSS. Let's do. We'll then run get_errors. Might not catch JS but okay. Let's patch. Need maybe include `grid-template-columns` CSS for `.rsp-cols` fallback because the UI maybe loaded before JS. Good. Let's patch. Use tool. not commentary? It is commentary channel. fine. Let's patch. we need no plan. ok.ungua. Let's do. ded. Use multi_replace. Let's. we have to careful with JSON. I'll include `explanation` and replacements. Let's go. Use 2 replacements. Good. We'll follow. Let's send. Recover. We'll patch. view. Let's. done. Let's do. Let's call function. شك. It's fine. It's within commentary. let's proceed. Actually tool target commentary. yes. Send. let's do. be careful. We'll keep simple. Good. Let's patch. Provide full old/new strings. Let's run. We'll do. Let's final. Let's. Vision. Content. We'll proceed. let's do. Use proper escaping. Similar to previous but valid. Let's send. We must include line endings. Fine. Let's do. Wait JSON on tool call can include newline strings; we'll include with actual new lines. Fine. It's okay. We'll use no extra backslashes. Let's call. Need valid JSON. Great. Let's patch. Let's go. I'm sending. good. We'll see. Let's do. We'll proceed. We'll use multi_replace_string_in_file. Need generic. Let's. Okay. Let's. Let's go. Hmm. We'll. Use. Let's. Wait this tool expects object; we can directly call. We'll do. It's okay. Let's. Proceed. Let's. Okay. We'll send. Let's do. izvaj. Let's finalize. This should work. I'm ensuring no single quote weirdness. We'll inside string use escaped single quotes? not necessary. We'll use double quotes around JSON properties; content strings can include single quote. fine. Let's patch. Ok. go. Let's. yes. Let's proceed. Done. Let's go. Use. We should be fine. Let's do. I'll call the tool. Good. Let's proceed. We'll finalize. Use `multi_replace_string_in_file`. Done. Let's go. We'll see. Stay. Good. Let's do. let's. I'm sending the tool call. Great. Let's go. Fine. Done. Let's. 'commentary to=functions.multi_replace_string_in_file' etc. Let's do. I need ensure no mistaken property names. fine. Let's. We'll. Send. Great. let's. Good. We'll. Huh. Let's proceed. Use actual JSON. Great. We'll. Fine. let's call. Let's. We'll. Done. let's. right. Fine. Let's move on. I need not overthink. Let's ensure content is valid. Great. Let's do. Powered. fine. We'll. then. Let's. [I have to produce tool call now.] Let's do. I'm sending. good. Let's. ok. Let's proceed. The model output should have tool call. Let's do. The structure: 
    .service-card-36:hover {
        border: 1px solid var(--color-primary);
    }
    /*------header----------*/
    .main-header .offcanvas-body .main-menu {
        padding: 0;
    }

    .offcanvas-body .dropdown-toggle::after {
        right: initial;
        left: 0;
    }

    .colored-header {
        background: var(--header-colored-backcolor);
    }

    .glass-header {
        background: var(--header-glass-backcolor);
    }

    .light-header {
        background: var(--header-light-backcolor);
    }

    .main-menu li.nav-item {
        position: relative;
    }
.affix{
    animation:none;
}

.glass-header .big-menu > ul > li > a.nav-link, .glass-header .big-menu > .full-menu-container > a.nav-link, .glass-header .header-text, .glass-header .header-text a{
    color: var(--header-glass-text);
}

.glass-header .main-menu > ul > li > a:hover, .glass-header .main-menu > .full-menu-container > a:hover {
    color: var(--header-glass-hovertext);
}

.light-header .big-menu > ul > li > a.nav-link, .light-header .big-menu > .full-menu-container > a.nav-link, .light-header .header-text, .light-header .header-text a {
    color: var(--header-light-text);
}

.light-header .main-menu > ul > li > a:hover , .light-header .main-menu > .full-menu-container > a:hover {
    color: var(--header-light-hovertext);
}

.light-header .big-menu > ul > li > a.nav-link:hover, .light-header .big-menu > .full-menu-container > a.nav-link:hover{
    color: var(--header-light-hovertext);
}

.glass-header .big-menu > ul > li > a.nav-link:hover, .glass-header .big-menu > .full-menu-container > a.nav-link:hover {
    color: var(--header-glass-hovertext);
}


    .logo-mob-navbar {
        max-height: 60px;
    }

.colored-header .big-menu > ul > li > a.nav-link, .colored-header .big-menu > .full-menu-container > a.nav-link , .dark-header .header-text , .dark-header .header-text a {
    color: var(--header-colored-text);
}

    .colored-header .big-menu > ul > li > a.nav-link:hover, .colored-header .big-menu > .full-menu-container > a.nav-link:hover {
        color: var(--header-colored-hover);
    }

.navbar-light.sticky-header.affix a.nav-link.nav-link, .navbar-dark.sticky-header.affix a.nav-link, .navbar-light.sticky-header.affix .header-text a {
    color: var(--header-light-text);
}

        .navbar-light.sticky-header.affix a.nav-link:hover, .navbar-dark.sticky-header.affix a.nav-link :hover {
            color: var(--header-light-text);
        }

.navbar-light.sticky-header.affix, .navbar-dark.sticky-header.affix a.nav-link {
    color: var(--header-light-text);
}

    .navbar-light.sticky-header.affix, .navbar-dark.sticky-header.affix {
        background: var(--header-light-backcolor);
    }

    .sticky-header .logo-affix {
        display: none;
    }

    .sticky-header.affix .main-logo {
        display: none !important;
    }

    .sticky-header.affix .logo-affix {
        display: block !important;
        max-height: 60px;
    }
    /*------header End----------*/
    .product-descpription {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /*.nav-item{
    position:relative !important;
}*/


    .offcanvas-button {
        background: white;
        color: black;
        padding: 8px;
        margin: 12px;
        display: flex;
    }

        .offcanvas-button i {
            color: black;
        }

  

    .navbar-light .navbar-brand img.logo-white, .navbar-dark .navbar-brand img.logo-color, .navbar-dark.sticky-header.affix .navbar-brand img.logo-white {
        display: block;
    }

nav .nav-item div.dropdown-menu {
    position: absolute !important;
}

    .btn.active {
        color: #fff;
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }


    .cat-t2 .dropdown-grid > .col:not(:last-child) {
        border-left: 4px solid var(--rgba-primary-5);
    }
.cat-t2 .dropdown-grid > .col {
    padding-inline: 4px;
}
        .product-slick {
            direction: ltr;
        }

    .slider-nav {
        direction: ltr;
    }

    .right-image {
        display: flex !important;
        justify-content: center;
    }


    .navbar-brand {
        padding: 0;
    }

    .logo-white, .logo-dark {
        max-height: 110px;
    }

    .collaboration-element {
        position: absolute;
        display: initial;
    }

    .no-click {
        cursor: initial;
    }

    .link-with-icon i {
        padding-right: 4px !important;
    }

    .link-with-icon:hover i {
        transform: translateX(-3px);
    }

    .integration-list-wrap {
        width: 110px;
        height: 110px;
        position: absolute;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-right: 16px;
        margin-left: 16px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 100px;
        -webkit-box-shadow: 7px 7px 10px 0 rgba(55,65,81,.12);
        box-shadow: 7px 7px 12px 0 rgba(55, 65, 81, 0.51);
    }

        .integration-list-wrap img {
            padding: 10px;
        }


    .custom-sec-style {
        position: relative;
    }




    .bg-gradient {
        background: var(--color-gradiant1);
    }

    .btn-primary {
        --bs-btn-color: var(--color-on-primary);
        --bs-btn-bg: var(--color-primary);
        --bs-btn-border-color: var(--color-primary);
        --bs-btn-hover-color: var(--color-hover-text);
        --bs-btn-hover-bg: var(--color-hover-bg);
        --bs-btn-hover-border-color: var(--color-hover-bg);
        --bs-btn-focus-shadow-rgb: 37, 99, 235;
        --bs-btn-active-color: #ffffff;
        --bs-btn-active-bg: #576CBC;
        --bs-btn-active-border-color: #1145bf;
        --bs-btn-active-shadow: unset;
        --bs-btn-disabled-color: #ffffff;
        --bs-btn-disabled-bg: var(--color-primary);
        --bs-btn-disabled-border-color: var(--color-primary);
    }

        .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary.active, .btn-primary.show {
            border-color: var(--color-primary);
            background-color: var(--color-primary);
        }

    .footer-top.bg-dark .footer-nav-list li a:hover, .footer-top.bg-gradient .footer-nav-list li {
        color: var(--footer-color);
    }

        .footer-top.bg-dark .footer-nav-list li a:hover, .footer-top.bg-gradient .footer-nav-list li a:hover {
            color: var(--footer-hover);
        }

.copyright-text p {
    color: white;
}
.copyright-text{
    display:flex;

}
.copyright-text p a:hover {
    color: var(--color-primary);
}

    .footer-social-list li a:hover {
        border-color: var(--color-primary);
        background-color: var(--color-primary);
    }

    .dropdown-grid-item, .width-full-3 .dropdown-grid-item {
        width: auto;
        text-align: right;
    }

    .btn {
        font-family: IRANSansWebFaNum;
    }

    .dropdown-grid.width-full.homepage-dropdown {
        width: 100%;
    }

    .contact-ul li {
        margin: 15px 0;
    }

        .contact-ul li a {
            display: contents;
        }

    .btn-soft-primary {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .btn-outline-primary {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

        .btn-soft-primary:hover, .btn-outline-primary:hover {
            border-color: var(--color-primary);
            background-color: var(--color-primary);
            color: white;
        }
.attribute-copy-btn {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    display: flex;
}
.hero-subscribe-form-wrap {
    max-width: 514px;
}

        .hero-subscribe-form-wrap button div {
            display: inline-block;
        }

            .hero-subscribe-form-wrap button div span {
                display: inherit;
            }

                .hero-subscribe-form-wrap button div span.button-loader {
                    display: inherit;
                    margin-right: 15px;
                }

    : root {
        --bs-primary-rgb: var(--color-primary) !important;
        --bs-text-opacity: var(--color-primary) !important;
    }

    .hd-secondary-btn {
        background-color: var(--color-primary);
        color: #fff;
    }

        .hd-secondary-btn:hover {
            background-color: var(--color-primary) !important;
        }

        .hd-secondary-btn span {
            color: #fff;
        }

    .text-primary {
        --bs-text-opacity: 1;
        color: var(--color-primary) !important;
    }


    .contact-ul li {
        margin: 15px 0;
    }

        .contact-ul li a {
            display: contents;
        }

    .btn-soft-primary {
        background-color: var(--color-secondary);
        border-color: var(--color-secondary);
    }

        .btn-soft-primary:hover, .btn-outline-primary:hover {
            border-color: var(--color-primary);
            background-color: var(--color-primary);
        }

    :root {
        --bs-primary-rgb: var(--color-primary) !important;
        --bs-text-opacity: var(--color-primary) !important;
    }

    .btn-outline-light:hover, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.show {
        color: #e5e5e5 !important;
        border-color: var(--color-primary);
    }

    .text-primary {
        --bs-text-opacity: 1;
        color: var(--color-primary) !important;
    }

    .preloader-icon {
        width: 135px;
        height: auto;
    }

    .loading-bar {
        width: 240px;
    }

    #preloader {
        background: #100926F5 !important;
    }

    .loading-bar::before {
        left: 80px;
        width: 65px;
        background: var(--color-primary);
    }

    a, .btn-link:not(.uncolor) {
        color: var(--color-primary);
    }

        a:hover, .btn-link:hover {
            color: var(--color-primary);
        }

    .bg-primary {
        background-color: var(--color-primary) !important;
    }

    .bg-primary-soft {
        background-color: var(--rgba-primary-1) !important;
    }

    .read-more-link:hover i {
        transform: translateX(-3px);
    }

    .z-20 {
        z-index: 20;
    }

    .sticky-sidebar {
        position: sticky;
        top: 85px;
    }


    .z-15 {
        z-index: 15;
    }



    .z-30 {
        z-index: 30;
    }



    .z-40 {
        z-index: 40;
    }




    .icon-box {
        margin-bottom: 15px;
    }

    .navbar-dark .main-menu li a.nav-link, .navbar-dark .action-btns a.btn-link {
        font-weight: 800;
        font-size: 15px;
    }

    .contact-ul li {
        font-size: 14px;
    }

    .footer-nav-list li a, .footer-single-col p {
        font-size: 14px;
    }




    .text-lg-start {
        text-align: right !important;
    }


    .feature-tab-list-2 li a {
        margin-left: 15px;
        margin-right: 0;
    }

        .feature-tab-list-2 li a.active {
            background: var(--color-primary);
            border-color: var(--color-primary);
        }

        .feature-tab-list-2 li a:hover {
            background: var(--color-primary);
            border-color: var(--color-primary);
        }

    .read-more-link {
        font-size: 18px;
    }

    .feature-tab-list-2 li a {
        font-size: 15px;
    }

    .register-form input.form-control:focus {
        border-color: var(--color-primary);
    }

    .dropdown-grid-item a:hover .drop-title, .dropdown-grid-item a:hover span, .dropdown-grid-item a:hover p {
        color: var(--color-primary);
    }

    .form-control:focus {
        border-color: var(--color-primary);
    }

    .z-20 {
        z-index: 20;
    }



    .z-15 {
        z-index: 15;
    }



    .z-30 {
        z-index: 30;
    }



    .z-40 {
        z-index: 40;
    }


    @media (max-width: 1060px) {
        .mob {
            display: block !important;
        }

        .tablet {
            display: none;
        }

        .desk {
            display: none;
        }
    }

    @media (min-width: 1061px) and (max-width:1399px) {
        .mob {
            display: none;
        }

        .tablet {
            display: block !important;
        }

        .desk {
            display: none;
        }
    }

    @media (min-width: 1400px) {
        .mob {
            display: none;
        }

        .tablet {
            display: none;
        }

        .desk {
            display: block !important;
        }
    }


    .sticky-header {
        z-index: 100;
    }


    .copyright-text p a:hover {
        color: #f7a53c;
        font-weight: 800;
    }

    .copyright-text p a {
        font-weight: 800;
    }

    .header-btn {
        right: 75%;
    }

    .crm-about-content-box .crm-vector-img {
        left: 0;
        right: unset;
        max-width: 45%;
    }

    .sc-shape-gradient-7 {
        width: 115px;
        height: 214px;
        left: 75px;
        top: 150px;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        z-index: 9;
    }

    .sc-shape-gradient-8 {
        width: 100px;
        height: 214px;
        left: 40px;
        bottom: 100px;
        z-index: 9;
    }

    .sc-shape-gradient-9 {
        width: 100px;
        height: 214px;
        left: 180px;
        bottom: 0;
        z-index: 9;
    }

    .sc-shape-gradient-10 {
        width: 115px;
        height: 214px;
        right: 180px;
        top: 100px;
        z-index: 9;
    }

    .sc-shape-gradient-11 {
        width: 115px;
        height: 380px;
        right: 40px;
        top: 130px;
        z-index: 9;
    }

    .Context-Section {
        position: relative; /* Ensure the section is positioned relatively */
        overflow: hidden; /* Hide overflow content outside the section */
    }


        .Context-Section .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-attachment: fixed !important; /* Ensure the background stays fixed while scrolling */
            background-size: 1920px 1080px !important; /* Set the background size to the original dimensions */
            z-index: -1; /* Ensure the background stays behind other content */

            transform: translateZ(0); /* Ensure GPU acceleration for smoother performance */
        }



    .integration-list-wrap {
        background-color: white;
    }

    .Context-Section {
        position: relative; /* Ensure the section is positioned relatively */
        overflow: hidden; /* Hide overflow content outside the section */
    }


.navbar-light .main-menu li a.nav-link, .navbar-light .full-menu-container a.nav-link, .navbar-light .action-btns a.btn-link {
    font-weight: 800;
    font-size: 15px;
}

    .integration-list-wrap {
        background-color: white;
    }

    .title-border {
        border-right: 5px solid #251e79;
        margin-right: 5px;
        padding-right: 15px;
    }

    .title-border-primary {
        border-right: 5px solid var(--color-primary);
        margin-right: 5px;
        padding-right: 15px;
    }
    /*qoute dynamic styles*/
    .qoute-border {
        box-shadow: 0 5px 20px 0 var(--c-qoute-icon-color);
        color: var(--c-qoute-border);
    }

    .qoute-icon-color {
        color: var(--c-qoute-icon-color) !important;
    }
    /*---qoute dynamic styles end-------*/



    .footer-padding {
        padding: 55px 10px 0 0;
    }

.aiart-un-btn-sm {
    width: 58px;
    height: 58px;
    background: white;
}

    @media (min-width: 992px) {
        .text-lg-end {
            text-align: left !important;
        }
    }

    .page-link {
        font-family: IRANSansWebFaNum;
    }

.dropdown-grid-item .drop-title {
    font-family: IRANSansWebFaNum;
    color: #292929;
}

    .badge {
        color: var(--color-primary);
    }

    .text-l3 {
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Limit the number of lines to 3 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-l4 {
        display: -webkit-box;
        -webkit-line-clamp: 4; /* Limit the number of lines to 3 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-l5 {
        display: -webkit-box;
        -webkit-line-clamp: 5; /* Limit the number of lines to 3 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .article-title {
        font-size: 17px;
        line-height: 30px;
    }

    .risk-btn-bg {
        background-color: var(--color-primary);
        color: white;
    }

    .risk-btn-hover:hover {
        border-color: var(--color-primary);
        background-color: var(--color-primary);
        color: white;
    }

    .support-article-tab button.nav-link:hover, .support-article-tab a:hover {
        color: var(--color-primary);
    }

    .article-title:hover, .avatar-name:hover {
        color: var(--color-primary);
    }

    .footer-nav-list li a, .footer-single-col p {
        opacity: 1;
    }

    .footer-single-col h3, .footer-single-col .h3 {
        color: white;
    }

    .service-tabs .nav-pills .nav-link {
        padding-bottom: 5px;
    }

    .integration-logo {
        margin-bottom: 0;
    }

    .text-left {
        text-align: left !important;
    }

    .accordion-button {
        text-align: right;
    }


        .accordion-button::after {
            margin-right: auto;
            margin-left: unset;
        }


    .swiper-pagination-bullet {
        background: #fff;
        width: 10px;
        height: 10px;
        z-index: 6;
        position: relative;
        border-radius: 10px;
    }

    .swiper-pagination-bullets {
        text-align: center;
    }

    .swiper-pagination-bullet-active {
        width: 17px;
        transition: width 0.2s;
    }

    .swiper-pagination-bullets {
        position: absolute;
    }

    .process-icon-2 i {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .navbar-collapse > ul {
        padding-right: 0;
    }

    .process-icon-2 i {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .two-bg-dark-light {
        background-image: linear-gradient(270deg, #111827 40%, #f5f5f5 0);
    }

    @media (min-width: 320px) and (max-width: 767px) {
        .two-bg-dark-light {
            background: #f5f5f5;
        }
    }

    .footer-nav-list li {
        margin: 0.5rem 0;
        display: flex;
    }

        .footer-nav-list li a span {
            margin-right: 0 10px 0 0 !important;
        }

        .footer-nav-list li a {
            margin: 0;
        }

            .footer-nav-list li a i {
                font-size: 16px;
            }

       

    .fs-13 {
        font-size: 13px;
    }

    .footer-nav-list {
        padding: 0;
    }

    .footer-single-col h3 {
        position: relative;
    }

        .footer-single-col h3::after {
            content: "";
            position: absolute;
            width: 58%;
            border-top: 1px solid;
            border-top-width: 1px;
            border-top-style: solid;
            border-top-width: 1px;
            border-top-style: solid;
            border-bottom: 1px solid;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            height: 3px;
            top: 0;
            bottom: 0;
            margin: auto;
            left: 0%;
            display: block;
            border-width: 3px;
            border-style: solid;
            border-right-style: solid;
            border-left-style: solid;
            border-right-style: solid;
            border-left-style: solid;
            border-image-source: linear-gradient(to left, #ffffff00, #ffffff75);
            border-image-slice: 1;
            border-width: 1px;
            border-right-width: 1px;
            border-left-width: 1px;
            border-right-width: 1px;
            border-left-width: 1px;
            border-right: 0;
            border-left: 0;
        }

    .process-card:hover .process-icon {
        background-color: var(--color-primary) !important;
    }

    @media (min-width: 992px) {
        .offset-lg-2 {
            margin-right: 16.66666667% !important;
            margin-left: unset;
        }


        .offset-lg-1 {
            margin-right: 8.33333333% !important;
            margin-left: unset;
        }

        .offset-lg-3 {
            margin-right: 25% !important;
            margin-left: unset;
        }

        .offset-lg-4 {
            margin-right: 33.33333333% !important;
            margin-left: unset;
        }

        .offset-lg-5 {
            margin-right: 41.66666667% !important;
            margin-left: unset;
        }

        .offset-lg-6 {
            margin-right: 50% !important;
            margin-left: unset;
        }
    }


    /*top Nav*/

    .top-bar {
        background-color: #ffffff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        color: #444444;
        padding: 0;
    }

    .dlab-topbar-center, .dlab-topbar-left, .dlab-topbar-right {
        padding-left: 15px;
        padding-right: 15px;
        width: auto;
    }

        .dlab-topbar-left ul, .dlab-topbar-right ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

    .dlab-topbar-left {
        line-height: var(--bs-body-line-height);
    }

        .dlab-topbar-left ul li::after {
            content: "";
            height: 15px;
            width: 1px;
            background: #000;
            position: absolute;
            left: -10px;
            opacity: 0.2;
            top: 4px;
        }

        .dlab-topbar-left ul li {
            padding-right: 15px;
            position: relative;
            font-size: 16px;
            font-weight: 400;
        }

        .dlab-topbar-left ul li, .dlab-topbar-right ul li {
            display: inline-block;
        }

        .dlab-topbar-left ul, .dlab-topbar-right ul {
            list-style: none;
        }

            .dlab-topbar-left ul li, .dlab-topbar-right ul li {
                display: inline-block;
            }

    .site-button-link {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        border: 0 none;
        display: inline-block;
        font-weight: 400;
        padding: 3px 5px;
    }

    .box-header .dlab-topbar-right .site-button-link i {
        margin: 0;
    }

    .box-header .dlab-topbar-right .site-button-link {
        color: #fff;
        font-size: 14px;
    }
    /*top Nav*/
    /* ------Button Behaviour -----------13*/



    .btnhover13::after {
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
        background: var(--color-hover);
    }

    .btnhover14::after, .btnhover13::after, .btnhover15::after {
        background-color: var(--color-hover);
    }

    .btnhover13::before, .btnhover13::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: rgba(0,0,0,0.5);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        transition-timing-function: ease;
        transition-delay: 0s;
        -webkit-transform: translate(-100%,0);
        transform: translate(-100%,0);
        -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }

    .site-button, .site-button-secondry {
        color: #fff;
        padding: 12px 30px;
        display: inline-block;
        font-size: 13px;
        outline: none;
        cursor: pointer;
        outline: none;
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        line-height: 1.42857;
        border-radius: 3px;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
    }

    .btnhover13 {
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: all 0.8s linear;
    }

        .btnhover13::before, .btnhover13::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-color: rgba(0,0,0,0.5);
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s;
            transition-timing-function: ease;
            -webkit-transform: translate(-100%,0);
            transform: translate(-100%,0);
            -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
            transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        }

    .site-button {
        background-color: var(--color-primary);
    }

    .btnhover14::after, .btnhover13::after, .btnhover15::after {
        background-color: var(--color-hover);
    }

    .btnhover13::after {
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
        background: var(--color-hover);
    }

    .site-button:active, .site-button:hover, .site-button:focus, .active > .site-button {
        background-color: var(--color-hover);
        color: #fff;
    }

    .btnhover13:hover {
        -webkit-transition: all 0.5s ease 0.1s;
        -moz-transition: all 0.5s ease 0.1s;
        -o-transition: all 0.5s ease 0.1s;
        transition: all 0.5s ease 0.1s;
    }

        .btnhover13:hover::before, .btnhover13:hover::after {
            -webkit-transform: translate(0,0);
            transform: translate(0,0);
        }
    /* ------Button Behaviour End -----------13*/


    .button-loader {
        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;
        }
    }

    .btn:disabled, .btn.disabled, fieldset:disabled .btn {
        color: var(--color-secondary);
        pointer-events: none;
        background-color: var(--rgba-primary-9);
        border-color: var(--color-primary);
        opacity: 0.5;
    }

    .ins-service-card .ins-service-explore:hover svg {
        stroke: var(--color-primary);
    }

        .ins-service-card .ins-service-explore:hover svg path {
            stroke: var(--color-hover-text);
            fill: var(--color-hover-text);
        }

    .ins-service-card .ins-service-explore:hover {
        color: var(--color-secondary);
    }

    .ins-service-card .ins-service-explore {
        color: var(--color-primary);
    }

    .el-55-svg path {
        stroke: var(--color-primary) !important;
        fill: var(--color-primary) !important;
    }

    .hover-gradiant {
    }

    .pulse-primary:hover,
    .pulse-primary:focus {
        animation: pulse 0.8s;
        box-shadow: 0 0 0 2em transparent;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 var(--rgba-primary-3);
        }
    }

    .raise-primary:hover,
    .raise-primary:focus {
        box-shadow: 0 0.5em 0.5em -0.4em var(--rgba-primary-3);
        transform: translateY(-0.25em);
    }

    .dlab-post-meta ul {
        list-style: none;
        display: flex;
        font-size: 11px;
        color: var(--color-primary);
    }

        .dlab-post-meta ul li {
            margin-left: 5px;
        }

            .dlab-post-meta ul li::after {
                content: "|";
                margin-right: 5px;
                margin-left: auto;
            }

    .dlab-post-meta li:last-child::after {
        display: none;
    }

    .feature-tab-section .nav-link * {
        margin: 0;
    }

    .nav-pills .nav-link * {
        margin: 0;
    }

    .pay-gw-payment-item.back-white {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
    }

    .pay-gw-payment-item:hover {
        background-color: var(--color-primary) !important;
        color: white;
    }

        .pay-gw-payment-item:hover h3 {
            color: white;
        }

    .affix:first-child ul {
        padding: inherit;
    }

    .nav-item p {
        margin: 0;
    }

    .service-tabs .nav-pills .nav-link {
        display: flex;
    }

    .nav-pills .nav-link * {
        margin: auto;
    }

    .ai-wt-journey-tab .nav .nav-item a {
        color: #737373;
        padding-right: 24px;
        border-right: 2px solid #e4def7;
        border-left: 0;
    }

        .ai-wt-journey-tab .nav .nav-item a.active, .ai-wt-journey-tab .nav .nav-item a:hover {
            border: 2px solid;
            border-image-slice: 1;
            border-width: 2px;
            border-image-source: linear-gradient(to top, var(--color-primary), var(--color-secondary));
            border-top: 0;
            border-bottom: 0;
            border-left: 0;
        }

    .el51 .slide-img {
        position: absolute;
    }

    .el51 {
        position: relative;
    }

    .el51-slide .text {
        top: 20%;
        right: 15%;
        left: 50%;
        position: absolute;
    }

    .exhibition-carousel img {
        width: 100%;
    }

    .blog-details img {
        max-width: 100%;
        height: auto;
    }

    .blog-details-wrap img {
        max-width: 100%;
        height: auto;
    }

    .e-content img {
        max-width: 100%;
        height: auto;
    }

    .promo-border-hover:hover {
        border-color: var(--color-primary) !important;
    }

    .dropdown-info .drop-title {
        text-align: right;
    }

    .demo-list {
        margin-left: 12px;
        margin-right: 0;
    }

    @media (max-width: 1600px) {
        .homepage-list-wrapper::before {
            right: 45% !important;
            left: auto;
        }
    }

    .homepage-list-wrapper {
        right: 10% !important;
    }

    .mahbar {
        color: #f92424;
    }
}
.footer-single-col .swiper-docs .swiper-slide {
    display: flex;
    justify-content: center;
}
.footer-single-col .swiper-docs img {
    max-height: 100%;
}
.footer-about img {
    max-height: 100px !important;
    width: auto !important;
    margin-bottom: 10px;
}
.watch-now-btn i {
    margin-left: 10px;
}
.swiper-docs{
    text-align:center;
}
.ticker-item:nth-child(2) {
    -webkit-animation: tickerTwo 60s linear infinite;
    animation: tickerTwo 60s linear infinite;
    animation-delay: -30s;
    -webkit-animation-delay: -30s;
    animation-delay: -30s;
}


.ticker-container{
    direction:ltr;
}

/* =============================================================================
   Element 114 - Service Category Marquee Slider
   ============================================================================= */
.el114-marquee {
    direction: ltr;
    overflow: hidden;
    padding: 15px 0;
}

.el114-marquee .js-marquee {
    display: flex;
    align-items: center;
}

.el114-cat-list {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
}

.el114-cat-item {
    flex-shrink: 0;
}

.el114-cat-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.el114-cat-link:hover .category-title-text {
    transform: translateX(-3px);
}

.el114-cat-link:hover .category-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.category-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.category-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-icon-font {
    font-size: 18px;
}

.category-title-text {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.static-category-grid {
    padding: 20px 0;
}

.category-static-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-decoration: none;
    white-space: nowrap;
}

.category-static-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: #fff;
}

.category-static-card:hover .category-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.category-static-card:hover .category-title-text {
    transform: translateX(-3px);
}

@media (max-width: 768px) {
    .category-icon-wrapper {
        width: 32px;
        height: 32px;
    }

    .category-icon-font {
        font-size: 14px;
    }

    .category-title-text {
        font-size: 13px;
    }

    .category-static-card {
        padding: 10px 18px;
    }
}
.ah-bg {
    background-color: #f3f5f8;
}

.loader-button {
    top: 20%;
    height: 30px;
    width: 10px;
    border-radius: 4px;
    color: #fff;
    background: currentColor;
    position: absolute;
    animation: ht 1s ease-in infinite alternate;
    box-shadow: 15px 0 0 -1px, -15px 0 0 -1px, 30px 0 0 -2px, -30px 0 0 -2px, 45px 0 0 -3px, -45px 0 0 -3px;
}

@keyframes ht {
    100% {
        height: 0px
    }
}


.form-button {
    height: 100%;
    min-height: 50px;
}
.buttonSpinner {
    display:none;
}
.form-msg {
    margin-block: 1rem;
    font-weight: 800;
    text-align: center;
}
.btn-primary span{
    color:white;
}

.offcanvas-body .main-menu li a.nav-link {
    padding: .5rem 1.3rem;
}
.offcanvas-body .dropdown-menu{
    margin-top:0;
}
/* Ensure dropdowns are positioned correctly and hidden by default */
.product-cat-header .nav-item .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* Position the dropdown below the parent */
    right: -50%;
    left: 50%;
    z-index: 1000;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

/* Show the dropdown when hovering over the parent */

.product-cat-header .dropdown-grid-item {
    border-radius: 10px;
}
.dropdown-grid-item {
    white-space: nowrap; /* جلوگیری از شکستن خطوط */
    padding: 10px; /* فاصله داخلی برای زیبایی */
}

.dropdown-grid {
    display: grid;
    grid-auto-columns: minmax(350px, max-content); /* تنظیم عرض ستون‌ها به اندازه بزرگترین ستون */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* تکرار ستون‌ها با عرض خودکار */
}
.homepage-list-wrapper {
    left: auto !important;
}

/*element 75*/
.el-75 .section-heading .mini-title * {
    margin:0;
}
.el-75 .section-heading .mini-title {
    margin-bottom: .375rem;
}
.el-75 .section-heading .title * {
    margin: 0;
}
.el-75 .section-heading .title {
    margin-bottom: .625rem;
}
.el-75 .section-heading .desc * {
    margin: 0;
}
.el-75 .section-heading .desc {
    margin-bottom: 1rem;
}
.el-75 .ch-57 .title {
    margin-bottom: .375rem;
}
    .el-75 .ch-57 .title * {
        margin: 0;
    }
.el-75 .ch-57 .desc {
    margin: 0;
}
        .el-75 .ch-57 .desc * {
            margin: 0;
        }
/*element 75 End*/
.process-card-two:hover .process-icon {
    color: var(--color-primary);
}

.ail-title * {
    margin: 0;
}
    .ma-warning-text *{
    margin:0;
    
}

.elements-m0 *{
    margin-bottom: 0;
}



.aiart-slider-nav {
    background: var(--color-primary);
}
.aiart-post-slider.ma-style .aiart-slider-nav:hover {
    background: var(--color-secondary);
}
.bg-brand-39-2 {
    background-color: var(--rgba-primary-9);
}
.search_input{
    position:relative;
}
    .search_input .resault .resault-partial .row a {
    
    color:inherit;
    }
    .search_input .resault .resault-partial .row {
    
    padding-inline:1rem;
    }
    .search_input .resault .resault-partial {
        background: white;
        height: 40vh;
        right: 0;
        width: 100%;
        padding: 1rem 0;
        top: 10px;
        overflow: auto;
        z-index: 5;
        border-radius: 6px;
        box-shadow: 2px 2px 7px var(--rgba-primary-9);
    }
    .search_input .resault .search-row * {
    margin-block:auto;
    }
    .search_input .resault .search-row:hover {
        background-color: var(--rgba-primary-1);
        border-radius:5px;
        transition: all 0.4s ease-in-out;

    }
    .search_input .resault .search-row a {
    width:100%;
    color:inherit;
    }

    .search_input .resault .search-row {
        border-bottom: 1px solid #d7d7d7;
        transition: all 0.4s ease-in-out;
        display: flex;
        margin-block: 1rem;
        padding-inline: 2rem;
    }
    .search_input .resault {
        position: absolute;
        top: 58px;
        background: white;
        width: 602px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
@media (max-width: 767px) {
    .search_input .resault {
        width: 100%;
    }

        .search_input .resault .resault-partial {
            width: 100%;
            border-radius: 6px;
        }}
.search_39 .search_form_39 .content {
    left: 6px;
    right:auto;
}
.resault {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

    .resault.hiddenel {
        opacity: 0;
        pointer-events: none;
    }
.tag_39:hover {
    background-color: var(--color-primary);
    color: white;
}
.team_39 .team_39_item img{margin-bottom:0.5rem;}

.search_39 .search_form_39 .form-control {
    background-color: #f2f2f2;
}
.form-control::placeholder {
    color: rgb(151, 151, 151);
}
.search_39 .search_form_39::after {
    background: linear-gradient(89.79deg, var(--color-primary) 6.32%, rgba(125, 125, 125, 0.1) 34.88%);
}
.search_39 .search_form_39 .content select {
    background-color: #2b2b2b;
}
.risk-outline-btn-hover:hover {
    border-color: var(--color-primary);
    background-color: rgba(0,0,0,0);
    color: var(--color-primary);
}
.cat-t2-col > a.dropdown-link {
    margin-bottom: 1.1rem;
}
.cat-t2-col .img-section {
    width: 100%;
    overflow: hidden;
    display: block;
    height: 100%;
    background: #f2f2f2;
    border-radius: 5px;
   
    padding-block: 1.5rem;
}
.cat-t2-col > .row {
    height:100% !important;
}
.dropdown-menu .dropdown-grid .cat-t2-col {
    border-left: 2px solid #999;
    padding-block: 1rem;
    border-radius: 0px !important;
    height:100%;
}

.cat-t2-col .cat-list {
    max-height: 250px;
    overflow: auto;
    flex: 0 0 55%;
}

.cat-t2-col .img-section img {
    width: 100%;
    border-radius: 7px;
    border: 4px solid #aaa;
    padding: 2px;
    margin-block: 1rem;
}
    
.cat-t2-col .description {
    width: 70%;
    border-right: 2px solid var(--rgba-primary-2);
    margin-right: 1rem;
}

.cat-t1 .col1 {
    grid-template-columns: minmax(200px, 1fr);
}

.cat-t1 .col2 {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
}

.cat-t1 .col3 {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

.cat-t1 .col4 {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.cat-t1 .col5 {
    grid-template-columns: repeat(5, minmax(200px, 1fr));
}


.cat-t2 .col1 {
    grid-template-columns: minmax(350px, 1fr);
}

.cat-t2 .col2 {
    grid-template-columns: repeat(2, minmax(350px, 1fr));
}

.cat-t2 .col3 {
    grid-template-columns: repeat(3, minmax(350px, 1fr));
}

.cat-t2 .col4 {
    grid-template-columns: repeat(4, minmax(300px, 1fr));
}

.cat-t2 .col5 {
    grid-template-columns: repeat(5, minmax(200px, 1fr));
}
.dropdown-grid-item:last-child {
    border: none !important;
}
.el-79 .table-responsive {
    justify-content: center;
    display: flex;
}
    .el-79 .table-responsive .crypto-table {
        min-width: 50%;
    }

    @media (min-width: 1099px) {

        a.logo {
            margin-right: auto;
            margin-left: 0;
        }
    }
.navbar.navbar-expand-xl > .container {
    margin-right:0;
}
.list-unstyled {
    padding-inline: 0;
}

 

.single-pricing-wrap {
    height: 100%;
}
.hd-pricing-single ul.hd-pricing-features {
    padding-right: 32px;
    padding-left: 0;
}
.hd-pricing-single::after {
    right: 43%;
    left:inherit;
}
.download-info .d-size > span {
direction:ltr;
}
.download-info .d-size {
    align-content: center;
    display: flex;
    
}
    .download-info .d-name{
        align-content:center;display:flex;
        margin-bottom:0.5rem;

}
    
    .form-range::-moz-range-track{
     cursor:pointer !important;
 }
.form-range::-moz-range-thumb
{width: 2rem !important;
height: 2rem !important;
cursor: pointer !important;


    }
.slider-value {
    font-size: 19px;
}
.select-color {
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: .5rem;
    padding: 4px 15px;
    border: 1px solid #d4d4d4;
    border-radius: .25rem;
    background-color: #fff;
}
.select-img__input {
    display: none;
}
.select-color {
    cursor: pointer;
    text-align: center;
    padding: 4px 2rem;
}
.select-img__input:checked ~ .select-color {
    border: 1px solid #0c0800;
    background-color: #0c0800;
    color: #fff;
}
.select-color .ch-title{
    font-size:19px;
}
.select-color .ch-desc {
    font-size: 12px;
}
.dropdown-grid-item .cat-img {
    max-width: 30px;
}
.dropdown.type1 .col {
    border-left: 1px solid #0000002b !important;
}
.footer-social-list .list-inline-item a{
    display:flex;


}
.footer-social-list .list-inline-item a > i{
margin:auto;

}

.pay-gw-payment-item:hover h4, .pay-gw-payment-item:hover .h4, .pay-gw-payment-item:hover p, .pay-gw-payment-item:hover h2 *, .pay-gw-payment-item:hover h3 * {
    color: #fff !important;
}

.bg-brand-39 {
    background-color: #000;
}



.cover-image {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
  
}
.hero_39 {
    position: relative;
}

.cover-container {
    position: absolute;
}

    /* موقعیت اولیه قبل از انیمیشن */
    .cover-container:not(.animated) {
        opacity: 0; /* برای شروع از حالت نامرئی */
    }

    .cover-container.slideInRight:not(.animated) {
        transform: translateX(100%); /* شروع از راست */
    }

    .cover-container.slideInLeft:not(.animated) {
        transform: translateX(-100%); /* شروع از چپ */
    }

    .cover-container.slideInDown:not(.animated) {
        transform: translateY(-100%); /* شروع از بالا */
    }

    .cover-container.slideInUp:not(.animated) {
        transform: translateY(100%); /* شروع از پایین */
    }

.cover-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}
/* استایل‌های پایه */
.hero_39 {
    position: relative;
    min-height: 200vh; /* برای تست اسکرول */
    background: #f0f0f0;
}

.cover-container {
    position: absolute;
}

.cover-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

/* موقعیت اولیه قبل از انیمیشن */
.cover-container:not(.animated) {
    opacity: 0;
}

.cover-container.transaction-1:not(.animated) {
    transform: translateX(100%);
}
/* راست به چپ */
.cover-container.transaction-2:not(.animated) {
    transform: translateX(-100%);
}
/* چپ به راست */
.cover-container.transaction-3:not(.animated) {
    transform: translateY(-100%);
}
/* بالا به پایین */
.cover-container.transaction-4:not(.animated) {
    transform: translateY(100%);
}
/* پایین به بالا */

/* انیمیشن‌ها وقتی فعال می‌شن */
.cover-container.transaction-1.animated {
    animation: slideFromRight var(--speed, 2s) ease-in-out both;
}

.cover-container.transaction-2.animated {
    animation: slideFromLeft var(--speed, 2s) ease-in-out both;
}

.cover-container.transaction-3.animated {
    animation: slideFromTop var(--speed, 2s) ease-in-out both;
}

.cover-container.transaction-4.animated {
    animation: slideFromBottom var(--speed, 2s) ease-in-out both;
}

/* تعریف انیمیشن‌ها */
@keyframes slideFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes slideFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

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

@keyframes slideFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

@keyframes slideFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.spin-continuous {
    animation-name: spinContinuous;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
/* تعریف keyframes برای چرخش مداوم */
@keyframes spinContinuous {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.pulse-fade {
    animation-name: pulseFade;
    animation-timing-function: ease-in-out; /* برای نرم‌تر شدن تغییر */
    animation-iteration-count: infinite;
    /* animation-duration از data-wow-duration توسط WOW.js اعمال می‌شه */
}

@keyframes pulseFade {
    0% {
        opacity: 1; /* کاملاً نمایان */
    }

    50% {
        opacity: 0; /* کاملاً محو */
    }

    100% {
        opacity: 1; /* دوباره نمایان */
    }
}
#submitform.risk-outline-btn-hover {
    min-width: 150px;
    min-height: 45px;
}
.ff-risk-pri {
    font-family: IRANSansWebFaNum;
}
@media (max-width: 1200px) {
    .logo-white, .logo-dark {
        max-height: 36px;
    }
    .action-btns {
        margin-left: 8rem !important;
    }
}
.team-img {
    justify-content: center;
    display: flex;
}

@media (min-width: 583px ) and (max-width: 1198px ) {
    .navbar.navbar-expand-xl > .container {
        max-width: 100%;
    }
}

    @media (min-width: 992px) {
        .justify-content-lg-between {
            gap: 1rem;
        }
    }

   

    .m-headsearch {
        border: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--rgba-primary-9);
        bottom: 0;
    }



#phoneNumber-input::placeholder {
    color: #8a8a8a;
}
.cat-t2-col .img-section {
    width: fit-content;
}
.main-menu li.nav-item .dropdown-menu::before{
    opacity:0 !important;
}
.dropdown-grid-item a:hover > * {
    color: white !important;
}
.dropdown-grid-item a:hover {
    background: var(--color-primary);
}
    .dropdown-grid-item a:hover .drop-title, .dropdown-grid-item a:hover span , .dropdown-grid-item a:hover p  {
        color: white !important;
    }
.img-section .btn ::after {
}

.img-section .btn {
    font-size: 12px;
}
.integration-list li .single-integration img {
    width: fit-content;
    height: auto;
    max-height: fit-content;
    max-width: fit-content;
}
button#language-dropdown ::after {
display:none;
}
button#language-dropdown {
    background: none;
    border: none;
    font-size: 25px;
}
.before-after-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.before-after-wrapper {
    position: relative;
    width: 100%;
    height: 500px; /* تنظیم ارتفاع دلخواه */
}

    .before-after-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.before-after-section {
    padding: 50px 0;
    background-color: #f5f5f5;
}

.before-after-title {
    text-align: center;
    margin-bottom: 30px;
}
.offcanvas-header button.close-btn {
    width: 35px;
    height: 35px;
}
button.mob-lang {
    margin-right: auto;
    margin-left: 1rem;
    margin-block: auto;
}
.language-modal{
    z-index:10000;

}
/* Custom styles for the collaboration slider */


.integration-section .integration-wrapper {
    overflow:hidden;
}
.equal-width-columns {
    display: flex;
    flex-wrap: nowrap;
}

    .equal-width-columns > .img-section,
    .equal-width-columns > .cat-list {
        min-width: 0;
    }
.spinner-rotate {
    animation: spinner-rotate 1s linear infinite;
}

@keyframes spinner-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.form_btn {
    position: relative;
}

.search-icon, .search-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mce-content-body table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
}

    .mce-content-body table th {
        background-color: var(--color-primary);
        color: white;
        font-weight: bold;
        text-align: right;
        padding: 8px;
        border: 1px solid #ddd;
    }

    .mce-content-body table td {
        padding: 8px;
        border: 1px solid #ddd;
        text-align: right;
    }

    .mce-content-body table tr:nth-child(even) {
        background-color: rgba(0,0,0,0.05);
    }

    .mce-content-body table tr:hover {
        background-color: rgba(0,0,0,0.1);
    }

.table-content {
    background: #f5f5f5;
    padding: 15px 20px 15px 15px;
    margin: 0 0 30px 0;
    border-radius: 25px;
    font-size: 13px;
}

    .table-content strong {
        display: block;
        margin-bottom: 10px;
    }

    .table-content ul {
        margin: 0 15px 0 0;
        padding-right: 10px;
    }

        .table-content ul li {
            list-style: circle;
            margin: 0 10px 10px;
            transition: all ease-in-out .2s;
            -moz-transition: all ease-in-out .2s;
            -webkit-transition: all ease-in-out .2s;
        }

            .table-content ul li:hover {
                margin-right: 25px;
                color: var(--color-primary);
            }

            .table-content ul li a {
                text-decoration: none;
                color: inherit;
            }
/* 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);
}

.flag-img {
    width: 30px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    vertical-align: middle;
}

.dropdown-item .flag-img {
    margin-right: 8px;
}
.mob-flag-img {
    width: 30px;
    height: 22px;
    object-fit: cover;
    border-radius: 3px;
    vertical-align: middle;
}

button.language-dropdown {
    background: transparent;
    border: none;
    padding: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.language-select-item {
    transition: all 0.2s ease;
    cursor: pointer;
    justify-content: center;
}

    .language-select-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .language-select-item.active {
        box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.5);
    }

.flag-img {
    width: 40px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: inline-block;
    min-width: 40px;
    text-align: center;
}

.modal-header .btn-close {
    margin-right: auto;
    margin-left: 0;
}


.product-gallery {
    margin-bottom: 30px;
}

.productGalleryMain {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 7px;
    box-shadow: 0px 0px 3px 1px #aaa;
    border: 1px solid #aeaeae;
    background: #f8f9fa;
}


.productGalleryThumbs .swiper-slide {
    cursor: pointer;
    height: 100%;
    opacity: 0.6;
    transition: opacity 0.3s;
    box-shadow: 0 0px 4px #22222221;
    border: 1px solid #2b2b2b2b;
}

.productGalleryThumbs .swiper-slide-thumb-active {
    opacity: 1;
    box-shadow: 0 0px 4px #2222223d;
    border: 1px solid #2b2b2b70;
}

.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.5);
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .video-icon i {
        font-size: 10px;
    }

/* Video Container Styles */
.video-container {
    position: relative;
    overflow: hidden;
}

.video-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.video-thumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

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

    .play-button i {
        font-size: 32px;
        color: var(--color-primary, #007BFF);
        margin-left: 5px; /* For visual centering of the play icon */
    }

    .play-button:hover {
        background-color: rgba(255, 255, 255, 1);
        transform: scale(1.1);
    }
.swiper-button-next, .swiper-button-prev {
    background-color: #f7f7f7;
    height: 0;
    padding: 20px;
    border-radius: 5px;
    color: #4f4f4f;
    transition: all 0.3s ease;
}
    .swiper-button-next:hover, .swiper-button-prev:hover {
        background-color: #4f4f4f;
        transition: all 0.3s ease;
    }



    

/*Product Features*/
.team-info .attribute-group {
    justify-content: left;
}
.attribute-group .att-title {
    display: flex;
    gap: 10px;
    min-width: 200px;
}
    .attribute-group .att-title .attribute-type {
        margin-block: auto;
    }
.attribute-group {
    display: flex;
    gap: 30px;
    padding-right: 12px;
}
.attribute-value-item {
    display: flex;
    cursor: pointer;
    margin: auto;
}
.attribute-value-item img {
    width: 60px;
    height: 60px;
    line-height: 60px;
    padding: 5px;
    border-radius: 50%;
    background-color: #fff;
    border-color: #fff;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
}
.attribute-values{
    display:flex;
    gap:5px;
}
.product-content .product-attributes {
    justify-content: left;
}
.product-attributes {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.about-right .product-attributes {
    justify-content: right;
}
.attribute-type {
    font-weight: 600;
    color: #333;
    position: relative;
    padding: 1px 15px 1px 0;
}
    .attribute-type:not(.with-icon) {
        border-right: 3px solid #7b7b7b;
    }



    .color-swatch {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #eee;
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        display: inline-block;
        transition: transform 0.3s ease;
    }

    .color-swatch:hover {
        transform: scale(1.1);
    }

.attribute-text {
    display: inline-block;
    border-radius: 7px;
    font-size: 14px;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.31);
    transition: all 0.3s ease;
    margin: auto;
    padding: 10px;
    border: 1px solid #d7d7d7;
    cursor: pointer;
}

    .attribute-text:hover {
        background-color: var(--color-primary);
        color: #fff;

    }


/* شخصی‌سازی رنگ تولتیپ */
.tooltip {
    --bs-tooltip-bg: #7a797b;
    --bs-tooltip-opacity: 1;
}

.tooltip-inner {
    background-color: #7a797b;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    max-width: 250px;
    padding: 5px 22px;
    font-family: IRANSansWebFaNum, sans-serif;
    font-size: 13px;
}

/* تغییر رنگ فلش تولتیپ */
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: #7a797b;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: #7a797b;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: #7a797b;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: #7a797b;
}

/* تغییر رنگ متن تولتیپ */
.tooltip-inner {
    color: #fff;
}
.content-list-nav {
 
    z-index: 50;
    padding: 10px 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

    .content-list-nav.affix {
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
    }

.content-list-buttons {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none; /* برای مخفی کردن اسکرول‌بار در IE و Edge */
    scrollbar-width: none; /* برای مخفی کردن اسکرول‌بار در Firefox */
    gap: 15px;
    padding: 0 15px;
    justify-content:center;
}

    .content-list-buttons::-webkit-scrollbar {
        display: none; /* برای مخفی کردن اسکرول‌بار در Chrome و Safari */
    }

.nav-item-button {
    white-space: nowrap;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 4px #b1b1b1;
}


    .nav-item-button i {
        font-size: 16px;
    }

/* استایل‌های ریسپانسیو */
@media (max-width: 768px) {
   


    .nav-item-button {
        padding: 6px 15px;
        font-size: 13px;
    }
}
.cat-t3-onelitem {
    margin-top: 3rem;
}
.dot-cat {
    width: 10px;
    height: 10px;
}

.full-menu-container .full-width-menu {
    position: fixed !important;
    left: 15px !important;
    right: 15px !important;
    top: 76% !important;
    transform: none !important;
    border-radius: 15px;
    box-shadow: 0 3px 7px rgba(0,0,0,0.4);
    z-index: 9999;
}

.category-main-list {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: start;
    padding: 30px 0;
    position: relative;
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.category-main-item {
    padding: 0 10px;
    width: 250px;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
}
a.category-main-title:hover {
    color: #333;
}


    .category-main-title {
    border-right: 3px solid #888;
    padding: 0px 11px;
    margin: 5px 12px 5px 25px;

    font-size: 14px;
    color: #333;
    display: block;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}
    .category-main-title:hover::after {
        color: var(--color-primary);
    }
    .category-main-title:hover {
        border-right-color: var(--color-primary);
    }

    .category-main-item:hover .category-submenu {
        visibility: visible;
        opacity: 1;
    }

.category-submenu-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .category-submenu-list li {
        line-height: 30px !important;
        margin-top: 0;
        list-style: none;
    }

.category-level2-link, .category-level2-title {
    color: #474747;
    font-weight: 500;
    font-size: 14px;
    position: relative;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.category-level2-title {
    font-weight: 600;
}

.category-level3-list {
    padding: 0 15px;
    margin: 5px 0 15px 0;
    list-style: none;
}

.category-level3-link {
    color: #666;
    font-size: 13px;
    text-decoration: none;
}

    .category-level3-link:hover {
        color: #000;
    }

.category-shadow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.full-menu-container.show .category-shadow-overlay {
    opacity: 1;
    visibility: visible;
}

.full-menu-container .full-width-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    border-radius: 0;
    box-shadow: 0 3px 7px rgba(0,0,0,0.4);
    z-index: 9999;
}

    .full-menu-container .full-width-menu .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0;
    }

.category-main-list {
    padding: 15px 0;
    margin-right: 0;
    text-align: right;
}


/* Add this new CSS to fix the positioning */
.category-main-list {
    display: flex;
    flex-direction: column;
    padding: 15px 0;
    margin-right: 0;
    text-align: right;
    position: relative;
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.category-main-item {
    position: static; /* Change from relative to static */
    padding: 0 10px;
    width: 250px;
}

    .category-main-item .category-submenu {
        top: 0; /* Ensure submenu starts from the top */
        height: 100%; /* Full height */
        overflow-y: auto; /* Add scrolling if needed */
    }

/* Improve submenu list styling */
.category-submenu-list {
    padding-top: 0; /* Remove top padding */
}

.category-shadow-overlay {
    z-index: 1; /* Ensure overlay is above other content but below the menu */
}


.category-main-title::after {
    content: "\f053";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 8px;
    color: #ccc;
    margin-right: 4px;
    position: absolute;
}

.category-submenu {
    position: absolute;
    width: calc(100% - 260px);
    height: 100%;
    margin: 0 -15px;
    padding: 20px;
    background: #fff;
    z-index: 13;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.2s;
}


.category-level2-title {
    color: #474747;
    font-weight: normal; /* Changed from 600/bold to normal */
    font-size: 14px;
    position: relative;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

    /* Make parent categories with subcategories bold */
    .category-level2-title[data-id] + .category-level3-list {
        margin-top: 5px;
    }

    .category-level2-title[data-id] + ul.category-level3-list {
        font-weight: normal;
    }

/* The title itself will be bold only if it has subcategories */
li:has(> ul.category-level3-list) > .category-level2-title {
    font-weight: 600;
}

/* Styling for the category hierarchy */
.category-level2-title {
    color: #474747;
    font-weight: normal; /* Default is normal weight */
    font-size: 14px;
    position: relative;
    display: block;
    padding-right: 12px;
    margin: 0 10px 5px 0;
    cursor: pointer;
    text-decoration: none;
}

    /* Make parent categories (with subcategories) bold */
    .category-level2-title.category-parent,
    .category-level2-link.category-parent {
        font-weight: 600;
    }

    .category-level2-title.category-no-children,
    .category-level2-link.category-no-children {
        font-weight: normal;
        padding: 5px;
    }

/* Category items with indicator dots */
.category-item {
    position: relative;
}

/* Circle indicator styling */
.category-indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ccc;
    margin-right: 8px;
    margin-left: 4px;
    transition: background-color 0.3s ease;
    vertical-align: middle;
}


/* Base styles for all category links */
[class*="category-level"] {
    position: relative;
}

/* Progressive indentation for deeper levels */
.category-level3-link {
    color: #666;
    font-size: 13px;
    text-decoration: none;
    display: block;
    padding-right: 15px;
    position: relative;
}

.category-level4-link {
    color: #666;
    font-size: 13px;
    text-decoration: none;
    display: block;
    position: relative;
}

.category-level5-link {
    color: #666;
    font-size: 13px;
    text-decoration: none;
    display: block;
    padding-right: 35px;
    position: relative;
}

.category-level6-link {
    color: #666;
    font-size: 13px;
    text-decoration: none;
    display: block;
    padding-right: 45px;
    position: relative;
}

.category-level7-link {
    padding-right: 55px;
}

.category-level8-link {
    padding-right: 65px;
}

.category-level9-link {
    padding-right: 75px;
}

.category-level10-link {
    padding-right: 85px;
}
/* Base styles for indicators */
.category-indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ccc;
    margin-right: 8px;
    margin-left: 4px;
    transition: background-color 0.3s ease;
    vertical-align: middle;
}

/* More specific hover selectors to prevent highlighting siblings */
.category-item:hover > a > .category-indicator,
.category-item:hover > div > .category-indicator {
    background-color: var(--color-primary, #CA0F0F);
}

/* Target only direct descendants - replace the broad selector */
.category-level3-list .category-item:hover .category-indicator {
    background-color: var(--color-primary, #CA0F0F);
}

/* Reset for sibling category items */
.category-item:hover ~ .category-item .category-indicator {
    background-color: #ccc;
}

/* Reset all category indicators to their default state */
.category-indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ccc;
    margin-right: 8px;
    margin-left: 4px;
    transition: background-color 0.3s ease;
    vertical-align: middle;
}

/* Only target the direct indicator of the hovered item */
.category-item:hover > a > .category-indicator,
.category-item:hover > div > .category-indicator {
    background-color: var(--color-primary, #CA0F0F);
}

/* Target children of the hovered item (but not siblings) */
.category-item:hover > ul .category-indicator {
    background-color: var(--color-primary, #CA0F0F);
}

/* Critical: override any highlighting for siblings and their children */
.category-item:hover ~ li .category-indicator {
    background-color: #ccc !important;
}

/* Reset for sibling category items after hover ends */
.category-submenu-list:hover > li:not(:hover) > a > .category-indicator,
.category-level3-list:hover > li:not(:hover) > a > .category-indicator,
.category-level4-list:hover > li:not(:hover) > a > .category-indicator,
.category-level5-list:hover > li:not(:hover) > a > .category-indicator {
    background-color: #ccc;
}

/* Make sure child indicators of non-hovered items stay gray */
.category-submenu-list:hover > li:not(:hover) .category-indicator,
.category-level3-list:hover > li:not(:hover) .category-indicator,
.category-level4-list:hover > li:not(:hover) .category-indicator,
.category-level5-list:hover > li:not(:hover) .category-indicator {
    background-color: #ccc;
}

.category-level4-list, .category-level5-list, .category-level6-list, .category-level7-list {
    border-right: 1px solid #cecece54;
    padding-right: 6px;
    margin-right: 25px;
}

.dropdown.full-menu-container {
    position: static;
}

/* Hover dropdown behavior */
.hover-dropdown:hover .dropdown-menu {
    display: block !important;
}

/* Remove default dropdown arrow */
.hover-dropdown .nav-link::after {
    display: none !important;
}

/* Style for menu title with list icon */
.menu-title {
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

    .menu-title .fa-bars {
        font-size: 0.8em;
        margin-right: 8px;
        margin-left: 8px;
        /* For RTL compatibility */
        margin-right: var(--bs-navbar-nav-link-padding-x, 0.5rem);
        margin-left: var(--bs-navbar-nav-link-padding-x, 0.5rem);
    }

/* RTL support */
html[dir="rtl"] .menu-title .fa-bars {
    margin-right: 8px;
    margin-left: 0;
}



/* Fix dropdown animation */
.hover-dropdown .dropdown-menu {
    display: block !important; /* Always display */
    opacity: 0; /* But make it invisible */
    visibility: hidden; /* And not interactive */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; /* Prevent interaction when hidden */
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transform: translateY(-10px); /* Start slightly above final position */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.hover-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Allow interaction when visible */
    transform: translateY(0); /* Move to final position */
}
.attribute-pill {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 30px;
    transition: all 0.2s ease;
}

    .attribute-pill:hover {
        background-color: #e9ecef;
        color: #495057;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
.product-info-box {
    transition: all 0.3s ease;
}

.product-content {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.team-single-wrap:hover .product-content {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.attribute-pill {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 30px;
    transition: all 0.2s ease;
}

    .attribute-pill:hover {
        background-color: #e9ecef;
        color: #495057;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
.product-card {
    transition: all 0.3s ease;
}

.product-content {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    height: 100%;
}

.product-card:hover .product-content {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.team-img {
    margin-bottom: 0;
    overflow: hidden;
}

    .team-img img {
        transition: transform 0.3s ease;
    }

.product-card:hover .team-img img {
    transform: scale(1.05);
}

.attribute-pill {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 30px;
    transition: all 0.2s ease;
}

    .attribute-pill:hover {
        background-color: #e9ecef;
        color: #495057;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
.product-title {
    font-size: 16px;
}
.footer-nav-list li a i {
    margin-block: auto;
    margin-inline: 0 7px;
}
.page-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden;
}
.hero_38 desk{
    overflow:visible;
}
.page-banner .single-video.background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: rgba(0,0,0,0.1);
}

    .page-banner-slider .banner-img, .page-banner .banner-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .page-banner-slider .background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-banner-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.page-item:first-child .page-link {
    border-top-right-radius: var(--bs-pagination-border-radius);
    border-bottom-right-radius: var(--bs-pagination-border-radius);
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}
.page-item:last-child .page-link {
    border-top-left-radius: var(--bs-pagination-border-radius);
    border-bottom-left-radius: var(--bs-pagination-border-radius);
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}
.page-link {
    color: var(--color-primary);
}
    .page-link:hover {
        color: var(--color-primary);
    }
    .page-link.active, .active > .page-link {
        color: var(--bs-pagination-active-color);
    }
}
.sticky-header {
    padding: 10px 0;
}
.cursor-pointer {
    cursor: pointer;
}

.it-company-project-item:hover .position-absolute:last-child {
    opacity: 1 !important;
}
.lg-container.lg-show{
    direction:ltr;
}
.it-company-slider__pagination {
    position: relative;
}

/* استفاده از data-expanded attribute */
.offcanvas-body .dropdown-toggle[aria-expanded="false"]::after {
    content: "\2b"; /* plus */
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    border: none;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.offcanvas-body .dropdown-toggle[aria-expanded="true"]::after {
    content: "\f068"; /* minus */
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    border: none;
    vertical-align: middle;
    margin-left: 0.5rem;
}


nav.mob-nav .navbar-toggler {
    background: white;
    padding: 7px 10px;
    border-radius: 4px;
}
nav.mob-nav.affix .navbar-toggler {
    background: var(--color-primary);
    color: white;
}
nav.mob-nav.affix {
    background: #fff;
}
nav.mob-nav {
    display: flex;
    padding-inline: 1rem;
}
@media (min-width: 320px) and (max-width: 767px) {
    .sticky-header.affix {
        padding: 15px 1rem !important;
    }
}
/* استفاده از data-expanded attribute */
.offcanvas-body .dropdown-toggle[aria-expanded="false"]::after {
    content: "\2b"; /* plus */
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    border: none;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.offcanvas-body .dropdown-toggle[aria-expanded="true"]::after {
    content: "\f068"; /* minus */
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    border: none;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* Mobile Category Styles - Level 1 remains unchanged */
.mobile-main-category {
    /* Keep existing styles without border changes */
    display: block;
    position: relative;
}

/* The title remains a real link; only this compact button controls collapse. */
.mobile-navigation-parent-row { display: flex; align-items: center; }
.mobile-navigation-parent-row > a { flex: 1 1 auto; }
.mobile-dropdown-expander { flex: 0 0 42px; min-width: 42px; min-height: 38px; padding: 0; border: 0; background: transparent; color: inherit; position: relative; }
.mobile-dropdown-expander::after { left: 50%; margin: 0; transform: translateX(-50%); }
.mobile-navigation-parent-row--nested .mobile-dropdown-expander { min-height: 32px; }
.mobile-navigation-parent-row--nested .mobile-category-level2-toggle,
.mobile-navigation-parent-row--nested .mobile-category-level3-toggle,
.mobile-navigation-parent-row--nested .mobile-category-level4-toggle,
.mobile-navigation-parent-row--nested .mobile-category-level5-toggle,
.mobile-navigation-parent-row--nested .mobile-category-level6-toggle,
.mobile-navigation-parent-row--nested .mobile-category-level7-toggle { border-right: 0; margin: 0; padding: 0; }

.mobile-dropdown-toggle::after {
    content: "\f067"; /* plus icon */
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    border: none;
    vertical-align: middle;
    margin-left: 0.5rem;
    font-size: 12px;
    transition: transform 0.3s ease;
    position: absolute;
    left: 10px;
}

.mobile-dropdown-toggle[aria-expanded="true"]::after {
    content: "\f068"; /* minus icon */
    transform: rotate(0deg);
}

.mobile-main-category-collapse {
    margin-top: 8px;
}

/* Managed Tablet/Mobile navigation uses the old category markup. Keep its
   root links visually identical to the established offcanvas menu instead of
   inheriting the theme's generic blue nav-link color. */
.mobile-navigation-menu__main .main-menu > li > .mobile-main-category {
    min-height: 53px;
    padding: 15px 0 !important;
    color: #111 !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    text-align: start;
}

.mobile-navigation-menu__main .main-menu {
    padding: 0;
}

/* Each expanded level is indented exactly 8px from its own parent. */
.mobile-navigation-menu__main .mobile-main-category-collapse .mobile-category-container > .mobile-category-level2-list,
.mobile-navigation-menu__main .mobile-category-collapse > .mobile-category-level2-list,
.mobile-navigation-menu__main .mobile-category-collapse > .mobile-category-level3-list,
.mobile-navigation-menu__main .mobile-category-collapse > .mobile-category-level4-list,
.mobile-navigation-menu__main .mobile-category-collapse > .mobile-category-level5-list,
.mobile-navigation-menu__main .mobile-category-collapse > .mobile-category-level6-list,
.mobile-navigation-menu__main .mobile-category-collapse > .mobile-category-level7-list {
    margin-right: 0;
    padding-right: 8px;
}

.mobile-navigation-menu__main .main-menu > li > .mobile-main-category:hover {
    color: #111 !important;
}

.mobile-navigation-menu__main .mobile-dropdown-toggle::after {
    color: #666;
    left: 18px;
}

.mobile-navigation-menu__main .mobile-dropdown-toggle[aria-expanded="true"]::after {
    color: var(--color-primary, #CA0F0F);
}

.mobile-category-container {
    padding: 8px 0;
}

/* Mobile category levels - Start styling from level 2 */
.mobile-category-level2-list,
.mobile-category-level3-list,
.mobile-category-level4-list,
.mobile-category-level5-list,
.mobile-category-level6-list,
.mobile-category-level7-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-category-item {
    margin-bottom: 4px;
}

/* Mobile category links and toggles - Level 2 with border */
.mobile-category-level2-link,
.mobile-category-level2-toggle {
    border-right: 2px solid #ccc;
    padding-right: 12px;
    margin-right: 8px;
    margin-bottom: 8px;
    display: block;
    color: #666;
    text-decoration: none;
    padding: 6px 12px 6px 0;
    font-size: 14px;
    position: relative;
    transition: border-color 0.3s ease, color 0.3s ease;
}

    .mobile-category-level2-toggle[aria-expanded="true"] {
        border-right-color: var(--color-primary, #CA0F0F);
    }

    .mobile-category-level2-link:hover,
    .mobile-category-level2-toggle:hover {
        color: var(--color-primary, #CA0F0F);
        border-right-color: var(--color-primary, #CA0F0F);
    }

/* Levels 3 and beyond - no border, just circles */
.mobile-category-level3-link,
.mobile-category-level3-toggle,
.mobile-category-level4-link,
.mobile-category-level4-toggle,
.mobile-category-level5-link,
.mobile-category-level5-toggle,
.mobile-category-level6-link,
.mobile-category-level6-toggle,
.mobile-category-level7-link,
.mobile-category-level7-toggle {
    display: block;
    color: #666;
    text-decoration: none;
    padding: 6px 0;
    font-size: 14px;
    position: relative;
    transition: color 0.3s ease;
}

    .mobile-category-level3-link:hover,
    .mobile-category-level3-toggle:hover,
    .mobile-category-level4-link:hover,
    .mobile-category-level4-toggle:hover,
    .mobile-category-level5-link:hover,
    .mobile-category-level5-toggle:hover,
    .mobile-category-level6-link:hover,
    .mobile-category-level6-toggle:hover,
    .mobile-category-level7-link:hover,
    .mobile-category-level7-toggle:hover {
        color: var(--color-primary, #CA0F0F);
    }

    /* Mobile category indicators - Only for levels 3 and beyond */
    .mobile-category-level3-link .mobile-category-indicator,
    .mobile-category-level3-toggle .mobile-category-indicator,
    .mobile-category-level4-link .mobile-category-indicator,
    .mobile-category-level4-toggle .mobile-category-indicator,
    .mobile-category-level5-link .mobile-category-indicator,
    .mobile-category-level5-toggle .mobile-category-indicator,
    .mobile-category-level6-link .mobile-category-indicator,
    .mobile-category-level6-toggle .mobile-category-indicator,
    .mobile-category-level7-link .mobile-category-indicator,
    .mobile-category-level7-toggle .mobile-category-indicator {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #ccc;
        margin-right: 8px;
        margin-left: 4px;
        transition: background-color 0.3s ease;
        vertical-align: middle;
    }

/* Hide indicators for level 2 */
.mobile-category-level2-link .mobile-category-indicator,
.mobile-category-level2-toggle .mobile-category-indicator {
    display: none;
}

/* Hover effects for indicators - Only levels 3+ */
.mobile-category-level-3:hover > a > .mobile-category-indicator,
.mobile-category-level-4:hover > a > .mobile-category-indicator,
.mobile-category-level-5:hover > a > .mobile-category-indicator,
.mobile-category-level-6:hover > a > .mobile-category-indicator,
.mobile-category-level-7:hover > a > .mobile-category-indicator {
    background-color: var(--color-primary, #CA0F0F);
}

/* Parent category toggles with plus/minus - All levels */
.mobile-category-parent.mobile-category-level2-toggle::after,
.mobile-category-parent.mobile-category-level3-toggle::after,
.mobile-category-parent.mobile-category-level4-toggle::after,
.mobile-category-parent.mobile-category-level5-toggle::after,
.mobile-category-parent.mobile-category-level6-toggle::after {
    content: "\f067"; /* plus icon */
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    left: 20px;
    font-size: 10px;
    color: #999;
    transition: all 0.3s ease;
}

.mobile-category-parent.mobile-category-level2-toggle[aria-expanded="true"]::after,
.mobile-category-parent.mobile-category-level3-toggle[aria-expanded="true"]::after,
.mobile-category-parent.mobile-category-level4-toggle[aria-expanded="true"]::after,
.mobile-category-parent.mobile-category-level5-toggle[aria-expanded="true"]::after,
.mobile-category-parent.mobile-category-level6-toggle[aria-expanded="true"]::after {
    content: "\f068"; /* minus icon */
    color: var(--color-primary, #CA0F0F);
}

/* Progressive indentation for deeper levels */
.mobile-category-level3-list {
    margin-right: 10px;
    border-right: 1px solid #f0f0f0;
    padding-right: 8px;
}

.mobile-category-level4-list {
    margin-right: 20px;
    border-right: 1px solid #f0f0f0;
    padding-right: 8px;
}

.mobile-category-level5-list {
    margin-right: 25px;
    border-right: 1px solid #f0f0f0;
    padding-right: 8px;
}

.mobile-category-level6-list {
    margin-right: 30px;
    border-right: 1px solid #f0f0f0;
    padding-right: 8px;
}

.mobile-category-level7-list {
    margin-right: 35px;
    border-right: 1px solid #f0f0f0;
    padding-right: 8px;
}

/* Mobile category collapse animation */
.mobile-category-collapse {
    transition: all 0.3s ease;
}

    .mobile-category-collapse.collapsing {
        transition: height 0.3s ease;
    }

/* Mobile specific responsive adjustments */
@media (max-width: 767px) {
    .mobile-category-level2-link,
    .mobile-category-level2-toggle {
        font-size: 15px;
        padding: 8px 15px 8px 0;
        border-right-width: 3px;
    }

    .mobile-category-level3-link,
    .mobile-category-level3-toggle,
    .mobile-category-level4-link,
    .mobile-category-level4-toggle,
    .mobile-category-level5-link,
    .mobile-category-level5-toggle,
    .mobile-category-level6-link,
    .mobile-category-level6-toggle,
    .mobile-category-level7-link,
    .mobile-category-level7-toggle {
        font-size: 14px;
        padding: 6px 0;
    }

        .mobile-category-level3-link .mobile-category-indicator,
        .mobile-category-level3-toggle .mobile-category-indicator,
        .mobile-category-level4-link .mobile-category-indicator,
        .mobile-category-level4-toggle .mobile-category-indicator,
        .mobile-category-level5-link .mobile-category-indicator,
        .mobile-category-level5-toggle .mobile-category-indicator,
        .mobile-category-level6-link .mobile-category-indicator,
        .mobile-category-level6-toggle .mobile-category-indicator,
        .mobile-category-level7-link .mobile-category-indicator,
        .mobile-category-level7-toggle .mobile-category-indicator {
            width: 8px;
            height: 8px;
            margin-right: 10px;
        }
}
.about-right e-content {
    padding-right: 20px;
}
.video-slider-section {
    position: relative;
    overflow: hidden;
}

.video-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.26);
    transition: transform 0.3s ease;
    margin: 5px;
}

    .video-item:hover {
        transform: translateY(-5px);
    }

.video-container .video-file {
    cursor: pointer;
}
    .video-container {
        position: relative;
        overflow: hidden;
    }

    .video-thumbnail {
        position: relative;
        overflow: hidden;
    }

        .video-thumbnail img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.3s ease;
            padding: 1rem;
        }

    .swiper-button-next.video-nav,
    .swiper-button-prev.video-nav {
        color: var(--color-primary, #CA0F0F);
        padding: 1rem 1.3rem;
        border-radius: 10px;
    }

        .swiper-button-next.video-nav:hover,
        .swiper-button-prev.video-nav:hover {
            background-color: var(--color-primary, #CA0F0F);
        }

        .swiper-button-next.video-nav::after,
        .swiper-button-prev.video-nav::after {
            font-size: 17px;
        }

    .play-overlay:hover i {
        color: #fff;
    }

    .play-overlay i {
        color: #ff3c3c;
    }

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--rgba-primary-7, rgba(0, 0, 0, 0.7));
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 2;
    border-color: var(--rgba-primary-7, rgba(0, 0, 0, 0.7));
}

    .video-bg-with-icon {
        border-radius: 0;
    }

    .play-overlay::before,
    .play-overlay::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        z-index: -1;
    }

    .video-item:hover .play-overlay {
        background: var(--color-primary, var(--rgba-primary-7));
        transform: translate(-50%, -50%) scale(1.1);
    }

        .video-item:hover .play-overlay::before {
            animation: continuousWave 1.5s infinite ease-out;
        }

        .video-item:hover .play-overlay::after {
            animation: continuousWave 1.5s infinite ease-out;
            animation-delay: 0.5s; /* موج دوم با تاخیر نیم ثانیه */
        }

    @keyframes continuousWave {
        0% {
            width: 60px;
            height: 60px;
            opacity: 0.8;
        }

        50% {
            width: 100px;
            height: 100px;
            opacity: 0.4;
        }

        100% {
            width: 140px;
            height: 140px;
            opacity: 0;
        }
    }
    /* برای انیمیشن بهتر، یک موج سوم اضافه کنید */
    .play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: var(--rgba-primary-7, rgba(0, 0, 0, 0.7));
        color: white;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: all 0.3s ease;
        overflow: visible; /* تغییر به visible برای نمایش موج‌ها */
        z-index: 2;
    }

        .play-overlay::before,
        .play-overlay::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60px;
            height: 60px;
            background: var(--rgba-primary-7);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            z-index: -1;
            pointer-events: none;
        }
    /* اضافه کردن موج سوم با shadow */
    .video-item:hover .play-overlay {
        background: var(--color-primary, rgba(0, 0, 0, 0.7));
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
        animation: primaryWave 2s infinite ease-out;
    }

        .video-item:hover .play-overlay::before {
            animation: waveRipple1 1.8s infinite ease-out;
        }

        .video-item:hover .play-overlay::after {
            animation: waveRipple2 1.8s infinite ease-out;
            animation-delay: 0.6s;
        }

    @keyframes primaryWave {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
        }

        50% {
            box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1);
        }

        100% {
            box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
        }
    }

    @keyframes waveRipple1 {
        0% {
            width: 60px;
            height: 60px;
            opacity: 0.6;
        }

        70% {
            width: 120px;
            height: 120px;
            opacity: 0.3;
        }

        100% {
            width: 160px;
            height: 160px;
            opacity: 0;
        }
    }

    @keyframes waveRipple2 {
        0% {
            width: 60px;
            height: 60px;
            opacity: 0.4;
        }

        70% {
            width: 140px;
            height: 140px;
            opacity: 0.2;
        }

        100% {
            width: 180px;
            height: 180px;
            opacity: 0;
        }
    }
    /* برای انیمیشن روان‌تر، موج‌های بیشتری اضافه کنید */
    .video-item:hover .play-overlay {
        background: var(--color-primary, var(--rgba-primary-7));
        transform: translate(-50%, -50%) scale(1.1);
        animation: primaryPulse 2.4s infinite ease-out, wave1 2.4s infinite ease-out, wave2 2.4s infinite ease-out 0.4s, wave3 2.4s infinite ease-out 0.8s;
    }

    @keyframes primaryPulse {
        0% {
            box-shadow: 0 0 0 0 var(--rgba-primary-6);
        }

        25% {
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
        }

        50% {
            box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2);
        }

        75% {
            box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.1);
        }

        100% {
            box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
        }
    }

    @keyframes wave1 {
        0% {
            box-shadow: 0 0 0 0 var(--rgba-primary-4);
        }

        100% {
            box-shadow: 0 0 0 60px rgba(255, 255, 255, 0);
        }
    }

    @keyframes wave2 {
        0% {
            box-shadow: 0 0 0 0 var(--rgba-primary-3);
        }

        100% {
            box-shadow: 0 0 0 80px rgba(255, 255, 255, 0);
        }
    }

    @keyframes wave3 {
        0% {
            box-shadow: 0 0 0 0 var(--rgba-primary-2);
        }

        100% {
            box-shadow: 0 0 0 100px rgba(255, 255, 255, 0);
        }
    }

    .video-content {
        padding: 20px;
    }

    .video-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #333;
    }

    .video-description {
        color: #666;
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: var(--color-primary, #007BFF);
    }

    .swiper-pagination-bullet-active {
        background: var(--color-primary, #007BFF);
    }

    .audio-slider-section {
        position: relative;
        overflow: hidden;
    }

    .audio-item {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        margin: 6px;
    }

        .audio-item:hover {
            transform: translateY(-5px);
        }

    .audio-cover {
        position: relative;
        height: 200px;
        overflow: hidden;
    }

        .audio-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .default-audio-cover {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 48px;
    }

    .audio-content {
        padding: 20px;
    }

        .audio-content .titles {
            margin-bottom: 1rem;
        }

            .audio-content .titles > * {
                margin-bottom: 2px;
            }

    .audio-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #333;
    }

    .audio-description {
        color: #666;
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .custom-audio-player {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
    }

        .custom-audio-player .play-pause-btn {
            background: var(--color-primary, #007BFF);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: background 0.3s ease;
            margin-bottom: 15px;
        }

            .custom-audio-player .play-pause-btn:hover {
                background: var(--color-hover-bg, #0056B3);
            }

    .audio-progress-container {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .progress-bar {
        flex: 1;
        height: 6px;
        background: #e9ecef;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .progress-fill {
        height: 100%;
        background: var(--color-primary, #007BFF);
        width: 0%;
        transition: width 0.1s ease;
    }

    .audio-time {
        font-size: 12px;
        color: #666;
        font-weight: 500;
        min-width: 40px;
    }

    .volume-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .volume-btn {
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        font-size: 16px;
    }

    .volume-slider {
        width: 80px;
    }

    .volume-control {
        width: 100%;
        height: 4px;
        background: #e9ecef;
        border-radius: 2px;
        outline: none;
        cursor: pointer;
    }

        .volume-control::-webkit-slider-thumb {
            appearance: none;
            width: 12px;
            height: 12px;
            background: var(--color-primary, #007BFF);
            border-radius: 50%;
            cursor: pointer;
        }

    .swiper-button-next,
    .swiper-button-prev {
        color: var(--color-primary, #007BFF);
    }

    .swiper-pagination-bullet-active {
        background: var(--color-primary, #007BFF);
    }

    @media (max-width: 768px) {
        .audio-progress-container {
            flex-direction: column;
            gap: 5px;
        }

        .volume-container {
            justify-content: center;
        }
    }

    .default-audio-player {
        width: 100%;
    }
    /* جلوگیری از تداخل پلیر صوتی با Swiper */
    .audio-controls {
        position: relative;
        z-index: 10;
        pointer-events: auto;
    }

    .default-audio-player {
        width: 100%;
        height: 50px;
        margin: 15px 0;
        border-radius: 8px;
        outline: none;
        position: relative;
        z-index: 11;
        pointer-events: auto;
    }
    /* جلوگیری از selection در محتوای صوتی */
    .audio-item {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    /* اطمینان از کارکرد صحیح کنترل‌های صوتی */
    .default-audio-player::-webkit-media-controls-panel {
        background-color: #f8f9fa;
        border-radius: 8px;
        pointer-events: auto;
    }

    .default-audio-player::-webkit-media-controls-play-button {
        background-color: var(--color-primary);
        border-radius: 50%;
        pointer-events: auto;
    }

    .default-audio-player::-webkit-media-controls-timeline {
        background-color: #e9ecef;
        border-radius: 25px;
        pointer-events: auto;
    }

    .default-audio-player::-webkit-media-controls-volume-slider {
        background-color: #e9ecef;
        border-radius: 25px;
        pointer-events: auto;
    }
    /* حالت hover برای بهتر شدن تجربه کاربری */
    .audio-item:hover .default-audio-player {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    /* تنظیمات ریسپانسیو */
    @media (max-width: 768px) {
        .default-audio-player {
            height: 45px;
        }
    }

    .attribute-value-item .btn-group {
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border-radius: 0.375rem;
        overflow: hidden;
    }

    .attribute-main-btn {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    .attribute-copy-btn {
        border-right: none !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        padding: 0.25rem 0.5rem;
        min-width: 32px;
    }




        .attribute-copy-btn.copied {
            background-color: #d4edda;
            border-color: #c3e6cb;
            color: #155724;
        }

        .attribute-copy-btn .fas, .attribute-copy-btn .fab {
            margin: auto;
        }

    .btn-group .btn:focus {
        z-index: 3;
    }
    /* Image Slider Element Styles - Fixed Thumbnail Positioning */
    .image-slider-element {
        position: relative;
    }

    .image-slider-container {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    /* Main Image Slider */
    .main-image-slider {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
    }

        .main-image-slider .swiper-slide {
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
        }

            .main-image-slider .swiper-slide img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
            }
        /* Navigation Buttons */
        .main-image-slider .swiper-button-next,
        .main-image-slider .swiper-button-prev {
            background-color: rgba(255, 255, 255, 0.9);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            color: var(--color-primary);
            font-size: 18px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

            .main-image-slider .swiper-button-next:after,
            .main-image-slider .swiper-button-prev:after {
                font-size: 18px;
                font-weight: 600;
            }

            .main-image-slider .swiper-button-next:hover,
            .main-image-slider .swiper-button-prev:hover {
                background-color: var(--color-primary);
                color: white;
                transform: scale(1.1);
            }
    /* Thumbnail Gallery - Fixed Container and Positioning */
    .thumbnail-gallery-container {
        padding: 10px;
        background: #f8f9fa;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        position: relative;
    }

    .thumbnail-slider {
        position: relative;
        overflow: hidden; /* Changed from visible to hidden */
        width: 100%;
        margin: 0 auto;
    }

        .thumbnail-slider .swiper-wrapper {
            display: flex;
            align-items: center;
            transition-timing-function: ease-out;
        }

        .thumbnail-slider .swiper-slide {
            width: auto !important;
            height: 100px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 0 5px;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    .thumbnail-item {
        position: relative;
        height: 100px;
        width: 100px;
        border-radius: 8px;
        overflow: hidden;
        border: 3px solid transparent;
        transition: all 0.3s ease;
        opacity: 0.8;
        display: block;
        flex-shrink: 0;
    }

        .thumbnail-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

    .thumbnail-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
        display: block;
    }
    /* Active Thumbnail States */
    .thumbnail-slider .swiper-slide-active .thumbnail-item,
    .thumbnail-slider .swiper-slide-thumb-active .thumbnail-item {
        opacity: 1;
        border-color: var(--color-primary);
        box-shadow: 0 4px 15px rgba(var(--color-primary-rgb, 202, 15, 15), 0.3);
        transform: scale(1.1);
    }

    .thumbnail-slider .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-thumb-active) .thumbnail-item {
        opacity: 0.8;
    }
    /* Navigation arrows for thumbnail slider */
    .thumbnail-slider .swiper-button-next,
    .thumbnail-slider .swiper-button-prev {
        background-color: rgba(255, 255, 255, 0.9);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: var(--color-primary);
        font-size: 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

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

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

        .thumbnail-slider .swiper-button-next:after,
        .thumbnail-slider .swiper-button-prev:after {
            font-size: 14px;
            font-weight: 600;
        }

        .thumbnail-slider .swiper-button-next:hover,
        .thumbnail-slider .swiper-button-prev:hover {
            background-color: var(--color-primary);
            color: white;
            transform: translateY(-50%) scale(1.1);
        }
    /* Center the active thumbnail for image slider element */
    .thumbnail-slider.swiper-centered .swiper-slide {
        text-align: center;
    }

    .thumbnail-slider.swiper-centered .swiper-wrapper {
        justify-content: center;
    }
    /* Additional styling for better visual feedback */
    .thumbnail-slider .swiper-slide-active .thumbnail-item {
        animation: centerHighlight 0.3s ease-in-out;
    }

    @keyframes centerHighlight {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.15);
        }

        100% {
            transform: scale(1.1);
        }
    }
    /* Responsive Design */
    @media (max-width: 768px) {
        .main-image-slider .swiper-slide {
            height: 300px;
        }

        .thumbnail-slider .swiper-slide {
            height: 80px;
            margin: 0 3px;
        }

        .thumbnail-item {
            height: 80px;
            width: 80px;
        }

        .main-image-slider .swiper-button-next,
        .main-image-slider .swiper-button-prev {
            width: 36px;
            height: 36px;
            font-size: 14px;
        }

        .thumbnail-gallery-container {
            margin-top: 20px;
            padding: 15px;
        }

        .thumbnail-slider .swiper-button-next,
        .thumbnail-slider .swiper-button-prev {
            width: 30px;
            height: 30px;
            font-size: 12px;
        }
    }

    @media (max-width: 576px) {
        .main-image-slider .swiper-slide {
            height: 250px;
        }

        .thumbnail-slider .swiper-slide {
            height: 60px;
            margin: 0 2px;
        }

        .thumbnail-item {
            height: 60px;
            width: 60px;
        }

        .thumbnail-gallery-container {
            padding: 10px;
        }

        .thumbnail-slider .swiper-button-next,
        .thumbnail-slider .swiper-button-prev {
            width: 28px;
            height: 28px;
            font-size: 10px;
        }
    }
    /* Loading state */
    .image-slider-container.loading {
        position: relative;
    }

        .image-slider-container.loading::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(248, 249, 250, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .image-slider-container.loading::after {
            content: '';
            width: 40px;
            height: 40px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--color-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 11;
        }

    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }

        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }
    /* Hide pagination for thumbnails */
    .thumbnail-slider .swiper-pagination {
        display: none;
    }
    /* Animation for smooth transitions */
    .main-image-slider .swiper-slide-active img {
        animation: fadeInScale 0.6s ease-in-out;
    }

    @keyframes fadeInScale {
        from {
            opacity: 0.7;
            transform: scale(0.95);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .primary-right-border {
        border-right: 4px solid var(--color-primary);
        padding: 10px 16px;
        margin: 8px 0;
    }

    .primary-inline-border {
        border-inline: 4px solid var(--color-primary);
        padding: 10px 16px;
        margin: 8px 0;
    }

    .primary-left-border {
        border-left: 4px solid var(--color-primary);
        padding: 10px 16px;
        margin: 8px 0;
    }

    .video-bg-with-icon a:hover {
        background: var(--color-primary);
    }

    .breadcrumb-item + .breadcrumb-item::before {
        float: right;
        padding-inline: 5px;
    }

    .breadcrumb-item + .breadcrumb-item {
        padding-left: inherit;
    }

    .breadcrumb-container {
        margin-right: 3rem;
    }

    .breadcrumb-item {
        color: white;
    }

        .breadcrumb-item a {
            color: white;
            text-decoration: none;
        }

        .breadcrumb-item + .breadcrumb-item::before {
            color: rgba(217, 217, 217, 0.75);
        }

        .breadcrumb-item.active {
            color: var(--color-primary);
        }

    div.dynamic-breadcrumb {
        position: absolute;
        bottom: 0;
        z-index: 2;
    }

    .product-spec-el .el-content {
        margin-bottom: auto;
    }
    /* Category Boxes Styles */
    .category-box-section {
        position: relative;
    }
    /* Common category box styles */
    .category-box-item {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        border: 1px solid #f0f0f0;
    }

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

    .category-image-wrapper {
        overflow: hidden;
        position: relative;
    }

    .category-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    /* Remove the oval effect on hover */
    .category-box-link:hover .category-image {
        transform: scale(1.05);
    }

    .category-content {
        padding: 20px;
    }

    .category-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        transition: color 0.3s ease;
    }

    .category-description {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
    }

    .category-box-link:hover .category-title {
        color: var(--color-primary);
    }

    .category-box-link {
        color: inherit;
    }

        .category-box-link:hover {
            color: inherit;
            text-decoration: none;
        }
    /* Desktop specific styles */
    .category-boxes-desktop .container-fluid {
        max-width: 100%;
    }
    /* Mobile swiper styles */
    .category-mobile-swiper {
        width: 100%;
        padding: 0;
        overflow: hidden;
    }

        .category-mobile-swiper .swiper-slide {
            width: 280px;
            padding: 0 10px;
        }

    .category-mobile-nav {
        color: var(--color-primary);
        background: rgba(255, 255, 255, 0.9);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

        .category-mobile-nav:hover {
            background: var(--color-primary);
            color: white;
        }

        .category-mobile-nav::after {
            font-size: 18px;
            font-weight: 600;
        }

    .category-mobile-swiper .swiper-pagination {
        bottom: -50px;
    }

    .category-mobile-swiper .swiper-pagination-bullet {
        background: var(--color-primary);
        opacity: 0.3;
    }

    .category-mobile-swiper .swiper-pagination-bullet-active {
        opacity: 1;
    }
    /* Responsive adjustments */
    @media (max-width: 1200px) {
        .category-boxes-desktop .col-3 {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }

    @media (max-width: 768px) {
        .category-image {
            height: 200px;
        }

        .category-content {
            padding: 15px;
        }

        .category-title {
            font-size: 16px;
        }

        .category-description {
            font-size: 13px;
        }
    }

    .ca-accordion.home-38 .accordion-button[aria-expanded="true"]::after {
        background-color: var(--color-primary);
        font-size: 13px;
    }

    .ca-accordion .accordion-button * {
        color: #222;
    }

    .service-info-wrap.e-content {
        color: var(--bs-body-color);
    }

    .product-slider-section .product-slider-wrapper {
        position: relative;
    }

    .product-slider-section .product-card {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        transition: all 0.3s ease;
        background: white;
    }

        .product-slider-section .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

    .product-slider-section .product-image {
        overflow: hidden;
    }

        .product-slider-section .product-image img {
            transition: transform 0.3s ease;
        }

        .product-slider-section .product-image:hover img {
            transform: scale(1.05);
        }

    .product-slider-section .attribute-image {
        border: 1px solid #ddd;
    }

    .product-slider-section .attribute-pill {
        display: inline-block;
        background: #f8f9fa;
        color: #495057;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        border: 1px solid #dee2e6;
    }

    .product-slider-section .product-tag {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 500;
    }

    .product-slider-section .swiper-button-next,
    .product-slider-section .swiper-button-prev {
        color: @(element?.mainTextColor ?? "#333");
    }

    .product-slider-section .swiper-pagination-bullet {
        background: @(element?.mainTextColor ?? "#333");
    }

    @media (max-width: 768px) {
        .product-slider-section .product-card {
            margin-bottom: 1rem;
        }
    }

    .process-icon p {
        color: initial;
    }

    @media (min-width: 320px) and (max-width: 991px) {
        .ptb-120 {
            padding-block: 120px;
        }
    }

    .single-article a {
        color: #131313;
    }

        .single-article a:hover {
            color: #000;
        }

    .ins-feature-img a {
        text-align: center;
    }
    /* Mobile Responsive Styles for Product Features */
    @media (max-width: 991px) {
        .product-spec-el .row {
            flex-direction: column-reverse;
        }

        .product-spec-el .col-lg-5 {
            margin-bottom: 30px;
        }

        .product-gallery {
            max-width: 400px;
            margin: 0 auto;
        }

        .section-heading {
            text-align: center;
            margin-bottom: 30px;
        }
    }

    @media (max-width: 767px) {
        .breadcrumb-container {
            margin-inline: 1rem;
        }

        .product-spec-el {
            padding: 60px 0 !important;
        }

        .product-gallery {
            max-width: 100%;
            margin-bottom: 20px;
        }

        .gallery-main-img {
            border-radius: 8px;
        }

        .productGalleryThumbs {
            margin-top: 15px !important;
        }

            .productGalleryThumbs .swiper-slide {
                opacity: 0.6;
            }

            .productGalleryThumbs .swiper-slide-thumb-active {
                opacity: 1;
            }

        .thumb-img {
            border-radius: 4px;
            width: 100%;
            height: 60px;
            object-fit: cover;
        }

        .list-two-col {
            display: grid !important;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .about-icon-box {
            flex-direction: column;
            text-align: center;
            gap: 10px;
        }

            .about-icon-box .me-3 {
                margin-right: 0 !important;
                margin-bottom: 10px;
            }

        .product-attributes {
            margin-top: 20px;
        }

        .attribute-group {
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 15px;
        }

        .att-title {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }

        .attribute-type {
            font-size: 14px;
            font-weight: 600;
        }

        .attribute-values {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .attribute-value-item {
            flex: 0 0 auto;
        }

            .attribute-value-item img {
                max-width: 40px;
                max-height: 40px;
                border-radius: 4px;
            }

        .color-swatch {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border: 2px solid #fff;
            box-shadow: 0 0 0 1px #ccc;
            display: inline-block;
        }

        .attribute-text {
            font-size: 12px;
            background: #f8f9fa;
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid #e9ecef;
        }

        .btn-group {
            flex-direction: column;
            gap: 5px;
        }

            .btn-group .btn {
                border-radius: 4px !important;
                font-size: 12px;
                padding: 6px 10px;
            }

        .attribute-main-btn {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .video-container {
            border-radius: 8px;
            overflow: hidden;
        }

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }
    }

    @media (max-width: 480px) {
        .thumb-img {
            height: 50px;
        }

        .attribute-values {
            gap: 6px;
        }

        .attribute-value-item img {
            max-width: 30px;
            max-height: 30px;
        }

        .color-swatch {
            width: 20px;
            height: 20px;
        }

        .btn-group .btn {
            font-size: 11px;
            padding: 5px 8px;
        }

        .play-button {
            width: 50px;
            height: 50px;
            font-size: 18px;
        }
    }

    .dropdown-grid-item a.big-img:first-child {
        text-align: center;
    }

    .dropdown-grid-item a.big-img {
        width: 100% !important;
        display: block;
    }

        .dropdown-grid-item a.big-img img {
            max-width: 100px !important;
        }

        .dropdown-grid-item a.big-img drop-title {
            text-align: center;
        }

    .goal_item:hover .icon-box i {
        background-color: var(--color-primary, #CA0F0F);
    }

    .border-primary {
        border-color: var(--color-primary, var(--bs-border-opacity)) !important;
    }

    .goal-icon-box i {
        width: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 20px;
    }

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

    .image-slider-element .swiper-button-next::after, .image-slider-element .swiper-button-prev::after {
        font-size: 17px;
        color: black;
    }
    /* =============================================================================
   SIMPLE VIDEO PLAYER STYLES
   ============================================================================= */
    /* Simple Video Backdrop */
    .video-element .simple-video-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        z-index: 10000;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
        animation: backdropFadeIn 0.3s ease-out;
    }
    /* Simple Video Player */
    .video-element .simple-video-player {
        max-width: 90vw;
        max-height: 90vh;
        width: auto;
        height: auto;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }
    /* Simple Close Guide */
    .video-element .simple-close-guide {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 14px;
        opacity: 0.9;
        z-index: 10002;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px 20px;
        border-radius: 25px;
        animation: fadeInDown 0.5s ease-out;
        text-align: center;
    }

    .simple-close-btn {
        top: 33px;
        right: 38%;
        background: no-repeat;
        border: none;
        color: white;
        position: absolute;
        font-size: 1.7rem;
    }
    /* Video Element Base Styles */
    .video-element .video-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 10000;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
        animation: backdropFadeIn 0.3s ease-out;
    }
    /* Video Player Container */
    /* Video.js Player - Clean Version */
    /* Override only problematic Video.js settings */
    .video-element .video-js.vjs-fluid {
        padding-top: 0 !important;
    }
    /* Big Play Button */
    .video-element .video-js .vjs-big-play-button {
        background-color: rgba(0, 0, 0, 0.7);
        border: none;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 30px;
        left: 50%;
        top: 50%;
        margin-left: -40px;
        margin-top: -40px;
        transition: all 0.3s ease;
    }

        .video-element .video-js .vjs-big-play-button:hover {
            background-color: rgba(0, 0, 0, 0.9);
            transform: scale(1.1);
        }
    /* Play Overlay Styles */
    .video-element .play-overlay {
        pointer-events: auto !important;
        display: flex !important;
    }

        .video-element .play-overlay:hover {
            background: rgba(0,0,0,0.9) !important;
            transform: translate(-50%, -50%) scale(1.1) !important;
        }
    /* Close Guide */
    .video-element .close-guide {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 14px;
        opacity: 0.8;
        z-index: 10002;
        background: rgba(0, 0, 0, 0.5);
        padding: 8px 16px;
        border-radius: 4px;
        animation: fadeInDown 0.5s ease-out;
    }
    /* Close Button */
    .video-element .close-video-btn:hover {
        opacity: 1 !important;
        transform: scale(1.1);
    }
    /* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */
    /* Mobile Devices - Simple Video */
    @media (max-width: 768px) {
        .video-element .simple-video-player {
            max-width: 95vw;
            max-height: 85vh;
        }

        .video-element .simple-close-guide {
            top: 20px;
            font-size: 12px;
            padding: 8px 16px;
        }
    }
    /* Vertical Videos */
    @media (max-aspect-ratio: 1/1) {
        .video-element .video-player-container {
            max-width: 50vh;
            width: auto;
        }

        .video-element .video-js {
            max-width: 50vh;
            width: auto;
            max-height: 80vh; /* Remove calc() */
        }

            .video-element .video-js video {
                max-width: 50vh;
                max-height: 80vh; /* Remove calc() */
            }
    }
    /* Mobile Devices */
    @media (max-width: 768px) {
        .video-element .video-player-container {
            width: 90vw;
            max-width: 90vw;
            max-height: 70vh;
        }

        .video-element .video-js {
            max-width: 90vw;
            max-height: 70vh; /* Remove calc() */
        }

            .video-element .video-js video {
                max-height: 70vh; /* Remove calc() */
            }

        .video-element .close-video-btn {
            top: -40px !important;
            font-size: 24px !important;
        }
    }
    /* Mobile + Vertical Videos */
    @media (max-width: 768px) and (max-aspect-ratio: 1/1) {
        .video-element .video-player-container {
            max-width: 80vw;
            max-height: 60vh;
        }

        .video-element .video-js {
            max-width: 80vw;
            max-height: 60vh; /* Remove calc() */
        }

            .video-element .video-js video {
                max-height: 60vh; /* Remove calc() */
            }
    }
    /* =============================================================================
   ANIMATIONS
   ============================================================================= */

    @keyframes backdropFadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes playerSlideIn {
        from {
            opacity: 0;
            transform: scale(0.9) translateY(20px);
        }

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

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }
    /* =============================================================================
   LEGACY SUPPORT (For backward compatibility)
   ============================================================================= */
    /* Global Video.js Overrides (for non-.video-element contexts) */
    .video-js {
        border-radius: 12px;
        font-family: inherit;
    }

        .video-js.vjs-responsive {
            padding-top: 0 !important;
        }

    [class*="video-player-"][class*="-dimensions"] {
        padding-top: 0 !important;
    }

    .vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 0 !important;
    }
    /* Global Close Guide (for backward compatibility) */
    .site-video-close-guide {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%) !important;
        color: white;
        font-size: 14px;
        opacity: 0;
        z-index: 10002;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px 20px;
        border-radius: 25px;
        text-align: center;
        pointer-events: none;
        animation: fadeInDown 0.5s ease-out forwards;
    }
    /* Global Video Backdrop (for backward compatibility) */
    .video-backdrop {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        animation: backdropFadeIn 0.3s ease-out;
    }

    .digi-newsletter.home-38 .digi-news-form .digi-news-button {
        right: auto;
        left: 3px;
    }

    .digi-newsletter.home-38 .digi-news-form .digi-news-button {
        background: var(--color-primary);
        color: white;
    }

    .search-results-container .block-content {
        padding: 4px;
    }

    .search-results-container table {
        box-shadow: none;
        border-radius: 0;
    }

    .search-results-container .search-row a {
        color: #666;
    }

    .search-results-container {
        background: white;
        border-radius: 3px;
    }

    .dropdown-grid-item a.big-img {
        text-align: center;
    }

    .btn-38-outline {
        border: 1px solid var(--color-primary);
    }

        .btn-38-outline:hover {
            background-color: var(--color-primary);
        }

    .service-with-icon-inline {
        transition: all 0.3s ease;
        border-radius: 8px;
    }

        .service-with-icon-inline:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .service-with-icon-inline .service-icon img {
            object-fit: contain;
            border-radius: 8px;
        }

        .service-with-icon-inline .btn-link {
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .service-with-icon-inline:hover .btn-link {
            text-decoration: underline;
        }
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .service-with-icon-inline .d-flex {
            flex-direction: column;
            text-align: center;
        }

        .service-with-icon-inline .service-icon {
            margin-right: 0 !important;
            margin-bottom: 1rem;
            align-self: center;
        }
    }

    .video-bg-with-icon::before {
        background-color: rgba(72, 72, 72, 0.7);
    }

    .work-process-list li:hover .process-icon-2 i {
        color: var(--color-primary);
    }

    .list-inline-item:not(:last-child) {
        margin-right: .5rem;
        margin-left: 0;
    }
    /* Services Icon Inline Mobile Responsive Styles */
    @media (max-width: 991px) {
        /* نمایش موبایل برای services-icon-inline */
        .services-icon-inline .services-plus-layout .row {
            flex-direction: column;
        }

        .services-icon-inline .services-plus-layout .col-lg-4,
        .services-icon-inline .services-plus-layout .col-md-6 {
            flex: 0 0 100%;
            max-width: 100%;
            margin-bottom: 2rem;
            position: relative;
        }
            /* خطوط جداکننده افقی بین آیتم‌های موبایل */
            .services-icon-inline .services-plus-layout .col-lg-4:not(:last-child)::after,
            .services-icon-inline .services-plus-layout .col-md-6:not(:last-child)::after {
                content: '';
                position: absolute;
                bottom: -1rem;
                left: 50%;
                transform: translateX(-50%);
                width: 60%;
                height: 2px;
                background: linear-gradient(90deg, transparent 0%, var(--color-primary, #ddd) 25%, var(--color-primary, #ddd) 75%, transparent 100%);
            }
        /* مخفی کردن خطوط جداکننده دسکتاپ در موبایل */
        .services-icon-inline .separator-line,
        .services-icon-inline .vertical-separator {
            display: none !important;
        }
        /* تنظیمات کارت‌های سرویس در موبایل */
        .services-icon-inline .service-card {
            margin-bottom: 0;
            padding: 2rem 1.5rem;
            text-align: center;
            border-radius: 12px;
            transition: all 0.3s ease;
            border: 1px solid #f0f0f0;
            background: white;
        }

            .services-icon-inline .service-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 30px rgba(0,0,0,0.1);
                border-color: var(--color-primary, #ddd);
            }
    }
    /* تنظیمات اضافی برای موبایل کوچک */
    @media (max-width: 767px) {
        .services-icon-inline .service-card {
            padding: 1.5rem 1rem;
            margin-bottom: 0;
        }

        .services-icon-inline .col-lg-4:not(:last-child)::after,
        .services-icon-inline .col-md-6:not(:last-child)::after {
            width: 80%;
            bottom: -1.5rem;
        }

        .services-icon-inline .col-lg-4,
        .services-icon-inline .col-md-6 {
            margin-bottom: 3rem;
        }
    }
    /* حفظ طراحی دسکتاپ */
    @media (min-width: 992px) {
        .services-icon-inline .services-plus-layout .col-lg-4:not(:last-child)::after,
        .services-icon-inline .services-plus-layout .col-md-6:not(:last-child)::after {
            display: none;
        }
    }

    .single-integration a {
        text-align: center;
    }

    @media (max-width: 991px) {
        .services-icon-inline .services-plus-layout .row:first-child::after {
            content: '';
            position: absolute;
            bottom: -1rem;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, var(--color-primary, #ddd) 25%, var(--color-primary, #ddd) 75%, transparent 100%);
        }
    }

    @media (max-width: 991px) {
        .services-icon-inline .services-plus-layout .row {
            position: relative;
        }
    }

    .rm-cta-area {
        background-color: none;
    }

    .text-danger {
        --bs-text-opacity: 1;
        color: rgb(255, 49, 49), var(--bs-text-opacity)) !important;
    }
    /* استایل‌های انیمیشن TinyMCE */
    .text-effect-fade,
    .text-effect-slide,
    .text-effect-bounce,
    .text-effect-rotate,
    .text-effect-glow {
        display: inline-block;
        animation-fill-mode: both;
        /* این مقادیر توسط JavaScript تنظیم می‌شوند */
    }
    /* ===== FADE ANIMATIONS ===== */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }

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

    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-30px);
        }

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

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }

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

    .text-effect-fade[data-animation="fadeIn"] {
        animation-name: fadeIn;
        animation-timing-function: ease-in-out;
    }

    .text-effect-fade[data-animation="fadeOut"] {
        animation-name: fadeOut;
        animation-timing-function: ease-in-out;
    }

    .text-effect-fade[data-animation="fadeInUp"] {
        animation-name: fadeInUp;
        animation-timing-function: ease-in-out;
    }

    .text-effect-fade[data-animation="fadeInDown"] {
        animation-name: fadeInDown;
        animation-timing-function: ease-in-out;
    }

    .text-effect-fade[data-animation="fadeInLeft"] {
        animation-name: fadeInLeft;
        animation-timing-function: ease-in-out;
    }

    .text-effect-fade[data-animation="fadeInRight"] {
        animation-name: fadeInRight;
        animation-timing-function: ease-in-out;
    }
    /* ===== SLIDE ANIMATIONS ===== */
    @keyframes slideInLeft {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }

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

    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

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

    @keyframes slideInUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

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

    @keyframes slideInDown {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }

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

    @keyframes slideOutLeft {
        from {
            transform: translateX(0);
            opacity: 1;
        }

        to {
            transform: translateX(-100%);
            opacity: 0;
        }
    }

    @keyframes slideOutRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }

        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }

    .text-effect-slide[data-animation="slideInLeft"] {
        animation-name: slideInLeft;
        animation-timing-function: ease-in-out;
    }

    .text-effect-slide[data-animation="slideInRight"] {
        animation-name: slideInRight;
        animation-timing-function: ease-in-out;
    }

    .text-effect-slide[data-animation="slideInUp"] {
        animation-name: slideInUp;
        animation-timing-function: ease-in-out;
    }

    .text-effect-slide[data-animation="slideInDown"] {
        animation-name: slideInDown;
        animation-timing-function: ease-in-out;
    }

    .text-effect-slide[data-animation="slideOutLeft"] {
        animation-name: slideOutLeft;
        animation-timing-function: ease-in-out;
    }

    .text-effect-slide[data-animation="slideOutRight"] {
        animation-name: slideOutRight;
        animation-timing-function: ease-in-out;
    }
    /* ===== BOUNCE ANIMATIONS ===== */
    @keyframes bounceIn {
        0% {
            transform: scale(0.3);
            opacity: 0;
        }

        50% {
            transform: scale(1.05);
        }

        70% {
            transform: scale(0.9);
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes bounceOut {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        25% {
            transform: scale(0.95);
        }

        50% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(0);
            opacity: 0;
        }
    }

    @keyframes scaleIn {
        from {
            transform: scale(0);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes scaleOut {
        from {
            transform: scale(1);
            opacity: 1;
        }

        to {
            transform: scale(0);
            opacity: 0;
        }
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes heartbeat {
        0% {
            transform: scale(1);
        }

        14% {
            transform: scale(1.3);
        }

        28% {
            transform: scale(1);
        }

        42% {
            transform: scale(1.3);
        }

        70% {
            transform: scale(1);
        }
    }

    .text-effect-bounce[data-animation="bounceIn"] {
        animation-name: bounceIn;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }

    .text-effect-bounce[data-animation="bounceOut"] {
        animation-name: bounceOut;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }

    .text-effect-bounce[data-animation="scaleIn"] {
        animation-name: scaleIn;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }

    .text-effect-bounce[data-animation="scaleOut"] {
        animation-name: scaleOut;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }

    .text-effect-bounce[data-animation="pulse"] {
        animation-name: pulse;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }

    .text-effect-bounce[data-animation="heartbeat"] {
        animation-name: heartbeat;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }
    /* ===== ROTATE ANIMATIONS ===== */
    @keyframes rotateIn {
        from {
            transform: rotate(-200deg);
            opacity: 0;
        }

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

    @keyframes rotateOut {
        from {
            transform: rotate(0);
            opacity: 1;
        }

        to {
            transform: rotate(200deg);
            opacity: 0;
        }
    }

    @keyframes flipInX {
        from {
            transform: perspective(400px) rotateX(90deg);
            opacity: 0;
        }

        to {
            transform: perspective(400px) rotateX(0deg);
            opacity: 1;
        }
    }

    @keyframes flipInY {
        from {
            transform: perspective(400px) rotateY(90deg);
            opacity: 0;
        }

        to {
            transform: perspective(400px) rotateY(0deg);
            opacity: 1;
        }
    }

    @keyframes rotate360 {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes wobble {
        0% {
            transform: translateX(0%);
        }

        15% {
            transform: translateX(-25%) rotate(-5deg);
        }

        30% {
            transform: translateX(20%) rotate(3deg);
        }

        45% {
            transform: translateX(-15%) rotate(-3deg);
        }

        60% {
            transform: translateX(10%) rotate(2deg);
        }

        75% {
            transform: translateX(-5%) rotate(-1deg);
        }

        100% {
            transform: translateX(0%);
        }
    }

    .text-effect-rotate[data-animation="rotateIn"] {
        animation-name: rotateIn;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }

    .text-effect-rotate[data-animation="rotateOut"] {
        animation-name: rotateOut;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }

    .text-effect-rotate[data-animation="flipInX"] {
        animation-name: flipInX;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }

    .text-effect-rotate[data-animation="flipInY"] {
        animation-name: flipInY;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }

    .text-effect-rotate[data-animation="rotate360"] {
        animation-name: rotate360;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }

    .text-effect-rotate[data-animation="wobble"] {
        animation-name: wobble;
        animation-timing-function: ease-in-out;
        transform-origin: center;
    }
    /* ===== GLOW ANIMATIONS ===== */
    @keyframes glowPulse {
        0% {
            text-shadow: 0 0 5px var(--color-primary, #007bff);
        }

        50% {
            text-shadow: 0 0 20px var(--color-primary, #007bff), 0 0 30px var(--color-primary, #007bff);
        }

        100% {
            text-shadow: 0 0 5px var(--color-primary, #007bff);
        }
    }

    @keyframes shadowWave {
        0% {
            text-shadow: 0 0 0 var(--color-primary, #007bff);
        }

        50% {
            text-shadow: 5px 5px 10px var(--color-primary, #007bff);
        }

        100% {
            text-shadow: 0 0 0 var(--color-primary, #007bff);
        }
    }

    @keyframes colorChange {
        0% {
            color: var(--color-primary, #007bff);
        }

        25% {
            color: #ff6b6b;
        }

        50% {
            color: #4ecdc4;
        }

        75% {
            color: #45b7d1;
        }

        100% {
            color: var(--color-primary, #007bff);
        }
    }

    @keyframes neonGlow {
        0% {
            text-shadow: 0 0 10px var(--color-primary, #007bff), 0 0 20px var(--color-primary, #007bff), 0 0 30px var(--color-primary, #007bff);
        }

        100% {
            text-shadow: 0 0 20px var(--color-primary, #007bff), 0 0 30px var(--color-primary, #007bff), 0 0 40px var(--color-primary, #007bff);
        }
    }

    @keyframes textShadow {
        0% {
            text-shadow: 1px 1px 0 var(--color-primary, #007bff);
        }

        25% {
            text-shadow: 2px 2px 0 var(--color-primary, #007bff);
        }

        50% {
            text-shadow: 3px 3px 0 var(--color-primary, #007bff);
        }

        75% {
            text-shadow: 2px 2px 0 var(--color-primary, #007bff);
        }

        100% {
            text-shadow: 1px 1px 0 var(--color-primary, #007bff);
        }
    }

    .text-effect-glow[data-animation="glowPulse"] {
        animation-name: glowPulse;
        animation-timing-function: ease-in-out;
    }

    .text-effect-glow[data-animation="shadowWave"] {
        animation-name: shadowWave;
        animation-timing-function: ease-in-out;
    }

    .text-effect-glow[data-animation="colorChange"] {
        animation-name: colorChange;
        animation-timing-function: ease-in-out;
    }

    .text-effect-glow[data-animation="neonGlow"] {
        animation-name: neonGlow;
        animation-timing-function: ease-in-out;
    }

    .text-effect-glow[data-animation="textShadow"] {
        animation-name: textShadow;
        animation-timing-function: ease-in-out;
    }
    /* ===== کلاس کمکی برای تکرار بی‌نهایت ===== */
    .text-effect-infinite {
        animation-iteration-count: infinite !important;
    }
    /* ===== ریسپانسیو ===== */
    @media (max-width: 768px) {
        .text-effect-fade,
        .text-effect-slide,
        .text-effect-bounce,
        .text-effect-rotate,
        .text-effect-glow {
            animation-duration: 0.8s !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .text-effect-fade,
        .text-effect-slide,
        .text-effect-bounce,
        .text-effect-rotate,
        .text-effect-glow {
            animation: none !important;
        }
    }

    .ins-blog-card .ins-blog-content .ins-heading:hover {
        color: #000;
        text-shadow: 0 1px 1px #939393;
    }

    .ins-btn-meta:hover {
        background: rgba(198, 198, 198, 0.1);
    }
    /* استایل متن انیمیشنی */
    .animated-typewriter {
        position: relative;
        display: inline-block;
        min-height: 1.2em;
        line-height: 1.2;
    }

        .animated-typewriter::after {
            content: '|';
            position: absolute;
            right: 0;
            color: var(--cursor-color, var(--color-primary, #007BFF));
            animation: typewriter-blink 1s infinite;
            font-weight: bold;
        }

        .animated-typewriter.hide-cursor::after {
            display: none;
        }

    @keyframes typewriter-blink {
        0%, 50% {
            opacity: 1;
        }

        51%, 100% {
            opacity: 0;
        }
    }
    /* انیمیشن برای حالت RTL */
    .animated-typewriter.rtl::after {
        right: auto;
        left: 0;
    }
    /* استایل‌های اضافی */
    .animated-typewriter.highlight {
        background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
        background-size: 200% 100%;
        animation: highlight-sweep 2s ease-in-out infinite;
    }

    @keyframes highlight-sweep {
        0% {
            background-position: -200% 0;
        }

        100% {
            background-position: 200% 0;
        }
    }

    .productGalleryMain .swiper-slide-active {
        transform: translateX(0%);
        opacity: 1 !important;
    }

    .productGalleryMain .swiper-slide-next {
        transform: translateX(100%);
    }

    .productGalleryMain .swiper-slide-prev {
        transform: translateX(-100%);
    }
    /* =============================================================================
   PRODUCT GALLERY SWIPER FIXES
   ============================================================================= */
    /* Main Gallery Container */
    .product-gallery {
        margin-bottom: 30px;
        position: relative;
    }

    .productGalleryMain {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 10px;
        position: relative !important;
    }
        /* Critical: Fix swiper wrapper positioning */
        .productGalleryMain .swiper-wrapper {
            position: relative !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 1 !important;
            display: flex !important;
            transition-property: transform !important;
            transform: translate3d(0px, 0px, 0px) !important;
        }
        /* Critical: Fix slide positioning and prevent stacking */
        .productGalleryMain .swiper-slide {
            flex-shrink: 0 !important;
            width: 100% !important;
            height: 100% !important;
            position: relative !important;
            transition-property: transform !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: #f8f9fa;
        }
            /* Ensure images fit properly */
            .productGalleryMain .swiper-slide img.gallery-main-img {
                width: 100% !important;
                height: 100% !important;
                object-fit: contain !important;
                display: block !important;
                position: relative !important;
            }
            /* Video container in slides */
            .productGalleryMain .swiper-slide .video-container {
                position: relative !important;
                width: 100% !important;
                height: 100% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
        /* Navigation buttons - fix selectors */
        .productGalleryMain .swiper-button-next,
        .productGalleryMain .swiper-button-prev {
            background-color: rgba(255, 255, 255, 0.9) !important;
            width: 44px !important;
            height: 44px !important;
            border-radius: 50% !important;
            color: var(--color-primary) !important;
            font-size: 18px !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
            transition: all 0.3s ease !important;
            margin-top: -22px !important;
            z-index: 10 !important;
        }

            .productGalleryMain .swiper-button-next::after,
            .productGalleryMain .swiper-button-prev::after {
                font-size: 18px !important;
                font-weight: 600 !important;
            }

            .productGalleryMain .swiper-button-next:hover,
            .productGalleryMain .swiper-button-prev:hover {
                background-color: var(--color-primary) !important;
                color: white !important;
                transform: scale(1.1) !important;
            }
    /* Thumbnails */
    .productGalleryThumbs {
        margin-top: 15px !important;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 8px;
    }

        .productGalleryThumbs .swiper-slide {
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.3s;
            width: auto !important;
            height: 100px !important;
        }

        .productGalleryThumbs .swiper-slide-thumb-active {
            opacity: 1;
        }

        .productGalleryThumbs .thumb-img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 6px;
            border: 2px solid transparent;
            transition: border-color 0.3s;
        }

        .productGalleryThumbs .swiper-slide-thumb-active .thumb-img {
            border-color: var(--color-primary);
        }
    /* Single image handling */
    .productGalleryMain.single-image .swiper-button-next,
    .productGalleryMain.single-image .swiper-button-prev {
        display: none !important;
    }
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .productGalleryMain {
            height: 300px;
        }

        .productGalleryThumbs .thumb-img {
            width: 80px;
            height: 80px;
        }

        .productGalleryMain .swiper-button-next,
        .productGalleryMain .swiper-button-prev {
            width: 36px !important;
            height: 36px !important;
            margin-top: -18px !important;
        }
    }

    @media (max-width: 480px) {
        .productGalleryMain {
            height: 250px;
        }

        .productGalleryThumbs .thumb-img {
            width: 60px;
            height: 60px;
        }
    }
    /* Override any conflicting styles */
    .productGalleryMain * {
        box-sizing: border-box;
    }
    /* Ensure proper z-index stacking */
    .productGalleryMain .swiper-slide {
        z-index: 1;
    }

    .productGalleryMain .swiper-slide-active {
        z-index: 2;
    }

    .productGalleryMain .swiper-button-next,
    .productGalleryMain .swiper-button-prev {
        z-index: 10;
    }
    /* استایل‌های بخش سرچ موبایل - با fade-in effect */
    .search-input-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding-top: 80px;
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
    }

        .search-input-container.active {
            display: flex;
            opacity: 1;
        }

    .search-input-wrapper {
        position: relative;
        width: 100%;
        max-width: 600px;
        padding: 0 20px;
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        transform: scale(0.9);
        opacity: 0;
        transition: all 0.4s ease-out;
    }

    .search-input-container.active .search-input-wrapper {
        transform: scale(1);
        opacity: 1;
        animation: fadeInScale 0.4s ease-out;
    }

    @keyframes fadeInScale {
        0% {
            opacity: 0;
            transform: scale(0.8) translateY(-20px);
        }

        50% {
            opacity: 0.7;
            transform: scale(0.95) translateY(-10px);
        }

        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .search_39 {
        position: relative;
        margin: 0;
    }

    .search_form_39 {
        padding: 20px;
        border-radius: 15px;
    }

        .search_form_39 .form-control {
            border: none;
            background-color: #f8f9fa;
            padding: 15px 20px;
            font-size: 16px;
            border-radius: 25px;
            box-shadow: none;
            transition: all 0.3s ease;
        }

            .search_form_39 .form-control:focus {
                background-color: #f8f9fa;
                border: 2px solid var(--color-primary);
                box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.2);
                transform: scale(1.02);
            }

    .search-close-btn {
        position: absolute;
        top: 20px;
        left: 20px;
        background: var(--color-primary);
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 10;
        opacity: 0;
        transform: scale(0.8);
    }

    .search-input-container.active .search-close-btn {
        opacity: 1;
        transform: scale(1);
        animation: fadeInButton 0.5s ease-out 0.2s both;
    }

    @keyframes fadeInButton {
        0% {
            opacity: 0;
            transform: scale(0.6) rotate(-90deg);
        }

        100% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
    }

    .search-close-btn:hover {
        background: var(--color-secondary);
        transform: scale(1.1) rotate(90deg);
    }

    .m-headsearch {
        border: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--rgba-primary-9);
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .m-headsearch:hover {
            background-color: var(--color-primary);
            transform: scale(1.1);
        }

            .m-headsearch:hover svg path {
                stroke: white;
            }
    /* Search Results با fade effect */
    .resault {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border-radius: 0 0 15px 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        max-height: 60vh;
        overflow-y: auto;
        opacity: 1;
        transform: translateY(0);
        transition: all 0.3s ease-in-out;
        z-index: 10;
    }

        .resault.hiddenel {
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
        }

    .resault-partial {
        padding: 20px;
        opacity: 0;
        animation: fadeInContent 0.4s ease-out 0.1s both;
    }

    @keyframes fadeInContent {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* Hide search container on desktop */
    @media (min-width: 1200px) {
        .search-input-container {
            display: none !important;
        }
    }
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .search-input-container {
            padding-top: 60px;
        }

        .search-input-wrapper {
            margin: 0 10px;
            max-width: calc(100% - 20px);
        }

        .search_form_39 {
            padding: 15px;
        }

        .search-close-btn {
            top: -45px;
            right: 15px;
            width: 35px;
            height: 35px;
            font-size: 16px;
            left: auto;
        }
    }
    /* Backdrop blur effect */
    .search-input-container {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
        /* پولیش کردن انیمیشن‌های اضافی */
        .search-input-container.active {
            animation: backdropFadeIn 0.4s ease-out;
        }

    @keyframes backdropFadeIn {
        0% {
            opacity: 0;
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
        }

        100% {
            opacity: 1;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
    }


/* =============================================================================
   ELEMENT 103 - Company Brands Section Styles
   ============================================================================= */

/* Section Container */
.company-brands-section {
    position: relative; 
    overflow: hidden;
}
    .company-brands-section {
        padding: 80px 0;
    }

/* Video Background with Dynamic Object-Fit */
.company-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: object-fit 0.3s ease;
}
    .company-content-wrapper {
        padding-right: 30px;
        text-align: right;
    }

    /* Object-Fit Modes */
    .company-background-video.object-fit-auto {
        object-fit: fill;
    }
    .company-title h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 20px;
        text-align: right;
    }

    .company-background-video.object-fit-cover {
        object-fit: cover;
    }
    .company-description {
        font-size: 1.1rem;
        line-height: 1.8;
        text-align: right;
    }

    .company-background-video.object-fit-contain {
        object-fit: contain;
    }
    .production-brands-wrapper {
        padding-top: 50px;
    }

/* Background Image with Dynamic Background-Size */
.company-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    transition: background-size 0.3s ease;
}

    /* Background-Size Modes */
    .company-background-image.bg-size-auto {
        background-size: auto;
    }
    .brands-title {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 30px;
    }
    /* باکس اصلی بزرگ مستطیل */
    .brands-main-container {
        max-width: 900px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .company-background-image.bg-size-cover {
        background-size: cover;
    }

    .company-background-image.bg-size-contain {
        background-size: contain;
    }

/* Background Slider Container */
.company-banner-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

    .company-banner-slider .swiper-slide video,
    .company-banner-slider .swiper-slide .company-background-image {
        width: 100%;
        height: 100%;
    }

    /* Navigation Buttons for Background Slider - Hidden by default */
    .company-banner-slider .swiper-button-next,
    .company-banner-slider .swiper-button-prev {
        display: none !important;
    }

    /* Pagination */
    .company-banner-slider .swiper-pagination {
        bottom: 20px;
    }

    .company-banner-slider .swiper-pagination-bullet {
        background: white;
        opacity: 0.5;
        width: 12px;
        height: 12px;
    }

    .company-banner-slider .swiper-pagination-bullet-active {
        opacity: 1;
        width: 30px;
        border-radius: 6px;
    }

/* =============================================================================
   BRAND BOXES WITH GLASS EFFECT
   ============================================================================= */

/* Brand Card with Glassy Effect */
.brand-card-bottom {
    width: 100px !important;
    height: 100px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    padding: 10px;
}

    .brand-card-bottom:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .brand-card-bottom .brand-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
    }

    .brand-card-bottom .brand-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5px;
    }

        .brand-card-bottom .brand-icon img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

    .brand-card-bottom .brand-name {
        font-size: 10px;
        font-weight: 600;
        text-align: center;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    /* Product Curtain Effect */
    .brand-card-bottom.has-curtain:hover .product-curtain {
        opacity: 1;
        transform: translateY(0);
    }

.product-curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 3;
}
    .brands-inner-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0;
    }
    /* هر آیتم برند */
    .brand-item {
        flex: 1 1 auto;
        min-width: 150px;
        max-width: 200px;
        padding: 20px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: all 0.3s ease;
    }
        /* فقط آیتم‌هایی که تصویر محصول دارند overflow hidden و cursor pointer داشته باشند */
        .brand-item.has-curtain {
            overflow: hidden;
            cursor: pointer;
        }
     
    /* خط جداکننده عمودی */
    .brand-item-divider::after {
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background: #e0e0e0;
        z-index: 1;
    }

.product-curtain-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* Brand Section Bottom Positioning */
.brands-bottom-section {
    position: relative;
    width: 100%;
    padding-bottom: 40px;
}

.brands-title {
    margin-bottom: 20px;
}

/* Grid Container for Brands */
.brands-grid-container-bottom .row {
    justify-content: center;
    gap: 15px;
}

.brands-grid-container-bottom .col-auto {
    padding: 0;
}

/* Swiper Container for Brands */
.brands-swiper-container-bottom {
    position: relative;
    padding: 0 40px;
}

    .brands-swiper-container-bottom .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .brands-swiper-container-bottom .swiper-button-next,
    .brands-swiper-container-bottom .swiper-button-prev {
        width: 35px;
        height: 35px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        border-radius: 50%;
    }

        .brands-swiper-container-bottom .swiper-button-next:after,
        .brands-swiper-container-bottom .swiper-button-prev:after {
            font-size: 14px;
            color: white;
        }

/* Responsive Design */
@media (max-width: 768px) {
    .brand-card-bottom {
        width: 80px !important;
        height: 80px !important;
    }

        .brand-card-bottom .brand-icon {
            width: 50px;
            height: 50px;
        }

        .brand-card-bottom .brand-name {
            font-size: 9px;
        }
}

@media (max-width: 576px) {
    .brand-card-bottom {
        width: 70px !important;
        height: 70px !important;
    }

        .brand-card-bottom .brand-icon {
            width: 40px;
            height: 40px;
        }

        .brand-card-bottom .brand-name {
            font-size: 8px;
        }
}

/* Brand Card Styles */
.brand-card {
    background: white;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .brand-card.has-curtain {
        cursor: pointer;
    }

    .brand-card:not(.has-curtain) {
        cursor: default;
    }

    .brand-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

.brand-content {
    position: relative;
    z-index: 2;
    transition: opacity 0.5s ease;
    width: 100%;
}

.brand-icon {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}
    .brand-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        position: relative;
        z-index: 2;
        transition: opacity 0.5s ease;
    }
    /* آیکون - بالا */
    .brand-icon {
        max-width: 80px;
        max-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
    }

    .brand-icon img {
        max-width: 120px;
        max-height: 80px;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

.brand-card:hover .brand-icon img {
    transform: scale(1.05);
}

.brand-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-top: 15px;
}

/* Product Curtain Effect */
.product-curtain {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    padding: 20px;
}
        .brand-icon img {
            width: 100% !important;
            height: auto !important;
            max-width: 80px;
            max-height: 80px;
            object-fit: contain;
            display: block;
        }
    /* متن - پایین */
    .brand-name {
        font-size: 1rem;
        font-weight: 500;
        color: #333;
        margin-top: 0;
    }
    /* پرده تصویر محصول */
    .product-curtain {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10;
        padding: 15px;
    }

.product-curtain-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transform: scale(0.8);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.brand-card.has-curtain:hover .product-curtain {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
    .product-curtain-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transform: scale(0.8);
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
    }
    /* Hover effect - فقط برای آیتم‌هایی که has-curtain دارند */
    .brand-item.has-curtain:hover .product-curtain {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.brand-card.has-curtain:hover .product-curtain-image {
    transform: scale(1);
}
    .brand-item.has-curtain:hover .product-curtain-image {
        transform: scale(1);
    }

.brand-card.has-curtain:hover .brand-content {
    opacity: 0;
}

/* Swiper Navigation for Brands */
.brands-swiper-container {
    position: relative;
    padding: 0 50px;
}

.brands-swiper-next-@element?.elementId,
.brands-swiper-prev-@element?.elementId {
    background-color: rgba(255, 255, 255, 0.95);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--color-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .brands-swiper-next-@element?.elementId::after,
    .brands-swiper-prev-@element?.elementId::after {
        font-size: 18px;
        font-weight: 600;
    }
    .brand-item.has-curtain:hover .brand-content {
        opacity: 0;
    }
    /* Hover effect برای باکس - فقط برای آیتم‌های دارای پرده */
    .brand-item.has-curtain:hover {
        background: #f8f9fa;
    }
    /* Hover خفیف برای آیتم‌های بدون پرده */
.brand-item:not(.has-curtain):hover {
    background: rgba(248, 249, 250, 0.3);
    border-bottom: 7px solid silver;
}
    /* Responsive */
    @media (max-width: 991px) {
        .brands-main-container {
            max-width: 100%;
            padding: 20px 15px;
        }

    .brands-swiper-next-@element?.elementId:hover,
    .brands-swiper-prev-@element?.elementId:hover {
        background-color: var(--color-primary);
        color: white;
        transform: scale(1.1);
    }
        .brand-item {
            min-width: 120px;
            max-width: 150px;
            padding: 15px 10px;
        }

.brands-swiper-pagination-@element?.elementId {
    bottom: -40px !important;
}
        .brand-icon {
            max-width: 60px;
            max-height: 60px;
            margin-bottom: 10px;
        }

    .brands-swiper-pagination-@element?.elementId .swiper-pagination-bullet {
        background: var(--color-primary);
        opacity: 0.3;
        width: 10px;
        height: 10px;
    }
            .brand-icon img {
                max-width: 60px;
                max-height: 60px;
            }

    .brands-swiper-pagination-@element?.elementId .swiper-pagination-bullet-active {
        opacity: 1;
        width: 30px;
        border-radius: 5px;
    }

/* Grid Layout for <= 4 brands */
.brands-grid-container .brand-card {
    height: 100%;
}
        .brand-name {
            font-size: 0.9rem;
        }
    }

/* Responsive Design */
@media (max-width: 991px) {
    .brand-card {
        min-height: 180px;
        padding: 25px 15px;
    }
    @media (max-width: 767px) {
        .brands-main-container {
            overflow: hidden;
            padding: 20px 0;
            position: relative;
        }

    .brand-icon {
        min-height: 60px;
    }

        .brand-icon img {
            max-width: 100px;
            max-height: 60px;
        }
        .brands-inner-wrapper {
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
            padding: 0 10px;
        }
            /* مخفی کردن اسکرول‌بار در Chrome, Safari */
            .brands-inner-wrapper::-webkit-scrollbar {
                display: none;
            }

    .brand-name {
        font-size: 1rem;
    }

    .brands-swiper-container {
        padding: 0 40px;
    }
}

@media (max-width: 576px) {
    .brand-card {
        min-height: 160px;
        padding: 20px 10px;
    }
        .brand-item {
            flex: 0 0 auto;
            min-width: 120px;
            max-width: 150px;
            padding: 15px 10px;
            border-bottom: none;
            border-left: none;
            scroll-snap-align: center;
        }
        /* فقط خطوط ::after را نمایش بده، نه border-left */
        .brand-item-divider::after {
            display: block;
        }
        /* حذف خط جداکننده برای آخرین آیتم */
        .brand-item:last-child::after,
        .brand-item-divider:last-child::after {
            display: none;
        }

    .brand-icon {
        min-height: 50px;
        margin-bottom: 15px;
    }
        .brand-icon {
            max-width: 60px;
            max-height: 60px;
        }

        .brand-icon img {
            max-width: 80px;
            max-height: 50px;
        }
            .brand-icon img {
                max-width: 60px;
                max-height: 60px;
            }

    .brand-name {
        font-size: 0.9rem;
    }

    .brands-swiper-container {
        padding: 0 30px;
    }

    .brands-swiper-next-@element?.elementId,
    .brands-swiper-prev-@element?.elementId {
        width: 36px;
        height: 36px;
    }

        .brands-swiper-next-@element?.elementId::after,
        .brands-swiper-prev-@element?.elementId::after {
            font-size: 14px;
        }
}

    /* نشانگرهای اسلاید */
    .brands-slide-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
        padding: 0 10px;
    }
        .brand-name {
            font-size: 0.85rem;
        }
        /* نشانگرهای اسلاید */
        .brands-slide-indicators {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 20px;
            padding: 0 10px;
        }

        .slide-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #d0d0d0;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .slide-dot.active {
            background: #333;
            width: 24px;
            border-radius: 4px;
        }
}
/* در انتهای فایل، استایل‌های brand-card-bottom را با این کد جایگزین کنید: */

/* =============================================================================
   BRAND CARD LINK WRAPPER - IMPROVED UX
   ============================================================================= */

.brand-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}

    .brand-card-link:hover,
    .brand-card-link:focus {
        text-decoration: none;
        color: inherit;
    }

/* Enhanced Brand Card Styles - بزرگتر و با فاصله کمتر */
.brand-card-bottom {
    width: 130px !important; 
    height: 100px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(15px); 
    border-radius: 18px; 
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    padding: 15px;
    cursor: pointer;
    --text-color-hover: var(--text-color, #000); /* رنگ متن در hover از CSS variable */
}

    .brand-card-link .brand-card-bottom:hover,
    .brand-card-bottom:hover {
        transform: translateY(0px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
        border-color: rgb(0 0 0 / 60%);
        background: rgb(255 255 255);
        border-radius: 0px;
    }
    
    /* رنگ متن‌ها در hover - از پنل */
    .brand-card-bottom:hover .brand-name,
    .brand-card-bottom:hover .brand-description {
        color: var(--text-color-hover) !important;
    }

    .brand-card-bottom .brand-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
    }

    .brand-card-bottom .brand-icon {
        width: 130px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: -10px;
    }

        .brand-card-bottom .brand-icon img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
            transition: all 0.3s ease;
        }

    .brand-card-bottom:hover .brand-icon img {
        transform: scale(1.1);
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
    }

    .brand-card-bottom .brand-name {
        font-size: 15px; 
        font-weight: 700;
        text-align: center;
        line-height: 1.3;
        white-space: nowrap;
        overflow: visible;
        text-overflow: ellipsis;
        width: 100%;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .brand-card-bottom .brand-description {
        font-size: 9px; /* از 8px به 9px */
        text-align: center;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        margin-top: 4px;
        opacity: 0.9;
    }

    /* Product Curtain Effect - بهبود یافته */
    .brand-card-bottom.has-curtain:hover .product-curtain {
        opacity: 1;
        transform: translateY(0);
    }

.product-curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.9);*/
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 3;
    pointer-events: none;
}

.product-curtain-image {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.3));
}

/* Link Indicator - بهبود یافته */
.brand-card-link::after {
    content: '\f35d';
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.brand-card-link:hover::after {
    opacity: 1;
    transform: scale(1) rotate(360deg);
}

/* Brand Section Bottom Positioning */
.brands-bottom-section {
    position: relative;
    width: 100%;
    padding-bottom: 40px;
}

.brands-title {
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Grid Container for Brands - کاهش فاصله */
.brands-grid-container-bottom .row {
    justify-content: center;
    gap: 12px; /* از 15px به 12px */
    row-gap: 15px; /* فاصله عمودی بیشتر */
}

.brands-grid-container-bottom .col-auto {
    padding: 0;
}

/* Swiper Container for Brands - کاهش فاصله */
.brands-swiper-container-bottom {
    position: relative;
    padding: 0 115px;
}

    .brands-swiper-container-bottom .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 6px; /* فاصله کمتر بین اسلایدها */
    }

    .brands-swiper-container-bottom .swiper-button-next,
    .brands-swiper-container-bottom .swiper-button-prev {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(8px);
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

        .brands-swiper-container-bottom .swiper-button-next:hover,
        .brands-swiper-container-bottom .swiper-button-prev:hover {
            background: rgba(255, 255, 255, 0.4);
            transform: scale(1.1);
        }

        .brands-swiper-container-bottom .swiper-button-next:after,
        .brands-swiper-container-bottom .swiper-button-prev:after {
            font-size: 16px;
            color: white;
            font-weight: 700;
        }

/* افکت درخشش هنگام hover */
.brand-card-bottom::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient( 45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70% );
    transform: translateX(-100%) translateY(-100%);
    transition: transform 0.6s ease;
}

.brand-card-bottom:hover::before {
    transform: translateX(100%) translateY(100%);
}

/* Responsive Design */
@media (max-width: 768px) {
    .brand-card-bottom {
        width: 110px !important; /* از 80px به 110px */
        height: 110px !important;
    }

        .brand-card-bottom .brand-icon {
            width: 70px;
            height: 70px;
        }

        .brand-card-bottom .brand-name {
            font-size: 11px;
        }

        .brand-card-bottom .brand-description {
            font-size: 8px;
        }

    .brands-grid-container-bottom .row {
        gap: 10px;
        row-gap: 12px;
    }

    .brands-swiper-container-bottom {
        padding: 0 35px;
    }

        .brands-swiper-container-bottom .swiper-button-next,
        .brands-swiper-container-bottom .swiper-button-prev {
            width: 35px;
            height: 35px;
        }
}

@media (max-width: 576px) {
    .brand-card-bottom {
        width: 95px !important; /* از 70px به 95px */
        height: 95px !important;
    }

        .brand-card-bottom .brand-icon {
            width: 60px;
            height: 60px;
        }

        .brand-card-bottom .brand-name {
            font-size: 10px;
        }

        .brand-card-bottom .brand-description {
            display: none;
        }

    .brands-grid-container-bottom .row {
        gap: 8px;
        row-gap: 10px;
    }

    .brands-swiper-container-bottom {
        padding: 0 30px;
    }
}

/* بهبود تجربه کاربری - انیمیشن ورود */
@keyframes brandFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.brand-card-bottom {
    animation: brandFadeIn 0.5s ease-out;
}

/* تاخیر انیمیشن برای هر کارت */
.brands-grid-container-bottom .col-auto:nth-child(1) .brand-card-bottom {
    animation-delay: 0.1s;
}

.brands-grid-container-bottom .col-auto:nth-child(2) .brand-card-bottom {
    animation-delay: 0.2s;
}

.brands-grid-container-bottom .col-auto:nth-child(3) .brand-card-bottom {
    animation-delay: 0.3s;
}

.brands-grid-container-bottom .col-auto:nth-child(4) .brand-card-bottom {
    animation-delay: 0.4s;
}

.brands-grid-container-bottom .col-auto:nth-child(5) .brand-card-bottom {
    animation-delay: 0.5s;
}

.feature-section .feature-img-holder.d-webkit .slide-dot.active {
    background: #333;
    width: 24px;
    border-radius: 4px;
}

.feature-section .feature-img-holder.d-webkit {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    max-width: 100%;
    overflow: hidden;
}
    
/* اصلاح ویدیو و تصاویر داخل feature-img-holder برای سافاری */
.feature-section .feature-img-holder.d-webkit video,
.feature-section .feature-img-holder.d-webkit img {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* جلوگیری از خروج محتوا در سافاری */
@supports (-webkit-touch-callout: none) {
    .feature-section .feature-img-holder.d-webkit {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}


    .hero-description {
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
    }

    .hero-mini-title {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .hero-support-text {
        color: rgba(255, 255, 255, 0.7);
        font-size: 1rem;
    }

    .btn-hero-primary {
        background: linear-gradient(135deg, #a855f7, #3b82f6);
        border: none;
        color: white;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px rgba(168, 85, 247, 0.3);
    }

        .btn-hero-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 35px rgba(168, 85, 247, 0.4);
            color: white;
        }

    .btn-hero-secondary {
        background: transparent;
        border: 2px solid rgba(255, 255, 255, 0.2);
        color: white;
        font-weight: 600;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }

        .btn-hero-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            color: white;
        }

    .hero-visual-content::before {
        content: '';
        position: absolute;
        top: -20%;
        left: -20%;
        width: 140%;
        height: 140%;
        background: radial-gradient(circle at center, rgba(168, 85, 247, 0.1), transparent 70%);
        z-index: -1;
        border-radius: 50%;
        animation: pulse-glow 4s ease-in-out infinite;
    }
    /* استایل‌های fade-in بدون نیاز به اسکرول */
    .hero-background {
        transition: opacity 1.5s ease-in-out;
    }

    .hero-background-slider {
        transition: opacity 1.5s ease-in-out;
    }

    .hero-bg-img,
    .hero-video {
        transition: opacity 1.5s ease-in-out;
    }
    /* بهبود عملکرد */
    .hero-background .hero-bg-img {
        will-change: opacity;
        backface-visibility: hidden;
    }

    .hero-background .hero-video {
        will-change: opacity;
        backface-visibility: hidden;
    }

    @keyframes pulse-glow {
        0%, 100% {
            transform: scale(1);
            opacity: 0.5;
        }

        50% {
            transform: scale(1.1);
            opacity: 0.8;
        }
    }

    @media (max-width: 768px) {
        .hero-section {
            min-height: 70vh;
            padding: 3rem 0;
        }

        .hero-main-title {
            font-size: 2.5rem !important;
        }

        .hero-description {
            font-size: 1.1rem;
        }

        .btn-hero-primary,
        .btn-hero-secondary {
            font-size: 1rem;
            padding: 0.875rem 2rem !important;
        }
    }

    @media (max-width: 576px) {
        .hero-main-title {
            font-size: 2rem !important;
        }

        .hero-buttons {
            flex-direction: column !important;
            align-items: stretch;
        }

        .btn-hero-primary,
        .btn-hero-secondary {
            width: 100%;
            text-align: center;
        }
    }

    .integration-list {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }



    .hero-section {
        background: linear-gradient(135deg, rgba(15, 12, 41, 0.9), rgba(48, 43, 99, 0.8), rgba(36, 36, 62, 0.9));
    }

    .hero-main-title {
        background: linear-gradient(135deg, #a855f7, #3b82f6, #06b6d4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

    .hero-description {
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
    }

    .hero-mini-title {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .hero-support-text {
        color: rgba(255, 255, 255, 0.7);
        font-size: 1rem;
    }

    /* =============================================================================
       ELEMENT 124 - Hero Slide Banner (Text top-center + Mockup bottom)
       ============================================================================= */

    /* هر اسلاید می‌تواند background-image اختصاصی خودش را داشته باشد */
    .hero-slide-banner {
        overflow: hidden;
    }

    .hero-slide-banner .hero-slides-wrapper {
        overflow: hidden;
        cursor: grab;
        user-select: none;
    }

    .hero-slide-banner .hero-slides-wrapper:active {
        cursor: grabbing;
    }

    /* همه اسلایدها absolute - ارتفاع از wrapper */
    .hero-slide-banner .hero-slide {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        pointer-events: none;
        overflow: hidden;
    }

    .hero-slide-banner .hero-slide.active {
        pointer-events: auto;
    }

    /* Curtain transition */
    .hero-slide-banner.transition-curtain .hero-slide.curtain-out {
        animation: curtainSlideOut 0.7s ease forwards;
    }

    .hero-slide-banner.transition-curtain .hero-slide.curtain-in {
        animation: curtainSlideIn 0.7s ease forwards;
    }

    @keyframes curtainSlideOut {
        from { transform: translateX(0); }
        to   { transform: translateX(-100%); }
    }

    @keyframes curtainSlideIn {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }

    /* Pagination dots */
    .hero-dot {
        background: rgba(255, 255, 255, 0.45);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all .3s;
    }

    .hero-dot.active {
        background: #fff;
        width: 28px !important;
        border-radius: 5px !important;
    }

    /* عنوان اصلی هر اسلاید */
    .hero-slide-banner .hero-title {
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1.35;
        color: #fff;
    }

    .hero-slide-banner .hero-mini-title {
        font-size: 1rem;
        color: rgba(255,255,255,0.75);
    }

    .hero-slide-banner .hero-description {
        font-size: 1.05rem;
        color: rgba(255,255,255,0.85);
        line-height: 1.7;
    }

    /* دکمه‌های اسلاید */
    .hero-slide-banner .hero-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 12px 28px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 1rem;
        background: var(--color-primary, #4f46e5);
        color: #fff;
        border: none;
        transition: opacity .25s, transform .25s;
        text-decoration: none;
    }

    .hero-slide-banner .hero-btn-primary:hover {
        opacity: .88;
        transform: translateY(-2px);
        color: #fff;
    }

    .hero-slide-banner .hero-btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 11px 28px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 1rem;
        background: transparent;
        color: #fff;
        border: 2px solid rgba(255,255,255,0.4);
        transition: background .25s, border-color .25s, transform .25s;
        text-decoration: none;
    }

    .hero-slide-banner .hero-btn-secondary:hover {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.7);
        transform: translateY(-2px);
        color: #fff;
    }

    /* عکس موکاپ پایین — نیمه بیرون از section */
    .hero-slide-banner .hero-mockup-wrap {
        margin-top: 40px;
    }

    .hero-slide-banner .hero-mockup-img {
        width: 100%;
        max-width: 900px;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -8px 60px rgba(0,0,0,0.35);
        display: block;
        margin: 0 auto;
        object-fit: cover;
    }

    @media (max-width: 575px) {
        .hero-slide-banner .hero-title {
            font-size: 1.6rem;
        }

        .hero-slide-banner .hero-btns {
            flex-direction: column;
            align-items: stretch;
        }

        .hero-slide-banner .hero-btn-primary,
        .hero-slide-banner .hero-btn-secondary {
            width: 100%;
            justify-content: center;
        }

        .hero-slide-banner .hero-mockup-wrap {
            margin-top: 24px;
        }

        .hero-slide-banner .hero-cta-form .hero-phone-input {
            border-radius: 8px !important;
            border-left: 1px solid #ced4da !important;
        }

        .hero-slide-banner .hero-cta-form .hero-submit-btn {
            border-radius: 8px !important;
            height: 48px !important;
        }
    }

    .btn-hero-primary {
        background: linear-gradient(135deg, #a855f7, #3b82f6);
        border: none;
        color: white;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px rgba(168, 85, 247, 0.3);
    }

        .btn-hero-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 35px rgba(168, 85, 247, 0.4);
            color: white;
        }

    .btn-hero-secondary {
        background: transparent;
        border: 2px solid rgba(255, 255, 255, 0.2);
        color: white;
        font-weight: 600;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }

        .btn-hero-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            color: white;
        }

    .hero-visual-content::before {
        content: '';
        position: absolute;
        top: -20%;
        left: -20%;
        width: 140%;
        height: 140%;
        background: radial-gradient(circle at center, rgba(168, 85, 247, 0.1), transparent 70%);
        z-index: -1;
        border-radius: 50%;
        animation: pulse-glow 4s ease-in-out infinite;
    }
    /* استایل‌های fade-in بدون نیاز به اسکرول */
    .hero-background {
        transition: opacity 1.5s ease-in-out;
    }

    .hero-background-slider {
        transition: opacity 1.5s ease-in-out;
    }

    .hero-bg-img,
    .hero-video {
        transition: opacity 1.5s ease-in-out;
    }
    /* بهبود عملکرد */
    .hero-background .hero-bg-img {
        will-change: opacity;
        backface-visibility: hidden;
    }

    .hero-background .hero-video {
        will-change: opacity;
        backface-visibility: hidden;
    }

    @keyframes pulse-glow {
        0%, 100% {
            transform: scale(1);
            opacity: 0.5;
        }

        50% {
            transform: scale(1.1);
            opacity: 0.8;
        }
    }

    @media (max-width: 768px) {
        .hero-section {
            min-height: 70vh;
            padding: 3rem 0;
        }

        .hero-main-title {
            font-size: 2.5rem !important;
        }

        .hero-description {
            font-size: 1.1rem;
        }

        .btn-hero-primary,
        .btn-hero-secondary {
            font-size: 1rem;
            padding: 0.875rem 2rem !important;
        }
    }

    @media (max-width: 576px) {
        .hero-main-title {
            font-size: 2rem !important;
        }

        .hero-buttons {
            flex-direction: column !important;
            align-items: stretch;
        }

        .btn-hero-primary,
        .btn-hero-secondary {
            width: 100%;
            text-align: center;
        }
    }
    /* حالت کاهش انیمیشن */
    @media (prefers-reduced-motion: reduce) {
        .hero-background,
        .hero-background-slider,
        .hero-bg-img,
        .hero-video {
            transition: none;
        }
    }

    .logo-white {
        max-height: 60px;
    }

    .instagram-video-player {
        position: relative;
        width: 100%;
        min-height: 500px;
        border-radius: 12px;
        overflow: hidden;
        background: #f8f9fa;
    }

    .main-video-element {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .play-overlay {
        position: absolute;
        top: 93%;
        left: 8%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background: rgba(255 255 255 / 19%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(10px)
    }

    .col-lg-6 {
        margin-block: auto
    }

    .instagram-video-player:hover .play-overlay {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .sound-toggle-btn {
        position: absolute;
        bottom: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
        background: rgba(0, 0, 0, 0.3);
        color: white;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        cursor: pointer;
        z-index: 20;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0;
    }

        .sound-toggle-btn:hover {
            background: rgba(0, 0, 0, 0.85);
            transform: scale(1.1);
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
        }

        .sound-toggle-btn.active {
            background: var(--color-primary);
            border-color: white;
        }

            .sound-toggle-btn.active:hover {
                background: var(--color-secondary);
            }

    .child-videos-container {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(102, 126, 234, 0.2);
        border-radius: 12px;
        padding: 12px;
        backdrop-filter: blur(10px);
    }

    .videos-scroll-wrapper {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        cursor: grab;
        user-select: none;
    }

        .videos-scroll-wrapper.grabbing {
            cursor: grabbing;
        }

        .videos-scroll-wrapper::-webkit-scrollbar {
            height: 4px;
        }

        .videos-scroll-wrapper::-webkit-scrollbar-track {
            background: rgba(102, 126, 234, 0.1);
            border-radius: 10px;
        }

        .videos-scroll-wrapper::-webkit-scrollbar-thumb {
            background: rgba(102, 126, 234, 0.4);
            border-radius: 10px;
            transition: background 0.3s ease;
        }

            .videos-scroll-wrapper::-webkit-scrollbar-thumb:hover {
                background: rgba(102, 126, 234, 0.6);
            }

    .videos-grid {
        display: flex;
        gap: 12px;
        padding: 4px;
    }

    .child-video-box {
        position: relative;
        flex-shrink: 0;
    }

        .child-video-box:hover {
            transform: translateY(-8px) scale(1.05);
            box-shadow: 0 12px 32px rgba(102, 126, 234, 0.35) !important;
        }

            .child-video-box:hover .play-icon {
                transform: scale(1.25);
                box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
                width: 45px;
                height: 45px;
                background: rgba(255,255,255,0.9);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

    .play-icon {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .image-container-wrapper {
        position: relative;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 20px 30px;
        backdrop-filter: blur(1px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
        text-align: center;
        color: #fff;
    }

    .floating-image {
        transition: all 0.3s ease;
    }

        .floating-image:hover {
            transform: scale(1.05);
            z-index: 999 !important;
        }

    .slider-dots {
        display: flex;
        gap: 6px;
        justify-content: center;
        margin-top: 12px;
    }

    .slider-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(102, 126, 234, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .slider-dot.active {
            background: rgba(102, 126, 234, 1);
            width: 24px;
            border-radius: 3px;
        }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

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

    @media (max-width: 1199px) {
        .child-video-box {
            width: 140px;
            height: 140px;
        }

            .child-video-box h6 {
                font-size: 0.7rem !important;
            }

        .play-icon {
            width: 40px !important;
            height: 40px !important;
        }

            .play-icon i {
                font-size: 16px !important;
            }
    }

    @media (max-width: 767px) {
        .child-video-box {
            width: 120px;
            height: 120px;
        }

            .child-video-box h6 {
                font-size: 0.65rem !important;
            }

        .play-icon {
            width: 35px !important;
            height: 35px !important;
        }

            .play-icon i {
                font-size: 14px !important;
            }

        .child-videos-container {
            padding: 10px;
        }

        .videos-grid {
            gap: 10px;
        }

        .sound-toggle-btn {
            width: 40px;
            height: 40px;
            font-size: 16px;
            bottom: 12px;
            right: 12px;
        }
    }
    /* ========== PRODUCT FEATURES TAB BUTTON ANIMATIONS ========== */
    @property --angle-1 {
        syntax: "<angle>";
        inherits: false;
        initial-value: -75deg;
    }

    @property --angle-2 {
        syntax: "<angle>";
        inherits: false;
        initial-value: -45deg;
    }
    /* Tab Navigation Wrapper */
    .feature-tab-list-2 {
        perspective: 1000px;
    }
        /* Tab Item Container */
        .feature-tab-list-2 .nav-item {
            position: relative;
            border-radius: 999vw;
            background: transparent;
            pointer-events: none;
            transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
        }
            /* Tab Shadow Container */
            .feature-tab-list-2 .nav-item::before {
                content: "";
                --shadow-cuttoff-fix: 2em;
                position: absolute;
                width: calc(100% + var(--shadow-cuttoff-fix));
                height: calc(100% + var(--shadow-cuttoff-fix));
                top: calc(0% - var(--shadow-cuttoff-fix) / 2);
                left: calc(0% - var(--shadow-cuttoff-fix) / 2);
                filter: blur(clamp(2px, 0.125em, 12px));
                border-radius: 999vw;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
                width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
                height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
                top: calc(var(--shadow-cuttoff-fix) - 0.5em);
                left: calc(var(--shadow-cuttoff-fix) - 0.875em);
                padding: 0.125em;
                box-sizing: border-box;
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask-composite: exclude;
                -webkit-mask-composite: xor;
                transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
                overflow: visible;
                opacity: 1;
                pointer-events: none;
                z-index: 0;
            }
        /* ========== TAB LINK BASE STYLES ========== */

        .feature-tab-list-2 .nav-link {
            cursor: pointer;
            position: relative;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            pointer-events: auto;
            z-index: 3;
            background: linear-gradient( -75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) );
            box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(clamp(1px, 0.125em, 4px));
            -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
            transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
            font-weight: 500;
            letter-spacing: -0.05em;
            text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);
            border: none !important;
        }

            .feature-tab-list-2 .nav-link:hover {
                transform: scale(0.975);
                backdrop-filter: blur(0.01em);
                -webkit-backdrop-filter: blur(0.01em);
                box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25), 0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5);
                text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12);
            }
                .feature-tab-list-2 .nav-link:hover p {
                    color: #fff;
                }        
                /* Shimmer Effect on Text */
                .feature-tab-list-2 .nav-link::after {
                    content: "";
                    display: block;
                    position: absolute;
                    z-index: 1;
                    width: calc(100% - var(--border-width));
                    height: calc(100% - var(--border-width));
                    top: calc(0% + var(--border-width) / 2);
                    left: calc(0% + var(--border-width) / 2);
                    box-sizing: border-box;
                    border-radius: 999vw;
                    overflow: clip;
                    background: linear-gradient( var(--angle-2), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 40% 50%, rgba(255, 255, 255, 0) 55% );
                    z-index: 3;
                    mix-blend-mode: screen;
                    pointer-events: none;
                    background-size: 200% 200%;
                    background-position: 0% 50%;
                    background-repeat: no-repeat;
                    transition: background-position 500ms cubic-bezier(0.25, 1, 0.5, 1), --angle-2 500ms cubic-bezier(0.25, 1, 0.5, 1);
                }

                .feature-tab-list-2 .nav-link:hover::after {
                    background-position: 25% 50%;
                }

                .feature-tab-list-2 .nav-link:active::after,
                .feature-tab-list-2 .nav-link.active::after {
                    background-position: 50% 15%;
                    --angle-2: -15deg;
                }
                /* ========== TAB OUTLINE ========== */

                .feature-tab-list-2 .nav-link::before {
                    content: "";
                    position: absolute;
                    z-index: 1;
                    inset: 0;
                    border-radius: 999vw;
                    width: calc(100% + var(--border-width));
                    height: calc(100% + var(--border-width));
                    top: calc(0% - var(--border-width) / 2);
                    left: calc(0% - var(--border-width) / 2);
                    padding: var(--border-width);
                    box-sizing: border-box;
                    background: conic-gradient( from var(--angle-1) at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5% 40%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, 0.5) ), linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
                    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                    mask-composite: exclude;
                    -webkit-mask-composite: xor;
                    transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1), --angle-1 500ms ease;
                    box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
                }

                .feature-tab-list-2 .nav-link:hover::before {
                    --angle-1: -125deg;
                }

                .feature-tab-list-2 .nav-link:active::before,
                .feature-tab-list-2 .nav-link.active::before {
                    --angle-1: -75deg;
                }
                /* Shadow Hover */
                .feature-tab-list-2 .nav-item:has(.nav-link:hover)::before {
                    filter: blur(clamp(2px, 0.0625em, 6px));
                    top: calc(2em - 0.875em);
                    opacity: 1;
                }
                /* Active State - Rotation */
                .feature-tab-list-2 .nav-item:has(.nav-link:active) {
                    transform: rotate3d(1, 0, 0, 25deg);
                }

                    .feature-tab-list-2 .nav-item:has(.nav-link:active) .nav-link {
                        box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2), 0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05), 0 0.25em 0 0 rgba(255, 255, 255, 0.75), inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
                        text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
                    }

                    .feature-tab-list-2 .nav-item:has(.nav-link:active)::before {
                        filter: blur(clamp(2px, 0.125em, 12px));
                        top: calc(2em - 0.5em);
                        opacity: 0.75;
                    }
                /* Touch Devices */
                @media (hover: none) and (pointer: coarse) {
                    .feature-tab-list-2 .nav-link::after,
                    .feature-tab-list-2 .nav-link:active::after {
                        --angle-2: -45deg;
                    }

                    .feature-tab-list-2 .nav-link::before,
                    .feature-tab-list-2 .nav-link:hover::before,
                    .feature-tab-list-2 .nav-link:active::before {
                        --angle-1: -75deg;
                    }
                }
                /* Responsive Adjustments */
                @media (max-width: 768px) {
                    .feature-tab-list-2 .nav-link {
                        padding: 0.675em 1.2em !important;
                        font-size: 0.9em;
                    }
                }

                .product-gallery-placeholder {
                    display: block;
                    width: 100%;
                    max-width: var(--card-w);
                    border-radius: 14px;
                    padding: var(--card-padding);
                    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
                    border: 1px solid var(--card-border);
                    backdrop-filter: blur(var(--glass-blur)) saturate(120%);
                    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
                    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.6);
                    color: var(--accent);
                    overflow: hidden;
                    transition: transform .18s ease;
                }

                .instagram-video-player {
                    position: relative;
                    width: 100%;
                    min-height: 500px;
                    border-radius: 12px;
                    overflow: hidden;
                    background: #f8f9fa;
                }

                .main-video-element {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                }

                .play-overlay {
                    position: absolute;
                    top: 93%;
                    left: 8%;
                    transform: translate(-50%, -50%);
                    width: 40px;
                    height: 40px;
                    background: rgba(255 255 255 / 19%);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 10;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    backdrop-filter: blur(10px);
                    cursor: pointer;
                    pointer-events: auto;
                }

                .col-lg-6 {
                    margin-block: auto
                }

                .instagram-video-player:hover .play-overlay {
                    transform: translate(-50%, -50%) scale(1.1);
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
                }

                .sound-toggle-btn {
                    position: absolute;
                    bottom: 16px;
                    right: 16px;
                    width: 44px;
                    height: 44px;
                    background: rgba(0, 0, 0, 0.3);
                    color: white;
                    border: none;
                    border-radius: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 18px;
                    cursor: pointer;
                    z-index: 30;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    padding: 0;
                    pointer-events: auto;
                }

                    .sound-toggle-btn:hover {
                        background: rgba(0, 0, 0, 0.85);
                        transform: scale(1.1);
                        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
                    }

                  
                /* Responsive Design */
                @media (max-width: 1199px) {
                    .child-video-box {
                        width: 140px;
                        height: 140px;
                    }

                        .child-video-box h6 {
                            font-size: 0.7rem !important;
                        }

                    .play-icon {
                        width: 40px !important;
                        height: 40px !important;
                    }

                        .play-icon i {
                            font-size: 16px !important;
                        }
                }

                @media (max-width: 767px) {


                    .child-video-box h6 {
                        font-size: 0.65rem !important;
                    }

                    .play-icon {
                        width: 35px !important;
                        height: 35px !important;
                    }

                        .play-icon i {
                            font-size: 14px !important;
                        }

                    .child-videos-container {
                        padding: 10px;
                    }

                    .sound-toggle-btn {
                        width: 40px;
                        height: 40px;
                        font-size: 16px;
                        bottom: 12px;
                        right: 12px;
                    }
                }
                /* استایل‌های باکس ویدیوی المان‌های فرعی */
                .child-video-box:hover {
                    box-shadow: 0 8px 20px rgba(0,0,0,0.25) !important;
                }

                    .child-video-box:hover .play-icon {
                        transform: scale(1.1);
                        background: rgba(255,255,255,1) !important;
                    }

                .child-videos-grid {
                    animation: fadeInUp 0.6s ease-out;
                }

                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(20px);
                    }

                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                /* Responsive */
                @media (max-width: 767px) {
                    .child-video-box {
                        min-height: 150px !important;
                    }

                        .child-video-box h6 {
                            font-size: 0.8rem !important;
                        }

                    .play-icon {
                        width: 40px !important;
                        height: 40px !important;
                    }

                        .play-icon i {
                            font-size: 16px !important;
                        }
                }

                .child-videos-swiper .swiper-slide {
                    width: auto !important;
                    flex: 0 0 auto !important;
                    max-width: 180px; /* اگر می‌خواهید حداکثر عرض متفاوت باشد، این را تغییر دهید */
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    box-sizing: border-box;
                    padding: 0 6px; /* فاصلهٔ بین سلایدها را در صورت نیاز تنظیم کنید */
                }
                /* Ensure the inner card fills the slide, but not larger */
                .child-videos-swiper .child-video-box {
                    width: 100%;
                    max-width: 160px; /* مطابق عرض کارت شما */
                    box-sizing: border-box;
                }

                .video-bg-with-icon {
                    padding: 0 0;
                }
                /* بخش گالری سرتیفیکت */
                .certificates-gallery-wrapper {
                    position: relative;
                }

                .certificate-frame {
                    transition: all 0.3s ease;
                    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
                }

                    .certificate-frame:hover {
                        transform: translateY(-5px);
                        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
                    }

                    .certificate-frame img {
                        transition: transform 0.3s ease;
                    }

                    .certificate-frame:hover img {
                        transform: scale(1.02);
                    }

                .zoom-icon {
                    width: 45px;
                    height: 45px;
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #0d6efd;
                    opacity: 0;
                    transition: all 0.3s ease;
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
                    z-index: 10;
                }

                .certificate-frame:hover .zoom-icon {
                    opacity: 1;
                }

                .zoom-icon:hover {
                    transform: scale(1.1);
                    background: #0d6efd;
                    color: white;
                }
                /* Thumbnails */
                .thumbnail-wrapper {
                    position: relative;
                    border-radius: 8px;
                    overflow: hidden;
                    transition: all 0.3s ease;
                    cursor: pointer;
                }

                    .thumbnail-wrapper:hover {
                        transform: translateY(-3px);
                    }

                    .thumbnail-wrapper img {
                        border: 2px solid transparent !important;
                        transition: all 0.3s ease;
                    }

                    .thumbnail-wrapper.active img,
                    .thumbnail-wrapper:hover img {
                        border-color: #0d6efd !important;
                        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
                    }
                /* باکس‌های شیشه‌ای ISO */
                /* باکس‌های شیشه‌ای ISO با انیمیشن نرم و زیبا */
                .iso-glass-box {
                    background: rgb(255 255 255 / 13%);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgb(163 163 162 / 24%);
                    border-radius: 16px;
                    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25), inset -9px 0px 17px 1px rgba(0, 0, 0, 0.25);
                    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* انیمیشن نرم با bounce */
                    min-height: 140px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    position: relative;
                    will-change: transform;
                }

                    .iso-glass-box:hover {
                        transform: translateY(-15px) scale(1.05); /* حرکت به بالا + بزرگنمایی */
                        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.3);
                        background: rgba(255, 255, 255, 0.98);
                        border: 1px solid rgba(163, 163, 162, 0.5);
                    }
                    /* انیمیشن برای آیکون داخل باکس */
                    .iso-glass-box .iso-icon-wrapper {
                        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
                        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                        transform-origin: center;
                    }

                    .iso-glass-box:hover .iso-icon-wrapper {
                        transform: scale(1.15) rotate(8deg);
                        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25));
                    }
                    /* انیمیشن برای متن داخل باکس */
                    .iso-glass-box .iso-label,
                    .iso-glass-box .iso-year {
                        transition: all 0.3s ease;
                    }

                    .iso-glass-box:hover .iso-label,
                    .iso-glass-box:hover .iso-year {
                        color: var(--color-primary) !important;
                        transform: translateY(-3px);
                        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                    }
                    /* افکت ripple موج‌دار */
                    .iso-glass-box::before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        width: 0;
                        height: 0;
                        border-radius: 50%;
                        background: radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent 70%);
                        transform: translate(-50%, -50%);
                        transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
                        opacity: 0;
                        pointer-events: none;
                    }

                    .iso-glass-box:hover::before {
                        width: 200%;
                        height: 200%;
                        opacity: 0;
                    }
                    /* افکت نور از بالا */
                    .iso-glass-box::after {
                        content: '';
                        position: absolute;
                        top: -50%;
                        left: -50%;
                        width: 200%;
                        height: 200%;
                        background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
                        transform: translateX(-100%);
                        transition: transform 0.6s ease;
                        pointer-events: none;
                    }

                    .iso-glass-box:hover::after {
                        transform: translateX(100%);
                    }

                .iso-icon-wrapper {
                    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
                }
                /* نمایش تعداد ISO */
                .iso-count-display {
                    padding: 20px;
                    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0.05) 100%);
                    border-radius: 16px;
                    border-left: 4px solid #0d6efd;
                }

                .count-number {
                    display: flex;
                    align-items: baseline;
                    gap: 5px;
                }
                /* Responsive - کاهش حرکت در موبایل */
                @media (max-width: 768px) {
                    .iso-glass-box:hover {
                        transform: translateY(-10px) scale(1.03);
                    }
                }
                /* کاهش انیمیشن برای کاربران با تنظیمات reduced motion */
                @media (prefers-reduced-motion: reduce) {
                    .iso-glass-box,
                    .iso-glass-box .iso-icon-wrapper,
                    .iso-glass-box .iso-label,
                    .iso-glass-box .iso-year {
                        transition: none;
                    }

                        .iso-glass-box:hover {
                            transform: translateY(-5px);
                        }
                }
                /* برندها */
                .brands-slider-section {
                    padding: 40px 0;
                    background: rgba(248, 249, 250, 0.5);
                    border-radius: 16px;
                    position: relative;
                }

                    .brands-slider-section::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        height: 1px;
                        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
                    }

                .brand-logo-wrapper {
                    transition: all 0.3s ease;
                }

                .brand-logo {
                    opacity: 0.5;
                    filter: grayscale(100%);
                    transition: all 0.3s ease;
                }

                .brand-logo-wrapper:hover .brand-logo {
                    opacity: 1;
                    filter: grayscale(0%);
                    transform: scale(1.1);
                }
                /* Responsive */
                @media (max-width: 991px) {
                    .certificates-gallery-wrapper {
                        margin-bottom: 3rem;
                    }

                    .iso-glass-box {
                        min-height: 120px;
                    }

                    .count-number .display-4 {
                        font-size: 2.5rem;
                    }
                }

                @media (max-width: 576px) {
                    .iso-glass-box {
                        min-height: 100px;
                    }

                    .iso-icon-wrapper img {
                        max-height: 40px !important;
                    }

                    .iso-label {
                        font-size: 0.8rem !important;
                    }

                    .iso-year {
                        font-size: 0.95rem !important;
                    }
                }

                .seeallcatmob {
                    background-color: var(--color-primary);
                }

                .video-content-section {
                    position: relative;
                }
                /* Grid Layout - اتوماتیک و مربعی */
                .video-boxes-grid {
                    display: grid;
                    gap: 1rem;
                    grid-auto-rows: 1fr;
                }
                    /* 1-3 باکس: یک ردیف */
                    .video-boxes-grid[data-box-count="1"],
                    .video-boxes-grid[data-box-count="2"],
                    .video-boxes-grid[data-box-count="3"] {
                        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                    }
                    /* 4-6 باکس: دو ردیف */
                    .video-boxes-grid[data-box-count="4"],
                    .video-boxes-grid[data-box-count="5"],
                    .video-boxes-grid[data-box-count="6"] {
                        grid-template-columns: repeat(3, 1fr);
                    }
                    /* 7-9 باکس: سه ردیف */
                    .video-boxes-grid[data-box-count="7"],
                    .video-boxes-grid[data-box-count="8"],
                    .video-boxes-grid[data-box-count="9"] {
                        grid-template-columns: repeat(3, 1fr);
                    }
                    /* بیش از 9 باکس */
                    .video-boxes-grid[data-box-count] {
                        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                    }

                .video-box {
                    position: relative;
                    border-radius: 12px;
                    overflow: hidden;
                    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
                    transition: transform 0.4s ease, box-shadow 0.4s ease;
                    aspect-ratio: 1 / 1; /* مربعی نگه داشتن */
                }

                    .video-box:hover {
                        transform: translateY(-8px);
                        box-shadow: 0 8px 16px rgba(0,0,0,0.25);
                    }

                .video-box-image {
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-position: center;
                    position: relative;
                }
                /* آیکون پلی اتوماتیک روی باکس‌ها */
                .video-icon-overlay {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 2;
                    opacity: 0.8;
                    transition: all 0.3s ease;
                }

                    .video-icon-overlay i {
                        font-size: 4rem;
                        color: white;
                        text-shadow: 0 2px 8px rgba(0,0,0,0.5);
                    }

                .video-box:hover .video-icon-overlay {
                    opacity: 0;
                }
                /* Overlay با افکت کشیدن از پایین */
                .video-box-overlay {
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    height: 0;
                    overflow: hidden;
                    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: var(--color-primary) !important;
                }

                .video-box:hover .video-box-overlay {
                    height: 100%;
                }

                .video-box-content {
                    text-align: center;
                    padding: 1.5rem 1rem;
                    opacity: 0;
                    transform: translateY(30px);
                    transition: all 0.4s ease 0.15s;
                    direction: rtl;
                    width: 100%;
                }

                .video-box:hover .video-box-content {
                    opacity: 1;
                    transform: translateY(0);
                }

                .video-box-content i {
                    font-size: 2.5rem;
                    margin-bottom: 0.75rem;
                    display: block;
                }

                .video-box-content h4 {
                    font-size: 1.1rem;
                    font-weight: 700;
                    margin-bottom: 0.5rem;
                    line-height: 1.4;
                }

                .video-box-content p {
                    font-size: 0.85rem;
                    margin-bottom: 0;
                    line-height: 1.5;
                }
                /* استایل متن */
                .video-content-text {
                    direction: rtl;
                }

                    .video-content-text .mini-title {
                        font-size: 0.875rem;
                        font-weight: 600;
                        text-transform: uppercase;
                        letter-spacing: 1px;
                        display: block;
                        margin-bottom: 1rem;
                    }

                    .video-content-text h2 {
                        font-size: 2.5rem;
                        font-weight: 700;
                        margin-bottom: 1.5rem;
                        line-height: 1.2;
                    }

                    .video-content-text .description {
                        margin-bottom: 1.5rem;
                        line-height: 1.8;
                    }

                        .video-content-text .description strong {
                            font-weight: 700;
                        }

                        .video-content-text .description p {
                            margin-bottom: 1rem;
                        }
                /* دکمه پخش ویدیو */
                .video-play-button {
                    display: inline-block;
                }

                .play-btn {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.75rem;
                    text-decoration: none;
                    transition: transform 0.3s ease;
                }

                    .play-btn:hover {
                        transform: scale(1.08);
                    }

                .play-icon {
                    width: 60px;
                    height: 60px;
                    background-color: var(--color-primary);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
                    transition: all 0.3s ease;
                }

                .play-btn:hover .play-icon {
                    background-color: var(--color-hover-bg, #0056B3);
                    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
                }

.play-icon i:hover {
    color: var(--color-primary);
}
                .play-icon i {
                    color: white;
                    font-size: 1.5rem;
                    margin-left: 3px;
                }

                .play-text {
                    font-size: 1.125rem;
                    font-weight: 600;
                }
                /* Responsive Design */
                @media (max-width: 991px) {
                    .video-boxes-grid {
                        grid-template-columns: repeat(2, 1fr) !important;
                    }

                    .video-content-text h2 {
                        font-size: 2rem;
                    }

                    .video-content-text {
                        text-align: center !important;
                    }
                }

                @media (max-width: 576px) {
                    .video-boxes-grid {
                        display: none !important;
                    }
                    /* لیست عمودی موبایل */
                    .mobile-video-list {
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                        padding: 10px;
                    }

                    .mobile-video-item {
                        display: flex;
                        align-items: center;
                        padding: 1rem;
                        border-radius: 12px;
                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                        transition: all 0.3s ease;
                        cursor: default !important;
                        min-height: 80px;
                        pointer-events: none !important; /* غیرفعال کردن همه کلیک‌ها */
                        user-select: none; /* جلوگیری از انتخاب متن */
                    }
                    /* آیکون سمت راست */
                    .mobile-video-icon {
                        flex: 0 0 60px;
                        width: 60px;
                        height: 60px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: rgba(255, 255, 255, 0.2);
                        border-radius: 50%;
                        margin-left: 1rem;
                        pointer-events: none !important;
                    }

                        .mobile-video-icon i {
                            font-size: 2rem;
                            pointer-events: none !important;
                        }
                    /* متن سمت چپ */
                    .mobile-video-text {
                        flex: 1;
                        text-align: right;
                        direction: rtl;
                        pointer-events: none !important;
                    }

                        .mobile-video-text h5 {
                            font-size: 1rem;
                            font-weight: 700;
                            margin: 0 0 0.5rem 0;
                            line-height: 1.4;
                        }

                        .mobile-video-text p {
                            font-size: 0.85rem;
                            margin: 0;
                            line-height: 1.5;
                            opacity: 0.95;
                        }
                    /* حذف استایل‌های قبلی video-box در موبایل */
                    .video-box {
                        display: none !important;
                    }
                    /* دکمه پخش ویدیو موبایل - فعال و قابل کلیک */
                    .video-play-button-mobile {
                        padding: 1.5rem 0;
                        margin-top: 1rem;
                        pointer-events: auto !important; /* فعال کردن کلیک */
                    }

                    .play-btn-mobile {
                        display: inline-flex;
                        flex-direction: row;
                        align-items: center;
                        gap: 1rem;
                        text-decoration: none;
                        padding: 1rem 2rem;
                        background: var(--color-primary);
                        border-radius: 50px;
                        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
                        transition: all 0.3s ease;
                        pointer-events: auto !important; /* فعال کردن کلیک */
                        cursor: pointer !important;
                    }

                        .play-btn-mobile:hover,
                        .play-btn-mobile:active {
                            transform: scale(1.05);
                            box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
                        }

                    .play-icon-mobile {
                        width: 45px;
                        height: 45px;
                        background: rgba(255, 255, 255, 0.9);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        pointer-events: none; /* کلیک به parent منتقل می‌شود */
                    }

                        .play-icon-mobile i {
                            color: var(--color-primary);
                            font-size: 1.25rem;
                            margin-left: 3px;
                            pointer-events: none;
                        }

                    .play-text-mobile {
                        font-size: 1rem;
                        font-weight: 600;
                        color: white !important;
                        pointer-events: none;
                    }
                }
                /* حذف استایل قدیمی */
                .video-play-button {
                    display: flex;
                }

                .product-tabs-wrapper {
                    padding: 150px 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .product-tab-list {
                    gap: 0;
                    width: 100%;
                    max-width: 300px;
                }

                    .product-tab-list .nav-item {
                        position: relative;
                    }

                    .product-tab-list .nav-link {
                        background: transparent;
                        border: none;
                        color: rgba(255, 255, 255, 0.7);
                        padding: 15px 20px;
                        text-align: center;
                        font-size: 14px;
                        font-weight: 400;
                        transition: all 0.3s ease;
                        border-radius: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        overflow: visible;
                    }

                        .product-tab-list .nav-link .tab-line {
                            position: absolute;
                            left: 0;
                            right: 165px;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 0;
                            height: 2px;
                            background: linear-gradient(to right, transparent, #dc3545, transparent);
                            transition: all 0.3s ease;
                            opacity: 0;
                        }

                        .product-tab-list .nav-link .tab-text {
                            position: relative;
                            z-index: 2;
                            transition: all 0.3s ease;
                        }

                        .product-tab-list .nav-link .tab-arrow {
                            position: absolute;
                            right: 10px;
                            font-size: 10px;
                            color: #dc3545;
                            opacity: 0;
                            transform: translateX(-10px);
                            transition: all 0.3s ease;
                        }

                        .product-tab-list .nav-link:hover {
                            color: #fff;
                            background: rgba(255, 255, 255, 0.03);
                        }

                            .product-tab-list .nav-link:hover .tab-arrow {
                                opacity: 0.5;
                                transform: translateX(0);
                            }

                        .product-tab-list .nav-link.active {
                            color: #fff;
                            background: transparent;
                        }

                            .product-tab-list .nav-link.active .tab-line {
                                width: calc(100% - 40px);
                                opacity: 1;
                            }

                            .product-tab-list .nav-link.active .tab-text {
                                transform: translateX(10px);
                            }

                            .product-tab-list .nav-link.active .tab-arrow {
                                opacity: 1;
                                transform: translateX(0);
                            }

                .product-showcase-wrapper {
                    padding: 40px 20px;
                    min-height: 500px;
                }

                .product-image-container {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 40px 20px;
                }

                .product-badge-wrapper {
                    position: relative;
                    display: inline-block;
                    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
                    padding: 40px;
                    border-radius: 20px;
                    box-shadow: 0 20px 60px rgba(220, 53, 69, 0.4);
                    max-width: 320px;
                    width: 100%;
                    overflow: visible;
                }

                .product-image-extended {
                    position: relative;
                    transform: scale(1.15) translateX(-20px);
                    z-index: 10;
                    width: 365px;
                    height: auto;
                }

                .product-main-image {
                    display: block;
                    width: 100%;
                    height: auto;
                    border-radius: 12px;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                    transition: transform 0.3s ease;
                }

                    .product-main-image:hover {
                        transform: scale(1.05);
                    }

                .product-info-content {
                    color: #fff;
                    padding: 0 20px;
                }

                    .product-info-content h2,
                    .product-info-content h3,
                    .product-info-content h4 {
                        color: #fff;
                        font-weight: 700;
                        margin-bottom: 25px;
                        font-size: 28px;
                    }

                    .product-info-content p {
                        color: rgba(255, 255, 255, 0.8);
                        line-height: 1.8;
                        font-size: 15px;
                        text-align: justify;
                    }

                .product-features-inline {
                    display: flex;
                    gap: 20px;
                    align-items: center;
                    margin-top: 20px;
                }

                .feature-icon-box-inline {
                    display: flex;
                    align-items: center;
                }

                .feature-icon-circle {
                    width: 50px;
                    height: 50px;
                    background: rgba(220, 53, 69, 0.2);
                    border: 2px solid #dc3545;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: all 0.3s ease;
                }

                    .feature-icon-circle:hover {
                        background: rgba(220, 53, 69, 0.4);
                        transform: scale(1.1);
                    }

                    .feature-icon-circle i {
                        font-size: 20px;
                        color: #dc3545;
                    }

                .btn-product {
                    padding: 12px 30px;
                    border-radius: 25px;
                    font-weight: 600;
                    text-decoration: none;
                    display: inline-block;
                    transition: all 0.3s ease;
                    border: none;
                }

                    .btn-product:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
                    }

                .product-badge-wrapper::before {
                    content: '';
                    position: absolute;
                    top: -10px;
                    left: -10px;
                    right: -10px;
                    bottom: -10px;
                    background: linear-gradient(135deg, rgba(220, 53, 69, 0.2) 0%, rgba(200, 35, 51, 0.2) 100%);
                    border-radius: 25px;
                    z-index: -1;
                }
                /* افزودن به Theme-Custom.css */
                /* Mobile Enhancements for Element 113 */
                @media (max-width: 991px) {
                    .element-113-section {
                        padding: 60px 0 !important;
                    }
                    /* تبدیل تب‌ها به Swiper افقی */
                    .product-tabs-wrapper {
                        padding: 0;
                        margin-bottom: 30px;
                        background: transparent;
                    }

                    .product-tab-list {
                        display: flex;
                        flex-direction: row;
                        overflow-x: auto;
                        scroll-snap-type: x mandatory;
                        scrollbar-width: none;
                        -ms-overflow-style: none;
                        gap: 10px;
                        padding: 10px 15px;
                        background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
                        border-radius: 50px;
                        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                    }

                        .product-tab-list::-webkit-scrollbar {
                            display: none;
                        }

                        .product-tab-list .nav-item {
                            flex: 0 0 auto;
                            scroll-snap-align: center;
                        }

                        .product-tab-list .nav-link {
                            white-space: nowrap;
                            padding: 12px 24px !important;
                            border-radius: 25px;
                            font-size: 14px;
                            font-weight: 500;
                            background: rgba(255, 255, 255, 0.9);
                            color: #333;
                            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                            transition: all 0.3s ease;
                            min-width: auto;
                        }

                            .product-tab-list .nav-link .tab-line,
                            .product-tab-list .nav-link .tab-arrow {
                                display: none;
                            }

                            .product-tab-list .nav-link.active {
                                background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
                                color: white;
                                transform: scale(1.05);
                                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                            }

                            .product-tab-list .nav-link:hover {
                                transform: translateY(-2px);
                                box-shadow: 0 4px 12px rgba(0,0,0,0.12);
                            }
                    /* محتوای تب */
                    .product-showcase-wrapper {
                        padding: 20px 15px;
                    }

                        .product-showcase-wrapper .row {
                            flex-direction: column-reverse;
                        }
                    /* بهبود نمایش تصویر */
                    .product-image-container {
                        margin-bottom: 30px;
                        padding: 20px 0;
                    }

                    .product-badge-wrapper {
                        max-width: 100%;
                        padding: 20px;
                        margin: 0 auto;
                    }

                    .product-image-extended {
                        transform: scale(1) translateX(0);
                        width: 100%;
                    }

                    .product-main-image {
                        max-width: 280px;
                        margin: 0 auto;
                        display: block;
                    }
                    /* بهبود محتوای متنی */
                    .product-info-content {
                        padding: 0 10px;
                    }

                        .product-info-content h2,
                        .product-info-content h3,
                        .product-info-content h4 {
                            font-size: 22px;
                            margin-bottom: 15px;
                            line-height: 1.4;
                        }

                        .product-info-content p {
                            font-size: 14px;
                            line-height: 1.7;
                            margin-bottom: 15px;
                        }
                    /* آیکون‌های ویژگی */
                    .product-features-inline {
                        justify-content: center;
                        gap: 15px;
                        margin: 20px 0;
                    }

                    .feature-icon-circle {
                        width: 45px;
                        height: 45px;
                    }

                        .feature-icon-circle i {
                            font-size: 18px;
                        }
                    /* دکمه‌ها */
                    .btn-product {
                        width: 100%;
                        text-align: center;
                        padding: 14px 30px;
                        font-size: 15px;
                    }
                    /* حذف toggle button در موبایل */
                    .product-tabs-toggle {
                        display: none !important;
                    }
                }
                /* Extra Small Devices */
                @media (max-width: 576px) {
                    .element-113-section {
                        padding: 40px 0 !important;
                    }

                    .product-tab-list {
                        padding: 0px 0px;
                        gap: 8px;
                    }

                        .product-tab-list .nav-link {
                            padding: 10px 20px !important;
                            font-size: 13px;
                        }

                    .product-info-content h2,
                    .product-info-content h3,
                    .product-info-content h4 {
                        font-size: 20px;
                    }

                    .product-info-content p {
                        font-size: 13px;
                    }

                    .feature-icon-circle {
                        width: 40px;
                        height: 40px;
                    }

                        .feature-icon-circle i {
                            font-size: 16px;
                        }

                    .product-main-image {
                        max-width: 240px;
                    }
                }
                /* Scroll Indicator for Tabs */
                @media (max-width: 991px) {
                    .product-tabs-wrapper::after {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 30px;
                        height: 100%;
                        background: linear-gradient(to right, transparent, rgba(255,255,255,0.5));
                        pointer-events: none;
                        opacity: 0;
                        transition: opacity 0.3s ease;
                    }

                    .product-tabs-wrapper.has-scroll::after {
                        opacity: 1;
                    }
                }
                /* Smooth Animations */
                @media (max-width: 991px) {
                    .tab-pane {
                        animation: fadeInUp 0.4s ease-out;
                    }

                    @keyframes fadeInUp {
                        from {
                            opacity: 0;
                            transform: translateY(20px);
                        }

                        to {
                            opacity: 1;
                            transform: translateY(0);
                        }
                    }
                }
                /* Touch-friendly Improvements */
                @media (max-width: 991px) and (hover: none) {
                    .product-tab-list .nav-link {
                        padding: 14px 26px !important;
                    }

                        .product-tab-list .nav-link:active {
                            transform: scale(0.98);
                        }
                }

                .feature-icon-circle i {
                    font-size: 16px;
                }
            }
    /* ========================================
   Element 109 - Call To Action 4 Styles
   ======================================== */
    /* Hero Subscribe Form */
    .hero-section .hero-subscribe-form {
        gap: 10px;
    }

        .hero-section .hero-subscribe-form input[type="email"] {
            flex: 1;
            padding: 12px 20px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .hero-section .hero-subscribe-form input[type="submit"] {
            padding: 12px 30px;
            border-radius: 8px;
            white-space: nowrap;
        }
    /* Subscribe Feature List */
    .hero-section .subscribe-feature-list {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

        .hero-section .subscribe-feature-list .nav-item span {
            font-size: 14px;
            color: #6c757d;
        }
    /* Hero Screen Wrap */
    .hero-section .hero-screen-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-section .phone-screen {
        position: relative;
        z-index: 2;
        max-width: 300px;
        margin-right: -100px;
    }

    .hero-section .mac-screen {
        position: relative;
        z-index: 1;
        max-width: 600px;
    }
    /* Animate Elements */
    .hero-section .animate-element {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    /* Color Shapes */
    .hero-section .color-shape-1 {
        top: -50px;
        right: -50px;
        max-width: 150px;
    }

    .hero-section .color-shape-2 {
        bottom: -30px;
        left: -40px;
        max-width: 120px;
    }

    .hero-section .color-shape-3 {
        top: 50%;
        right: -80px;
        max-width: 140px;
    }
    /* Hero Background */
    .hero-section .hero-background {
        z-index: 1;
    }

        .hero-section .hero-background img {
            object-fit: cover;
        }
    /* Responsive Styles */
    @media (max-width: 991px) {
        .hero-section .phone-screen {
            margin-right: 0;
            margin-bottom: 20px;
        }

        .hero-section .hero-screen-wrap {
            flex-direction: column;
        }
    }

    @media (max-width: 767px) {
        .hero-section .phone-screen {
            max-width: 250px;
        }

        .hero-section .mac-screen {
            max-width: 100%;
        }

        .hero-section .hero-subscribe-form {
            flex-direction: column;
        }

            .hero-section .hero-subscribe-form input[type="submit"] {
                width: 100%;
            }
    }

.feature-tab-list-2 .nav-item .nav-link.active p {
    color: #fff;
}
.hero-subscribe-form-wrap .hd-hero-form input.form-control {
    background-color: #fff0;
    transition: all 0.3s ease;
}
    .hero-subscribe-form-wrap .hd-hero-form input.form-control:focus {
        background-color: #f9f9f9;
        transition: all 0.3s ease;
    }
.hd-hero-form {
    background-color: #f2f2f20d;
}
    .feature-tab-list-2 .nav-item .nav-link.active p {
        color: #fff;
    }

    .hero-subscribe-form-wrap .hd-hero-form {
        padding: 3px 3px 3px 3px;
    }

        .hero-subscribe-form-wrap .hd-hero-form input.form-control:focus {
            background-color: #f9f9f9;
            transition: all 0.3s ease;
        }

        .hero-subscribe-form-wrap .hd-hero-form input.form-control {
            background-color: #fff0;
            transition: all 0.3s ease;
        }

    .bg-blur {
        background-color: rgba(232, 232, 232, 0.13) !important;
    }

    .feature-tab-section .category-tabs-wrapper button.category-nav-btn:hover, .feature-tab-section .category-tabs-wrapper button.category-nav-btn.active {
        background: var(--color-primary);
        color: #fff;
        box-shadow: 0 0px 16px var(--rgba-primary-4);
    }

.feature-tab-section .category-tabs-wrapper button.category-nav-btn {
    transition: all 0.3s ease;
    background: #7b7b7b;
    padding: 10px 20px;
}

/* Arrow Animation - Exit from top-right, Enter from bottom-left */
.aiart-un-btn-sm {
    overflow: hidden;
    position: relative;
}

    .aiart-un-btn-sm svg {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translate(0, 0);
    }

    .aiart-un-btn-sm:hover svg {
        animation: arrowExitEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

@keyframes arrowExitEnter {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    49% {
        transform: translate(30px, -30px);
        opacity: 0;
    }

    50% {
        transform: translate(-30px, 30px);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* Optional: Add background color transition */
.aiart-un-btn-sm {
    transition: background-color 0.3s ease;
}

    .aiart-un-btn-sm:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }
    .aiart-un-btn-sm:hover {
        background: rgba(255, 255, 255, 0.15);
    }

/* Category Tabs Styling */
.category-tabs-wrapper {
    margin-bottom: 2rem;
    padding: 1rem 0;
    border-bottom: 2px solid rgba(255,255,255,0.1);
}

.category-tab-list {
    gap: 1rem;
    flex-wrap: wrap;
}

.category-nav-btn {
    position: relative;
    padding: 1rem 2rem;
    border-radius: 50px;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.1);
    color: #fff;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    backdrop-filter: blur(10px);
}

    .category-nav-btn:hover {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.3);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .category-nav-btn.active {
        background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
        border-color: var(--bs-primary);
        box-shadow: 0 5px 20px rgba(var(--bs-primary-rgb), 0.4);
    }

.category-icon {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

.category-name {
    font-size: 1rem;
}

.category-count {
    background: rgba(255,255,255,0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.category-nav-btn.active .category-count {
    background: rgba(255,255,255,0.3);
}

/* Smooth Transitions for Tab Content */
.category-content .tab-pane {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.product-tab-list .nav-link {
    transition: all 0.3s ease;
}

/* Animation for Category Change */
.category-content .tab-pane.fade:not(.show) {
    opacity: 0;
    transform: translateX(-20px);
    display: contents;
}

.category-content .tab-pane.fade.show {
    opacity: 1;
    transform: translateX(0);
}

/* Mobile Responsive */
@@media (max-width: 768px) {
    .category-nav-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .category-icon {
        font-size: 1rem;
    }

    .category-name {
        font-size: 0.9rem;
    }

    .category-count {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }

    .category-tab-list {
        gap: 0.5rem;
    }
}

/* Enhance existing product tabs to work with categories */
.product-tabs-wrapper {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 150px);
}

    /* Custom Scrollbar for Category Tabs */
    .product-tabs-wrapper::-webkit-scrollbar {
        width: 6px;
    }

    .product-tabs-wrapper::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.05);
        border-radius: 10px;
    }

    .product-tabs-wrapper::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.2);
        border-radius: 10px;
    }

        .product-tabs-wrapper::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.3);
        }

a.nav-title.menu-title {
    padding: .85rem 1rem;
}
.article-content .b-title {
    color: #0d0d0d;
}
.article-content {
    margin-top: 1rem;
}
}

/*///element 74 custom css - Product Slider Style 320 - با افکت Slide Down///*/

.element-74 {
    position: relative;
    overflow: hidden;
}

.element-74 .el74-section-header {
    margin-bottom: 40px;
    text-align: center;
}

.element-74 .el74-mini-title {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.element-74 .el74-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
}

.element-74 .el74-section-description {
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.9;
}

/* دکمه‌های ناوبری اسلایدر */
.element-74 .el74-slider-nav {
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 18px;
}

.element-74 .el74-slider-nav:hover {
    background: var(--color-secondary, var(--color-primary));
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.element-74 .el74-slider-nav.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* کانتینر اسلایدر */
    .element-74 .el74-products-slider-container {
        position: relative;
        padding: 20px 0 40px;
        overflow: hidden;
    }

.element-74 .el74-products-swiper-@{element?.id} {
    overflow: visible;
}

/* استایل کارت‌های محصول - مشابه element 320 */
.element-74 .el74-product-card {
    position: relative;
    background: none;
    transition: all 0.4s ease;
    cursor: pointer;
    height: 100%;
    min-height: 440px;
}

/* باکس سفید پشت‌زمینه - 70% پایین */
.element-74 .el74-product-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: #ffffff;
    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.24);
    border-radius: 0;
    z-index: 0;
    transition: box-shadow 0.3s ease;
}

.element-74 .el74-product-card:hover::before {
    box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.3);
}

/* Overlay برای افکت Slide Down */
.element-74 .el74-product-card::after {
    content: '';
    position: absolute;
    top: 135px;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--card-gradient, linear-gradient(135deg, var(--color-primary, #0085CA), var(--color-secondary, #0066aa)));
    z-index: 0;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
}

.element-74 .el74-product-card:hover::after {
    height: 70%;
}

/* کانتینر داخلی */
.element-74 .el74-product-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 1;
}

/* بخش تصویر - 30% بالا */
.element-74 .el74-product-image-section {
    position: relative;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.element-74 .el74-product-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element-74 .el74-product-image-container img {
    max-height: 130%;
    max-width: 90%;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease;
}

.element-74 .el74-product-card:hover .el74-product-image-container img {
    transform: scale(1.05);
}

/* بخش محتوا - 70% پایین */
.element-74 .el74-product-content {
    position: relative;
    padding: 10px 20px 35px;
    text-align: center;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* عنوان محصول */
.element-74 .el74-product-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    color: var(--text-color, var(--bs-body-color, #000));
    transition: color 0.3s ease 0.1s;
}

.element-74 .el74-product-title *,
.element-74 .el74-product-title h1,
.element-74 .el74-product-title h2,
.element-74 .el74-product-title h3,
.element-74 .el74-product-title h4,
.element-74 .el74-product-title h5,
.element-74 .el74-product-title h6,
.element-74 .el74-product-title a,
.element-74 .el74-product-title span {
    color: inherit;
    transition: color 0.3s ease 0.1s;
    margin: 0;
    text-decoration: none;
}

.element-74 .el74-product-card:hover .el74-product-title,
.element-74 .el74-product-card:hover .el74-product-title * {
    color: white !important;
}

/* توضیحات محصول */
.element-74 .el74-product-description {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    color: var(--text-color, var(--bs-body-color, #666));
    transition: color 0.3s ease 0.1s;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.element-74 .el74-product-description *,
.element-74 .el74-product-description p {
    color: inherit;
    transition: color 0.3s ease 0.1s;
    margin: 0;
}

.element-74 .el74-product-card:hover .el74-product-description,
.element-74 .el74-product-card:hover .el74-product-description * {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* لینک محصول */
.element-74 .el74-product-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    transition: all 0.3s ease 0.1s;
    align-self: center;
    position: relative;
    z-index: 1;
    color: var(--text-color, var(--color-primary, #0085CA));
    font-size: 0.9rem;
}

.element-74 .el74-product-card:hover .el74-product-link {
    gap: 12px;
    color: white !important;
}

.element-74 .el74-product-link i {
    transition: transform 0.3s ease;
    color: inherit !important;
}

.element-74 .el74-product-card:hover .el74-product-link i {
    transform: translateX(-5px);
}

/* لینک کل کارت */
.element-74 .el74-product-card-link {
    position: absolute;
    inset: 0;
    z-index: 15;
    text-decoration: none;
}

/* فوتر بخش */
.element-74 .el74-footer-section {
    margin-top: 40px;
}

.element-74 .el74-buttons-wrapper {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/*.swiper{
    overflow:visible;
}*/

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 1199px) {
    .element-74 .el74-product-image-section {
        height: 220px;
    }

    .element-74 .el74-product-card {
        min-height: 400px;
    }

    .element-74 .el74-product-card::after {
        top: 120px;
    }
}

@media (max-width: 991px) {
    .element-74 .el74-section-title {
        font-size: 2rem;
    }

    .element-74 .el74-product-image-section {
        height: 200px;
    }

    .element-74 .el74-product-card {
        min-height: 380px;
    }

    .element-74 .el74-product-card::after {
        top: 110px;
    }

    .element-74 .el74-product-content {
        padding: 10px 15px 30px;
    }

    .element-74 .el74-buttons-wrapper {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .element-74 .el74-section-title {
        font-size: 1.75rem;
    }

    .element-74 .el74-product-image-section {
        height: 180px;
    }

    .element-74 .el74-product-card {
        min-height: 360px;
    }

    .element-74 .el74-product-card::after {
        top: 100px;
    }

    .element-74 .el74-product-title {
        font-size: 1rem;
    }

    .element-74 .el74-product-description {
        font-size: 0.9rem;
        -webkit-line-clamp: 2;
    }

    .element-74 .el74-slider-nav {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .element-74 .el74-footer-section .row {
        flex-direction: column;
        gap: 20px;
    }

    .element-74 .el74-buttons-wrapper {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .element-74 .el74-section-title {
        font-size: 1.5rem;
    }

    .element-74 .el74-product-image-section {
        height: 160px;
    }

    .element-74 .el74-product-card {
        min-height: 340px;
    }

    .element-74 .el74-product-card::after {
        top: 90px;
    }

    .element-74 .el74-product-content {
        padding: 8px 12px 25px;
    }

    .element-74 .el74-product-title {
        font-size: 0.95rem;
    }

    .element-74 .el74-slider-nav {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/*///element 320 custom css - Product Category List Style 2 - FIXED COLOR PRIORITY FROM PANEL///*/

.element-320 {
    position: relative;
    overflow: hidden;
}

/*///element 320 custom css - Product Category List Style 2 - FIXED COLOR PRIORITY FROM PANEL///*/

.element-320 {
    position: relative;
    overflow: hidden;
}

.element-320 .el320-main-content-area {
    position: relative;
    z-index: 2;
}

.element-320 .el320-section-header {
    margin-bottom: 50px;
    text-align: center;
}

.element-320 .el320-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    text-transform: uppercase;
}

.element-320 .el320-section-description {
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto;
}

/* Product Cards Grid Layout */
.element-320 .el320-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

/* Product Card Styles */
.element-320 .el320-product-card {
    position: relative;
    background: none;
    transition: all 0.4s ease;
    cursor: pointer;
    isolation: isolate;
}

/* باکس سفید پشت زمینه - 70% پایین */
.element-320 .el320-product-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: #ffffff;
    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.24);
    border-radius: 0;
    z-index: 0;
    transition: box-shadow 0.3s ease;
}

.element-320 .el320-product-card:hover::before {
    box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.3);
}

/* Overlay برای افکت Slide Down */
    .element-320 .el320-product-card::after {
        content: '';
        position: absolute;
        top: 160px; /* تغییر از bottom به top */
        left: 0;
        width: 100%;
        height: 0;
        background: var(--card-gradient, linear-gradient(135deg, var(--primary-color, #0085CA), var(--secondary-color, #0066aa)));
        z-index: 0;
        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0;
    }

    .element-320 .el320-product-card:hover::after {
        height: 70%;
    }

/* Container داخلی */
.element-320 .el320-product-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 1;
}

/* Attributes overlay - direct child of card, above card-link (z-index:10) */
.element-320 .product-attributes-overlay {
    top: 0;
    height: 300px;
    z-index: 15;
    align-items: center;
    pointer-events: none;
    overflow: hidden;
}
.element-320 .product-attributes-overlay [data-tooltip] {
    pointer-events: all;
}
@media (max-width: 991px) { .element-320 .product-attributes-overlay { height: 250px; } }
@media (max-width: 767px) { .element-320 .product-attributes-overlay { height: 220px; } }
@media (max-width: 480px) { .element-320 .product-attributes-overlay { height: 200px; } }

/* Image Section - 30% بالا */
.element-320 .el320-product-image-section {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.element-320 .el320-product-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element-320 .el320-product-image-container img {
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
}

.element-320 .el320-product-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: linear-gradient(135deg, rgba(0, 133, 202, 0.1), rgba(0, 102, 170, 0.1));
    color: var(--primary-color, #0085CA);
}

/* Content Section - 70% پایین */
.element-320 .el320-product-content {
    position: relative;
    padding: 0px 20px 35px;
    text-align: center;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    /* ========== MINI TITLE HOVER EFFECT - MINIMAL & ELEGANT ========== */

    .element-320 .el320-product-badge {
        display: inline-block;
        color: white;
        padding: 2px 40px;
        padding-top: 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 15px;
        transition: all 0.3s ease 0.1s;
        align-self: center;
        position: relative;
        cursor: pointer;
        overflow: hidden;
    }

        /* افکت زیر خط نازک */
        .element-320 .el320-product-badge::before {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 1px;
            background: rgba(255, 255, 255, 0.6);
            transition: width 0.3s ease;
        }

    /* حالت hover - زیر خط کشیده می‌شود */
    .element-320 .el320-product-card:hover .el320-product-badge::before {
        width: 70%;
    }

    /* افکت shadow نرم */
    .element-320 .el320-product-card:hover .el320-product-badge {
        background: white;
        color: var(--card-color, var(--primary-color, #0085CA));
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        transform: translateY(-2px);
    }

    /* افکت opacity برای متن */
    .element-320 .el320-product-badge {
        opacity: 0.95;
    }

    .element-320 .el320-product-card:hover .el320-product-badge {
        opacity: 1;
    }

    /* افکت نور از بالا (optional - می‌توانید حذف کنید) */
    .element-320 .el320-product-badge::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent );
        transition: left 0.5s ease;
    }

    .element-320 .el320-product-card:hover .el320-product-badge::after {
        left: 100%;
    }

/* ========== TITLE STYLES WITH CORRECT PRIORITY ========== */

/* حالت عادی - بدون !important برای اولویت CSS Variable */
.element-320 .el320-product-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    color: var(--text-color, var(--bs-body-color, #000));
    transition: color 0.3s ease 0.1s;
}

/* تمام تگ‌های داخل title - بدون !important */
.element-320 .el320-product-title *,
.element-320 .el320-product-title h1,
.element-320 .el320-product-title h2,
.element-320 .el320-product-title h3,
.element-320 .el320-product-title h4,
.element-320 .el320-product-title h5,
.element-320 .el320-product-title h6,
.element-320 .el320-product-title a,
.element-320 .el320-product-title span,
.element-320 .el320-product-title strong,
.element-320 .el320-product-title em,
.element-320 .el320-product-title b,
.element-320 .el320-product-title i,
.element-320 h1.el320-product-title,
.element-320 h2.el320-product-title,
.element-320 h3.el320-product-title,
.element-320 h4.el320-product-title,
.element-320 h5.el320-product-title,
.element-320 h6.el320-product-title {
    color: inherit;
    transition: color 0.3s ease 0.1s;
    margin: 0;
    font-weight: inherit;
    text-decoration: none;
}

/* حالت hover - با !important فقط اینجا */
.element-320 .el320-product-card:hover .el320-product-title,
.element-320 .el320-product-card:hover .el320-product-title *,
.element-320 .el320-product-card:hover .el320-product-title h1,
.element-320 .el320-product-card:hover .el320-product-title h2,
.element-320 .el320-product-card:hover .el320-product-title h3,
.element-320 .el320-product-card:hover .el320-product-title h4,
.element-320 .el320-product-card:hover .el320-product-title h5,
.element-320 .el320-product-card:hover .el320-product-title h6,
.element-320 .el320-product-card:hover .el320-product-title a,
.element-320 .el320-product-card:hover .el320-product-title span,
.element-320 .el320-product-card:hover .el320-product-title strong,
.element-320 .el320-product-card:hover .el320-product-title em,
.element-320 .el320-product-card:hover .el320-product-title b,
.element-320 .el320-product-card:hover .el320-product-title i,
.element-320 .el320-product-card:hover h1.el320-product-title,
.element-320 .el320-product-card:hover h2.el320-product-title,
.element-320 .el320-product-card:hover h3.el320-product-title,
.element-320 .el320-product-card:hover h4.el320-product-title,
.element-320 .el320-product-card:hover h5.el320-product-title,
.element-320 .el320-product-card:hover h6.el320-product-title {
    color: var(--text-color-hover, var(--text-color, #fff)) !important;
}

/* ========== DESCRIPTION STYLES WITH CORRECT PRIORITY ========== */

/* حالت عادی - بدون !important */
.element-320 .el320-product-description {
    font-size: 1.125rem;
    line-height: 1.33;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    color: var(--text-color, var(--bs-body-color, #000));
    transition: color 0.3s ease 0.1s;
    margin-top:0.4rem;

}

/* تمام تگ‌های داخل description - بدون !important */
.element-320 .el320-product-description *,
.element-320 .el320-product-description h1,
.element-320 .el320-product-description h2,
.element-320 .el320-product-description h3,
.element-320 .el320-product-description h4,
.element-320 .el320-product-description h5,
.element-320 .el320-product-description h6,
.element-320 .el320-product-description p,
.element-320 .el320-product-description a,
.element-320 .el320-product-description span,
.element-320 .el320-product-description strong,
.element-320 .el320-product-description em,
.element-320 .el320-product-description b,
.element-320 .el320-product-description i,
.element-320 h1.el320-product-description,
.element-320 h2.el320-product-description,
.element-320 h3.el320-product-description,
.element-320 h4.el320-product-description,
.element-320 h5.el320-product-description,
.element-320 h6.el320-product-description {
    color: inherit;
    transition: color 0.3s ease 0.1s;
    margin: 0;
    font-weight: inherit;
    text-decoration: none;
}

/* حالت hover - با !important فقط اینجا */
.element-320 .el320-product-card:hover .el320-product-description,
.element-320 .el320-product-card:hover .el320-product-description *,
.element-320 .el320-product-card:hover .el320-product-description h1,
.element-320 .el320-product-card:hover .el320-product-description h2,
.element-320 .el320-product-card:hover .el320-product-description h3,
.element-320 .el320-product-card:hover .el320-product-description h4,
.element-320 .el320-product-card:hover .el320-product-description h5,
.element-320 .el320-product-card:hover .el320-product-description h6,
.element-320 .el320-product-card:hover .el320-product-description p,
.element-320 .el320-product-card:hover .el320-product-description a,
.element-320 .el320-product-card:hover .el320-product-description span,
.element-320 .el320-product-card:hover .el320-product-description strong,
.element-320 .el320-product-card:hover .el320-product-description em,
.element-320 .el320-product-card:hover .el320-product-description b,
.element-320 .el320-product-card:hover .el320-product-description i,
.element-320 .el320-product-card:hover h1.el320-product-description,
.element-320 .el320-product-card:hover h2.el320-product-description,
.element-320 .el320-product-card:hover h3.el320-product-description,
.element-320 .el320-product-card:hover h4.el320-product-description,
.element-320 .el320-product-card:hover h5.el320-product-description,
.element-320 .el320-product-card:hover h6.el320-product-description {
    color: var(--text-color-hover, var(--text-color, #fff)) !important;
}

/* ========== LINK STYLES ========== */
.element-320 .el320-product-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease 0.1s;
    align-self: center;
    position: relative;
    z-index: 1;
    color: var(--text-color, var(--primary-color, #0085CA));
}

.element-320 .el320-product-card:hover .el320-product-link {
    gap: 12px;
    color: var(--text-color-hover, var(--text-color, #fff)) !important;
}

.element-320 .el320-product-link i {
    transition: transform 0.3s ease;
    color: inherit !important;
}

.element-320 .el320-product-card:hover .el320-product-link i {
    transform: translateX(-5px);
}

/* Link کل کارت */
.element-320 .el320-product-card-link {
    position: absolute;
    inset: 0;
    z-index: 10;
    text-decoration: none;
}

/* Buttons */
.element-320 .el320-element-buttons {
    text-align: center;
    margin-top: 60px;
}

/* ========== RESPONSIVE DESIGN ========== */

/* Tablets and Small Desktops */
@media (max-width: 991px) {
    .element-320 .el320-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .element-320 .el320-section-title {
        font-size: 2rem;
    }

    .element-320 .el320-product-image-section {
        height: 250px;
    }

    .element-320 .el320-product-content {
        padding: 20px 30px 30px;
    }
}

/* Mobile Devices */
@media (max-width: 767px) {
    .element-320 .el320-products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .element-320 .el320-section-title {
        font-size: 1.75rem;
    }

    .element-320 .el320-product-image-section {
        height: 220px;
    }

    .element-320 .el320-product-content {
        padding: 15px 20px 25px;
    }

    .element-320 .el320-product-title {
        font-size: 1.1rem;
    }

    .element-320 .el320-product-description {
        font-size: 1rem;
    }
}


/* Very Small Devices */
@media (max-width: 480px) {
    .element-320 .el320-section-title {
        font-size: 1.5rem;
    }

    .element-320 .el320-product-image-section {
        height: 200px;
    }

    .element-320 .el320-product-content {
        padding: 12px 15px 20px;
    }

    .element-320 .el320-product-title {
        font-size: 1rem;
    }

    .element-320 .el320-product-description {
        font-size: 0.9rem;
    }
    .element-320 .el320-product-card::after {
        content: '';
        position: absolute;
        top: 125px; /* تغییر از bottom به top */
        left: 0;
        width: 100%;
        height: 0;
        background: var(--card-gradient, linear-gradient(135deg, var(--primary-color, #0085CA), var(--secondary-color, #0066aa)));
        z-index: 0;
        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0;
    }

    .element-320 .el320-product-card:hover::after {
        height: 70%;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .element-320 .el320-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .element-320 .el320-section-title {
        font-size: 2rem;
    }

    .element-320 .el320-product-content {
        padding: 20px 30px 30px;
    }
}

@media (max-width: 767px) {
    .element-320 .el320-products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .element-320 .el320-section-title {
        font-size: 1.75rem;
    }

    .element-320 .el320-product-image-section {
        height: 220px;
        padding: 20px 30px;
    }

    .element-320 .el320-product-content {
        padding: 15px 20px 25px;
    }

    .element-320 .el320-product-title {
        font-size: 1.1rem;
    }

    .element-320 .el320-product-description {
        font-size: 1rem;
    }
}

.element-320 .el320-main-content-area {
    position: relative;
    z-index: 2;
}

.element-320 .el320-section-header {
    margin-bottom: 50px;
    text-align: center;
}

.element-320 .el320-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    text-transform: uppercase;
}

.element-320 .el320-section-description {
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto;
}

/* Product Cards Grid Layout */
.element-320 .el320-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

/* Product Card Styles */
.element-320 .el320-product-card {
    position: relative;
    background: none;
    transition: all 0.4s ease;
    cursor: pointer;
    isolation: isolate;
}

/* باکس سفید پشت زمینه - 70% پایین */
.element-320 .el320-product-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: #ffffff;
    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.24);
    border-radius: 0;
    z-index: 0;
    transition: box-shadow 0.3s ease;
}

.element-320 .el320-product-card:hover::before {
    box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.3);
}

/* Overlay برای افکت Slide Down */
.element-320 .el320-product-card::after {
    content: '';
    position: absolute;
    top: 142px; /* تغییر از bottom به top */
    left: 0;
    width: 100%;
    height: 0;
    background: var(--card-gradient, linear-gradient(135deg, var(--primary-color, #0085CA), var(--secondary-color, #0066aa)));
    z-index: 0;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
}

.element-320 .el320-product-card:hover::after {
    height: 70%;
}

/* Container داخلی */
.element-320 .el320-product-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 1;
}

/* Image Section - 30% بالا */
.element-320 .el320-product-image-section {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.element-320 .el320-product-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element-320 .el320-product-image-container img {
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
}

.element-320 .el320-product-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: linear-gradient(135deg, rgba(0, 133, 202, 0.1), rgba(0, 102, 170, 0.1));
    color: var(--primary-color, #0085CA);
}

/* Content Section - 70% پایین */
.element-320 .el320-product-content {
    position: relative;
    padding: 0px 20px 35px;
    text-align: center;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    /* ========== MINI TITLE HOVER EFFECT - MINIMAL & ELEGANT ========== */

    .element-320 .el320-product-badge {
        display: inline-block;
        color: white;
        padding: 2px 40px;
        padding-top: 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 15px;
        transition: all 0.3s ease 0.1s;
        align-self: center;
        position: relative;
        cursor: pointer;
        overflow: hidden;
    }

        /* افکت زیر خط نازک */
        .element-320 .el320-product-badge::before {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 1px;
            background: rgba(255, 255, 255, 0.6);
            transition: width 0.3s ease;
        }

    /* حالت hover - زیر خط کشیده می‌شود */
    .element-320 .el320-product-card:hover .el320-product-badge::before {
        width: 70%;
    }

    /* افکت shadow نرم */
    .element-320 .el320-product-card:hover .el320-product-badge {
        background: white;
        color: var(--card-color, var(--primary-color, #0085CA));
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        transform: translateY(-2px);
    }

    /* افکت opacity برای متن */
    .element-320 .el320-product-badge {
        opacity: 0.95;
    }

    .element-320 .el320-product-card:hover .el320-product-badge {
        opacity: 1;
    }

    /* افکت نور از بالا (optional - می‌توانید حذف کنید) */
    .element-320 .el320-product-badge::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent );
        transition: left 0.5s ease;
    }

    .element-320 .el320-product-card:hover .el320-product-badge::after {
        left: 100%;
    }

/* ========== TITLE STYLES WITH CORRECT PRIORITY ========== */

/* حالت عادی - بدون !important برای اولویت CSS Variable */
.element-320 .el320-product-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    color: var(--text-color, var(--bs-body-color, #000));
    transition: color 0.3s ease 0.1s;
}

/* تمام تگ‌های داخل title - بدون !important */
.element-320 .el320-product-title *,
.element-320 .el320-product-title h1,
.element-320 .el320-product-title h2,
.element-320 .el320-product-title h3,
.element-320 .el320-product-title h4,
.element-320 .el320-product-title h5,
.element-320 .el320-product-title h6,
.element-320 .el320-product-title a,
.element-320 .el320-product-title span,
.element-320 .el320-product-title strong,
.element-320 .el320-product-title em,
.element-320 .el320-product-title b,
.element-320 .el320-product-title i,
.element-320 h1.el320-product-title,
.element-320 h2.el320-product-title,
.element-320 h3.el320-product-title,
.element-320 h4.el320-product-title,
.element-320 h5.el320-product-title,
.element-320 h6.el320-product-title {
    color: inherit;
    transition: color 0.3s ease 0.1s;
    margin: 0;
    font-weight: inherit;
    text-decoration: none;
}

/* حالت hover - با !important فقط اینجا */
.element-320 .el320-product-card:hover .el320-product-title,
.element-320 .el320-product-card:hover .el320-product-title *,
.element-320 .el320-product-card:hover .el320-product-title h1,
.element-320 .el320-product-card:hover .el320-product-title h2,
.element-320 .el320-product-card:hover .el320-product-title h3,
.element-320 .el320-product-card:hover .el320-product-title h4,
.element-320 .el320-product-card:hover .el320-product-title h5,
.element-320 .el320-product-card:hover .el320-product-title h6,
.element-320 .el320-product-card:hover .el320-product-title a,
.element-320 .el320-product-card:hover .el320-product-title span,
.element-320 .el320-product-card:hover .el320-product-title strong,
.element-320 .el320-product-card:hover .el320-product-title em,
.element-320 .el320-product-card:hover .el320-product-title b,
.element-320 .el320-product-card:hover .el320-product-title i,
.element-320 .el320-product-card:hover h1.el320-product-title,
.element-320 .el320-product-card:hover h2.el320-product-title,
.element-320 .el320-product-card:hover h3.el320-product-title,
.element-320 .el320-product-card:hover h4.el320-product-title,
.element-320 .el320-product-card:hover h5.el320-product-title,
.element-320 .el320-product-card:hover h6.el320-product-title {
    color: white !important;
}

/* ========== DESCRIPTION STYLES WITH CORRECT PRIORITY ========== */

/* حالت عادی - بدون !important */
.element-320 .el320-product-description {
    font-size: 1.125rem;
    line-height: 1.33;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    color: var(--text-color, var(--bs-body-color, #000));
    transition: color 0.3s ease 0.1s;
}

/* تمام تگ‌های داخل description - بدون !important */
.element-320 .el320-product-description *,
.element-320 .el320-product-description h1,
.element-320 .el320-product-description h2,
.element-320 .el320-product-description h3,
.element-320 .el320-product-description h4,
.element-320 .el320-product-description h5,
.element-320 .el320-product-description h6,
.element-320 .el320-product-description p,
.element-320 .el320-product-description a,
.element-320 .el320-product-description span,
.element-320 .el320-product-description strong,
.element-320 .el320-product-description em,
.element-320 .el320-product-description b,
.element-320 .el320-product-description i,
.element-320 h1.el320-product-description,
.element-320 h2.el320-product-description,
.element-320 h3.el320-product-description,
.element-320 h4.el320-product-description,
.element-320 h5.el320-product-description,
.element-320 h6.el320-product-description {
    color: inherit;
    transition: color 0.3s ease 0.1s;
    margin: 0;
    font-weight: inherit;
    text-decoration: none;
}

/* حالت hover - با !important فقط اینجا */
.element-320 .el320-product-card:hover .el320-product-description,
.element-320 .el320-product-card:hover .el320-product-description *,
.element-320 .el320-product-card:hover .el320-product-description h1,
.element-320 .el320-product-card:hover .el320-product-description h2,
.element-320 .el320-product-card:hover .el320-product-description h3,
.element-320 .el320-product-card:hover .el320-product-description h4,
.element-320 .el320-product-card:hover .el320-product-description h5,
.element-320 .el320-product-card:hover .el320-product-description h6,
.element-320 .el320-product-card:hover .el320-product-description p,
.element-320 .el320-product-card:hover .el320-product-description a,
.element-320 .el320-product-card:hover .el320-product-description span,
.element-320 .el320-product-card:hover .el320-product-description strong,
.element-320 .el320-product-card:hover .el320-product-description em,
.element-320 .el320-product-card:hover .el320-product-description b,
.element-320 .el320-product-card:hover .el320-product-description i,
.element-320 .el320-product-card:hover h1.el320-product-description,
.element-320 .el320-product-card:hover h2.el320-product-description,
.element-320 .el320-product-card:hover h3.el320-product-description,
.element-320 .el320-product-card:hover h4.el320-product-description,
.element-320 .el320-product-card:hover h5.el320-product-description,
.element-320 .el320-product-card:hover h6.el320-product-description {
    color: white !important;
}

/* ========== LINK STYLES ========== */
.element-320 .el320-product-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease 0.1s;
    align-self: center;
    position: relative;
    z-index: 1;
    color: var(--text-color, var(--primary-color, #0085CA));
}

.element-320 .el320-product-card:hover .el320-product-link {
    gap: 12px;
    color: white !important;
}

.element-320 .el320-product-link i {
    transition: transform 0.3s ease;
    color: inherit !important;
}

.element-320 .el320-product-card:hover .el320-product-link i {
    transform: translateX(-5px);
}

/* Link کل کارت */
.element-320 .el320-product-card-link {
    position: absolute;
    inset: 0;
    z-index: 10;
    text-decoration: none;
}

/* Buttons */
.element-320 .el320-element-buttons {
    text-align: center;
    margin-top: 60px;
}

/* ========== RESPONSIVE DESIGN ========== */

/* Tablets and Small Desktops */
@media (max-width: 991px) {
    .element-320 .el320-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .element-320 .el320-section-title {
        font-size: 2rem;
    }

    .element-320 .el320-product-image-section {
        height: 250px;
    }

    .element-320 .el320-product-content {
        padding: 20px 30px 30px;
    }
}

/* Mobile Devices */
@media (max-width: 767px) {
    .element-320 .el320-products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .element-320 .el320-section-title {
        font-size: 1.75rem;
    }

    .element-320 .el320-product-image-section {
        height: 220px;
    }

    .element-320 .el320-product-content {
        padding: 15px 20px 25px;
    }

    .element-320 .el320-product-title {
        font-size: 1.1rem;
    }

    .element-320 .el320-product-description {
        font-size: 1rem;
    }
}




/* Very Small Devices */
@media (max-width: 480px) {
    .element-320 .el320-section-title {
        font-size: 1.5rem;
    }

    .element-320 .el320-product-image-section {
        height: 200px;
    }

    .element-320 .el320-product-content {
        padding: 12px 15px 20px;
    }

    .element-320 .el320-product-title {
        font-size: 1rem;
    }

    .element-320 .el320-product-description {
        font-size: 0.9rem;
    }
    .element-320 .el320-product-card::after {
        content: '';
        position: absolute;
        top: 125px; /* تغییر از bottom به top */
        left: 0;
        width: 100%;
        height: 0;
        background: var(--card-gradient, linear-gradient(135deg, var(--primary-color, #0085CA), var(--secondary-color, #0066aa)));
        z-index: 0;
        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0;
    }

    .element-320 .el320-product-card:hover::after {
        height: 70%;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .element-320 .el320-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .element-320 .el320-section-title {
        font-size: 2rem;
    }

    .element-320 .el320-product-content {
        padding: 20px 30px 30px;
    }
}

@media (max-width: 767px) {
    .element-320 .el320-products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .element-320 .el320-section-title {
        font-size: 1.75rem;
    }

    .element-320 .el320-product-image-section {
        height: 220px;
        padding: 20px 30px;
    }

    .element-320 .el320-product-content {
        padding: 15px 20px 25px;
    }

    .element-320 .el320-product-title {
        font-size: 1.1rem;
    }

    .element-320 .el320-product-description {
        font-size: 1rem;
    }
}




.video-player-wrapper .play-overlay .fa-play {
    font-size: 20px;
    margin-left: 4px;
    color: var(--primary-color);
}
/* ========================================
   🗺️ ELEMENT 115: STORES WITH MAP STYLES
   ======================================== */

/* نقشه‌های Leaflet سفارشی برای فروشگاه‌ها */
.stores-map-section {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

    .stores-map-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, var(--rgba-primary-1) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        animation: float 20s ease-in-out infinite;
    }

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-20px, 20px) scale(1.1);
    }
}

.stores-map-section .container {
    position: relative;
    z-index: 1;
}

/* Store Card - کارت فروشگاه */
.store-card {
    background: white;
    border: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

    .store-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s ease;
    }

    .store-card:hover::before {
        transform: scaleX(1);
        transform-origin: left;
    }

    .store-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 25px 50px var(--rgba-primary-3) !important;
    }

/* Map Wrapper - Container اصلی */
.store-map-wrapper {
    position: relative;
    width: 100%;
    height: 350px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    overflow: hidden;
}

    .store-map-wrapper::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
        z-index: 999;
        pointer-events: none;
    }

/* Map Container */
.store-map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Map Placeholder با نقشه جهان */
.map-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4f8 0%, #e8eef3 100%);
    z-index: 2;
    transition: opacity 0.5s ease;
}

    .map-placeholder.hidden {
        opacity: 0;
        pointer-events: none;
    }

.world-map-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    animation: pulse-map 3s ease-in-out infinite;
}

@keyframes pulse-map {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

.map-spinner {
    position: relative;
    z-index: 3;
    text-align: center;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Leaflet Map */
.leaflet-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

    .leaflet-map.loaded {
        opacity: 1 !important;
        z-index: 2;
    }

/* Directions Button */
.map-directions-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: white !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
    box-shadow: 0 8px 20px var(--rgba-primary-3);
    white-space: nowrap;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

    .map-directions-btn:hover {
        border-color: transparent !important;
        transform: translateX(-50%) translateY(-2px);
        box-shadow: 0 12px 30px var(--rgba-primary-4);
    }

/* Store Info - اطلاعات فروشگاه */
.store-info {
    border-top: 4px solid var(--color-primary);
    padding: 2rem;
    background: white;
    position: relative;
}

    .store-info::before {
        content: '';
        position: absolute;
        top: 0;
        left: 2rem;
        right: 2rem;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--rgba-primary-2), transparent);
    }

/* Store Header */
.store-header {
    position: relative;
}

.store-icon-wrapper {
    position: relative;
}

.store-icon {
    width: 65px;
    height: 65px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    box-shadow: 0 8px 20px var(--rgba-primary-3);
    transition: all 0.3s ease;
}

.store-card:hover .store-icon {
    transform: scale(1.1);
    box-shadow: 0 12px 30px var(--rgba-primary-4);
}

.store-icon-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 0.75rem;
    color: var(--color-primary);
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.store-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}

    .store-title strong {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-right: 1rem;
    }

/* Store Description */
.store-description {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--rgba-primary-1) 0%, var(--rgba-primary-1) 100%);
    border-radius: 12px;
    border-right: 3px solid var(--color-primary);
    margin-top: 1.5rem;
}

.description-icon {
    width: 35px;
    height: 35px;
    min-width: 35px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 1rem;
    box-shadow: 0 4px 12px var(--rgba-primary-2);
}

.description-text {
    flex: 1;
    line-height: 1.8;
    font-size: 0.95rem;
    color: var(--text-sec);
}

    .description-text p {
        margin-bottom: 0.5rem;
    }

        .description-text p:last-child {
            margin-bottom: 0;
        }

    .description-text ul,
    .description-text ol {
        padding-right: 1.5rem;
        margin-bottom: 0.5rem;
    }

/* Store Actions */
.store-actions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--rgba-primary-2);
}

.store-action-btn {
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .store-action-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        transition: left 0.3s ease;
        z-index: -1;
    }

    .store-action-btn:hover::before {
        left: 0;
    }

    .store-action-btn:hover {
        color: white !important;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px var(--rgba-primary-3);
    }

/* Leaflet Custom Overrides */
.leaflet-container {
    font-family: inherit !important;
    font-size: 14px;
    width: 100% !important;
    height: 100% !important;
}

.leaflet-pane {
    width: 100% !important;
    height: 100% !important;
}

.leaflet-map-pane {
    width: 100% !important;
    height: 100% !important;
}

.leaflet-tile-pane {
    width: 100% !important;
    height: 100% !important;
}

.leaflet-popup-content-wrapper {
    border-radius: 16px !important;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-content {
    margin: 0;
    padding: 1.25rem;
    min-width: 200px;
}

.leaflet-popup-tip {
    background: white !important;
}

.leaflet-control-zoom a {
    color: #333 !important;
}

    .leaflet-control-zoom a:hover {
        background: #f4f4f4 !important;
    }

/* Custom Marker Popup */
.custom-popup {
    text-align: center;
}

    .custom-popup h6 {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: bold;
        margin-bottom: 0.75rem;
        font-size: 1.1rem;
    }

    .custom-popup p {
        margin: 0 0 1rem 0;
        font-size: 0.9rem;
        color: #6c757d;
    }

    .custom-popup .btn {
        font-size: 0.875rem;
        padding: 0.6rem 1.5rem;
        border-radius: 50px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        border: none;
        font-weight: 600;
    }

/* Responsive Styles */
@media (max-width: 768px) {
    .stores-map-section::before {
        width: 400px;
        height: 400px;
        right: -20%;
    }

    .store-map-wrapper {
        height: 300px !important;
    }

    .store-info {
        padding: 1.5rem !important;
    }

    .store-icon {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
        padding: 0.75rem !important;
    }

        .store-icon i {
            font-size: 1.5rem !important;
        }

    .store-title {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .stores-map-section {
        padding: 3rem 0 !important;
    }
}

/* Animation */
@keyframes fadeInUp-store {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.store-card {
    animation: fadeInUp-store 0.6s ease-out;
}

/* Background Gradient Class */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

/* Print Styles */
@media print {
    .store-map-wrapper {
        height: 400px !important;
        page-break-inside: avoid;
    }

    .stores-map-section::before {
        display: none;
    }

    .map-placeholder {
        display: none !important;
    }
}
.product-attributes-overlay {
    position: absolute;
    top: 50%;
    left: 8px;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
}

.attr-group-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background-color: #e4e4e44a;
    padding: 10px 3px;
    border-radius: 4px;
}
    .attr-group-col img, .attr-group-col .color-swatch {
        width: 35px;
        height: 35px;
    }


.attr-more-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    cursor: default;
    line-height: 1;
}
/* =============================================================================
   ELEMENT 15 - Services List Icon Grid
   ============================================================================= */
.el-15 .el-15-mini-title * { margin: 0; }
.el-15 .el-15-title * { margin: 0; }
.el-15 .el-15-desc * { margin: 0; }
.el-15 .el-15-mini-title { margin-bottom: 0.5rem; }
.el-15 .el-15-title { margin-bottom: 0.75rem; }
.el-15 .el-15-desc { margin-bottom: 0; }

/* Feature Card */
.el-15 .el-15-feature-card {
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}
.el-15 .el-15-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1) !important;
    border-color: var(--rgba-primary-2);
}
.el-15 .el-15-feature-card--large {
    border-right: 4px solid var(--color-primary);
}

/* Icon Box */
.el-15 .el-15-icon-box {
    width: 60px;
    height: 60px;
    background-color: var(--rgba-primary-1);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.el-15 .el-15-icon-box i {
    font-size: 1.5rem;
    color: var(--color-primary);
}

/* Content */
.el-15 .el-15-feature-content {
    flex: 1;
}
.el-15 .el-15-card-title { margin-bottom: 0.75rem; }
.el-15 .el-15-card-title * { margin: 0; font-size: 1.1rem;  }
.el-15 .el-15-card-desc { margin-bottom: 0.5rem; }
.el-15 .el-15-card-desc * { margin: 0; color: var(--bs-body-color); }
    .el-15 .el-15-card-desc ul, .el-15 .el-15-card-title ul {
        padding-left: 0;
    }
el-15-card-title
/* Checklist */
.el-15 .el-15-checklist p { font-size: 0.95rem; }
.el-15 .el-15-check-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.9rem;
}
.el-15 .el-15-check-item i {
    color: var(--color-primary);
    font-size: 1rem;
    flex-shrink: 0;
}
.service-card-36 ul {
    padding: 5px;
}
/* Card Link */
.el-15 .el-15-card-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    gap: 6px;
    margin-top: auto;
    padding-top: 1rem;
    transition: gap 0.3s ease;
}
.el-15 .el-15-card-link:hover { gap: 10px; color: var(--color-primary); }

@media (max-width: 991px) {
    .el-15 .el-15-feature-card--large { border-right: none; border-top: 4px solid var(--color-primary); }
}
/* =============================================================================
   ELEMENT 121 - Corporate Services Slider
   ============================================================================= */
.el121-corporate-slider { position: relative; }
.el121-mini-title { background: linear-gradient(to right, rgba(17, 27, 50, 1.0), rgba(255, 255, 255, 0.0)); color: #fff; }
.el121-title { color: #fff; }
.el121-description { color: rgba(255,255,255,.7); }
.el121-btn-next { }
.el121-btn-prev { }
.el121-btn-prev, .el121-btn-next {
    cursor: pointer;
    border-color: rgba(255,255,255,.2) !important;
    color: #fff;
    transition: all .3s;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 0 !important;
    background: #faebd72e;
}
    .el121-btn-prev:after, .el121-btn-next:after {
        font-size: 17px;
        content: none;
    }
    .el121-btn-prev:hover, .el121-btn-next:hover {
        border-color: #fff !important;
        background: #fff;
        color: #232323;
    }

    .el121-card {
        cursor: pointer;
        min-height: 420px;
        position: relative;
        overflow: hidden;
    }

        .el121-card img.w-100.h-100 {
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

    .el121-overlay-base {
        background: linear-gradient(to top, rgba(22,35,64,.9) 0%, transparent 80%);
        z-index: 1;
        transition: opacity .4s;
    }

    .el121-overlay-hover {
        background: linear-gradient(to top, var(--base-color, #3C2FC0) 0%, transparent 100%);
        z-index: 2;
        opacity: 0;
        transition: opacity .4s;
    }

    .el121-card.el121-has-desc:hover .el121-overlay-hover,
    .el121-card.el121-has-desc.el121-hovered .el121-overlay-hover {
        opacity: .85;
    }
.el121-content h1, .el121-content h2, .el121-content h3, .el121-content h4 {
    line-height: 1.2;
}
.el121-content {
    z-index: 3;
    padding: 1.5rem 1.5rem 2.5rem;
    box-sizing: border-box;
}
.el121-corporate-slider h1, .el121-corporate-slider h2, .el121-corporate-slider h3, .el121-corporate-slider h4 {
    line-height: 1.2;
}
.el121-badge {
    background-color: var(--base-color, #3C2FC0);
}
    /* Keep the resting copy low; expand it upward only when a long description is shown. */
    .el121-copy-area {
        min-height: 112px;
        transition: min-height .4s ease;
    }

    .el121-title-area {
        min-height: 0;
    }

    .el121-card-title {
        display: block;
    }

    .el121-cta-row {
        min-height: 72px;
        margin-top: 10px;
        align-items: flex-start;
        transition: min-height .4s ease;
    }

    /* bottom-area reserves room for multi-line descriptions. */
    .el121-bottom-area {
        position: relative;
        min-height: 72px;
        flex: 1;
        transition: min-height .4s ease;
    }

    .el121-card.el121-has-desc:hover .el121-copy-area,
    .el121-card.el121-has-desc.el121-hovered .el121-copy-area {
        min-height: 152px;
    }

    .el121-card.el121-has-desc:hover .el121-cta-row,
    .el121-card.el121-has-desc.el121-hovered .el121-cta-row,
    .el121-card.el121-has-desc:hover .el121-bottom-area,
    .el121-card.el121-has-desc.el121-hovered .el121-bottom-area {
        min-height: 112px;
    }
    /* subtitle: visible by default, fades out on hover */
    .el121-subtitle {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .3s ease, transform .3s ease;
    }
    /* hover-reveal: absolutely overlays subtitle so no layout shift */
    .el121-hover-reveal {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .4s ease, transform .4s ease;
        pointer-events: none;
        line-height: 1.65;
    }

    /* subtitle فقط وقتی description وجود داره fade-out بشه */
    .el121-card.el121-has-desc:hover .el121-subtitle,
    .el121-card.el121-has-desc.el121-hovered .el121-subtitle {
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity .3s ease, transform .3s ease;
    }

    /* فقط وقتی description وجود داره انیمیشن hover-reveal اجرا بشه */
    .el121-card.el121-has-desc:hover .el121-hover-reveal,
    .el121-card.el121-has-desc.el121-hovered .el121-hover-reveal {
        opacity: .9;
        transform: translateY(0);
        pointer-events: auto;
    }

    .el121-arrow {
        opacity: 0;
        transition: opacity .35s ease, transform .35s ease;
        transform: translateX(8px);
    }

    /* ردیف دکمه + متن - حالت پیش‌فرض */
    .el121-arrow-row {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .35s ease, transform .35s ease;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    /* متن کنار دکمه */
    .el121-arrow-label {
        opacity: 0;
        transform: translateX(-8px);
        transition: opacity .35s ease .1s, transform .35s ease .1s;
        white-space: nowrap;
        flex: 1;
    }

    .el121-card:hover .el121-arrow-row,
    .el121-card.el121-hovered .el121-arrow-row {
        opacity: 1;
        transform: translateY(0);
    }

    .el121-card:hover .el121-arrow-label,
    .el121-card.el121-hovered .el121-arrow-label {
        opacity: 1;
        transform: translateX(0);
    }

    .el121-card:hover .el121-arrow,
    .el121-card.el121-hovered .el121-arrow {
        opacity: 1;
        transform: translateX(0);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        flex-shrink: 0;
        align-self: flex-end;
    }

    .el121-link-overlay {
        z-index: 4;
        pointer-events: none;
    }

    .el121-card:hover .el121-link-overlay,
    .el121-card.el121-hovered .el121-link-overlay {
        pointer-events: auto;
    }

    .el121-cta-text {
        color: #fff;
    }

    .el121-cta-link {
        color: #fff;
    }

    .ticker-item {
        font-size: 26px;
    }

    .border-radius-6px {
        border-radius: 6px !important;
    }
/* =============================================================================
   ELEMENT 122 - Customer Testimonials Section
   ============================================================================= */
.el122-testimonials {
    position: relative;
    overflow: hidden;
}

/* Header */
.el122-mini-title * { margin: 0; }
.el122-title * { margin: 0; }
.el122-description * { margin: 0; }
.el122-mini-title { margin-bottom: .5rem; font-size: .875rem; font-weight: 600; color: var(--color-primary); }
.el122-title { margin-bottom: .625rem; font-size: 2rem; font-weight: 700; line-height: 1.3; }
.el122-description { opacity: .8; line-height: 1.7; }

/* ─── Section 1: Testimonial Slider ─── */
.el122-testimonials-section { margin-bottom: 4rem; }

.el122-tcard {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.1);
    transition: box-shadow .3s ease;
    /* Desktop: horizontal layout */
    display: flex;
    flex-direction: row;
}
.el122-tcard:hover { box-shadow: 0 10px 36px rgba(0,0,0,.16); }

.el122-tcard-img-wrap {
    width: 180px;
    height: 100%;
    flex-shrink: 0;
}
.el122-tcard-img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    display: block;
    min-height: 180px;
}

.el122-tcard-body {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
    flex: 1;
}
.el122-tcard-category {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
}
.el122-tcard-quote {
    font-size: 1.1rem;
    line-height: 1.8;
    font-style: italic;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--bs-body-color);
}
.el122-tcard-quote::before { content: "\201C"; font-size: 2.5rem; line-height: 0; vertical-align: -.5em; color: var(--color-primary); margin-left: 4px; }
.el122-tcard-author { font-weight: 700; font-size: 1rem; }

/* Nav buttons */
.el122-btn-prev,
.el122-btn-next {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .3s;
    position: relative;
    top: auto; left: auto; right: auto;
    margin-top: 0;
    font-size: 14px;
}
.el122-btn-prev::after,
.el122-btn-next::after { display: none; }
.el122-btn-prev:hover,
.el122-btn-next:hover { background: var(--color-primary); color: #fff; }

.el122-pagination .swiper-pagination-bullet { background: var(--color-primary); opacity: .3; width: 10px; height: 10px; }
.el122-pagination .swiper-pagination-bullet-active { opacity: 1; width: 28px; border-radius: 5px; }

/* ─── Section 2: Stat Boxes ─── */
.el122-stats-section { margin-bottom: 4rem; }

.el122-stat-box {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid rgba(0,0,0,.06);
    transition: all .3s ease;
    height: 100%;
}
.el122-stat-box:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }

.el122-stat-icon {
    margin-bottom: 1rem;
}
.el122-stat-icon i {
    font-size: 2.25rem;
    width: 72px; height: 72px;
    line-height: 72px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    background: var(--rgba-primary-1);
    color: var(--color-primary);
}
.el122-stat-value { font-size: 2rem; font-weight: 800; line-height: 1.2; margin-bottom: .5rem; }
.el122-stat-value * { margin: 0; }
.el122-stat-label { font-size: .95rem; opacity: .75; line-height: 1.5; }
.el122-stat-label * { margin: 0; }

/* ─── Section 3: Customer Logos ─── */
.el122-logos-section { padding-top: 2rem; border-top: 1px solid rgba(0,0,0,.08); }

.el122-logos-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2.5rem;
}

.el122-logo-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter .3s ease, opacity .3s ease;
    text-decoration: none;
}
.el122-logo-img {
    max-height: 56px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .55;
    transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.el122-logo-item:hover .el122-logo-img,
.el122-logo-item:not(.el122-logo-blur) .el122-logo-img {
    filter: grayscale(0%);
    opacity: 1;
}
/* blur-others effect */
.el122-logos-strip:hover .el122-logo-item.el122-logo-blur .el122-logo-img {
    filter: grayscale(100%) blur(1px);
    opacity: .25;
}
.el122-logos-strip:hover .el122-logo-item:not(.el122-logo-blur) .el122-logo-img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}

.el122-logo-text { font-size: .9rem; font-weight: 600; color: var(--bs-body-color); }

/* Responsive */
@media (max-width: 991px) {
    .el122-title { font-size: 1.6rem; }
    .el122-tcard-img-wrap { min-height: 220px; }
    .el122-tcard-img { min-height: 220px; }
    .el122-tcard-body { padding: 1.5rem 1.25rem; }
}
@media (max-width: 767px) {
    .el122-tcard-img-wrap { min-height: 200px; }
    .el122-tcard-img { min-height: 200px; }
    .el122-stat-value { font-size: 1.6rem; }
    .el122-logos-strip { gap: 1rem 1.5rem; }
    .el122-logo-img { max-height: 44px; }
}

/* =============================================================================
   ELEMENT 123 - Word Marquee Strip
   Continuous RTL seamless marquee - each word is a child element
   ============================================================================= */

.el123-marquee-section {
    position: relative;
    overflow: hidden;
}

.el123-track-wrapper {
    overflow: hidden;
    width: 100%;
    direction: ltr; /* marquee tracks left-to-right internally */
    position: relative;
}

.el123-track {
    display: flex;
    width: max-content;
    animation: el123scroll var(--el123-speed, 30s) linear infinite;
    will-change: transform;
}

.el123-track:hover {
    animation-play-state: paused;
}

.el123-word-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.el123-word-item {
    display: inline-flex;
    align-items: center;
    padding: 0 2.5rem;
    position: relative;
    flex-shrink: 0;
}

.el123-word-text {
    font-size: clamp(2.5rem, 6vw, 6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--bs-body-color, #1a1a2e);
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
    display: inline-block;
    font-family: IRANSansWebFaNum, sans-serif;
}

/* رنگ متناوب برای کلمات با opacity کمتر - مثل Crafto */
.el123-word-item:nth-child(even) .el123-word-text {
    opacity: 0.22;
}

@keyframes el123scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 991px) {
    .el123-word-text {
        font-size: clamp(2rem, 7vw, 4rem);
    }
    .el123-word-item {
        padding: 0 1.5rem;
    }
}

@media (max-width: 576px) {
    .el123-word-text {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
    }
    .el123-word-item {
        padding: 0 1rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .el123-track {
        animation: none;
    }
}

/* ===================================
   Element 131 – Dual Card Slider with Side Image
====================================== */
.el131-section {
    position: relative;
    /* بدون overflow:hidden تا اسلاید بعدی از کنار دیده بشه */
}

/* ── Layout: swiper + side image ── */
.el131-inner {
    display: flex;
    align-items: center;
    gap: 40px;
}

.el131-swiper-wrap {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    overflow: visible;
}

/* swiper خودش overflow:hidden اضافه می‌کنه – لغو می‌کنیم */
.el131-swiper-wrap .swiper,
.el131-swiper-wrap .el131-swiper {
    overflow: visible !important;
}

.el131-side-img {
    flex: 0 0 320px;
    width: 320px;
    border-radius: 10px;
    overflow: hidden;
    align-self: stretch;
}

    .el131-side-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

[dir="rtl"] .el131-inner {
    flex-direction: row-reverse;
}

/* ── Card: half text / half image (single slide per card) ── */
.el131-card {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 220px;
    height: 100%;
    transition: box-shadow .3s ease, transform .3s ease;
}

    .el131-card:hover {
        box-shadow: 0 16px 48px rgba(0, 0, 0, .12);
        transform: translateY(-4px);
    }

/* Text side */
.el131-card-body {
    flex: 1 1 0;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Icon image (small) */
.el131-card-icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    margin-bottom: 18px;
}

/* Icon font box */
.el131-card-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 1.4rem;
    margin-bottom: 18px;
}

/* Title */
.el131-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
    line-height: 1.4;
}
.el131-card-title * { margin: 0; }

/* Description */
.el131-card-desc {
    font-size: .9rem;
    color: #666;
    line-height: 1.7;
    flex: 1 1 auto;
    margin-bottom: 0;
}
.el131-card-desc * { margin: 0; color: inherit; }

/* Button */
.el131-card-btn {
    display: inline-block;
    margin-top: 20px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 2px;
    transition: opacity .2s;
    align-self: flex-start;
}

    .el131-card-btn:hover {
        opacity: .65;
        color: var(--color-primary);
    }

/* Photo side – fills exactly 50% of the card */
.el131-card-photo {
    flex: 0 0 50%;
    width: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 220px;
}

.el131-card-photo--empty {
    background-color: #f4f4f4;
}

/* ── Navigation arrows ── */
.el131-btn-prev,
.el131-btn-next {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s, border-color .25s, color .25s;
    flex-shrink: 0;
}

    .el131-btn-prev:hover,
    .el131-btn-next:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
    }

    .el131-btn-prev i,
    .el131-btn-next i {
        font-size: 15px;
        color: inherit;
        line-height: 1;
    }

/* ── Responsive ── */
@media (max-width: 1199px) {
    .el131-side-img {
        flex: 0 0 260px;
        width: 260px;
    }
    .el131-card-body {
        padding: 24px 20px;
    }
}

@media (max-width: 991px) {
   
    .el131-side-img {
        width: 100%;
        flex: none;
        height: 260px;
    }
}

@media (max-width: 767px) {
    .el131-card {
        flex-direction: column;
    }
    .el131-card-photo {
        flex: none;
        width: 100%;
        min-height: 200px;
    }
    .el131-card-body {
        padding: 24px 20px;
    }
}

@media (max-width: 575px) {
    .el131-slide-pair {
        flex-direction: column;
        gap: 16px;
    }
}

/* ===================================
   Element 132 – Scroll Stack Image Reveal
====================================== */
.el132-section {
    position: relative;
    overflow: hidden;
}

.el132-cards {
    position: relative;
}

/* هر پنل به صفحه sticky می‌چسبد */
.el132-stack-item {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

.el132-card-inner {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 100vh;
    transition: transform .3s ease;
}

/* ردیف دو ستونه: تصویر + متن */
.el132-row {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 80px 0;
    width: 100%;
}

.el132-media-col {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

.el132-text-col {
    flex: 0 0 420px;
    max-width: 420px;
}

[dir="rtl"] .el132-row {
    flex-direction: row-reverse;
}

/* تصویر موکاپ با سایه لایه‌ای */
.el132-mockup-wrap {
    position: relative;
}

.el132-mockup-shadow {
    position: absolute;
    left: 4%;
    right: 4%;
    border-radius: 16px;
    background: rgba(0, 0, 0, .06);
}

.el132-mockup-shadow--back {
    top: -18px;
    bottom: 18px;
}

.el132-mockup-shadow--mid {
    top: -9px;
    bottom: 9px;
    background: rgba(0, 0, 0, .04);
}

.el132-mockup-front {
    position: relative;
    z-index: 2;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .12);
}

.el132-mockup-img {
    width: 100%;
    display: block;
    border-radius: 16px;
}

/* badge */
.el132-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--base-color);
    background: rgba(60, 47, 192, .08);
    border-radius: 50px;
    padding: 6px 16px;
    margin-bottom: 20px;
    letter-spacing: .04em;
}

.el132-title {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.15;
    color: #212020;
    margin-bottom: 20px;
}

.el132-desc {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--medium-gray);
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 1199px) {
    .el132-text-col {
        flex: 0 0 360px;
        max-width: 360px;
    }

    .el132-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 991px) {
    .el132-row {
        flex-direction: column !important;
        gap: 40px;
        padding: 60px 0;
    }

    .el132-text-col {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .el132-stack-item {
        min-height: auto;
        position: relative;
    }

    .el132-card-inner {
        min-height: auto;
    }
}

@media (max-width: 575px) {
    .el132-title {
        font-size: 1.8rem;
    }

    .el132-row {
        padding: 40px 0;
    }
}
/* ===================================
   Mahbar - Scroll Driven Sticky Stack Section
====================================== */

.stack-box {
    position: relative;
    z-index: 1;
    height: 300vh;
    --mahbar-stack-vh: 100vh;
}

    .stack-box .stack-box-contain {
        height: var(--mahbar-stack-vh);
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        overflow: hidden;
    }

    .stack-box .stack-item {
        height: var(--mahbar-stack-vh);
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        z-index: 999;
        display: flex;
        align-items: center;
    }

        .stack-box .stack-item.stack-item-02 {
            z-index: 99;
        }

        .stack-box .stack-item.stack-item-03 {
            z-index: 9;
        }

        .stack-box .stack-item.stack-item-04 {
            z-index: 8;
        }

        .stack-box .stack-item.stack-item-05 {
            z-index: 7;
        }

    .stack-box .stack-item-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        display: flex;
        align-items: center;
        height: var(--mahbar-stack-vh);
    }

    .stack-box .atropos {
        max-width: 100%;
    }

.atropos-inner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: inherit;
}


/* ===================================
   Mobile / Tablet Fix
====================================== */

@media (max-width: 1199px) {
    .stack-box {
        position: relative;
        overflow: visible;
    }
    .stack-box {
        --mahbar-stack-top: 0px;
        --mahbar-stack-vh: 100vh;
    }


        .stack-box .stack-box-contain {
            position: -webkit-sticky;
            position: sticky;
            top: var(--mahbar-stack-top);
            height: var(--mahbar-stack-vh);
            overflow: hidden;
        }
        .stack-box .stack-item {
            position: absolute;
            top: 0;
            left: 0;
            height: var(--mahbar-stack-vh);
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .stack-box .stack-item-wrapper {
            height: var(--mahbar-stack-vh);
            min-height: var(--mahbar-stack-vh);
            display: flex;
            align-items: center;
            overflow: hidden;
        }

            .stack-box .stack-item-wrapper .container {
                width: 100%;
            }

        .stack-box .row {
            min-height: auto;
        }

        /* مهم: Atropos روی موبایل نباید اسکرول صفحه را قفل کند */
        .stack-box .atropos-rotate-touch,
        .stack-box .atropos-rotate-touch * {
            touch-action: pan-y !important;
        }
}


@media (max-width: 767px) {
    .stack-box .stack-item-wrapper {
        padding: 25px 0;
    }

        .stack-box .stack-item-wrapper .container {
            max-height: calc(var(--mahbar-stack-vh) - 50px);
            overflow: hidden;
        }

    .stack-box .row {
        row-gap: 20px;
    }

    .stack-box .atropos-inner img {
        max-height: 42vh;
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        object-fit: contain;
    }

    .stack-box .col-xl-4,
    .stack-box .col-lg-5,
    .stack-box .col-md-6,
    .stack-box .col-xl-8,
    .stack-box .col-lg-7 {
        text-align: center;
    }
}


/* ══════════════════════════════════════════════════════════════
   Element 129: Blog Card Slider - Navigation Buttons
   ══════════════════════════════════════════════════════════════ */

.el129-nav {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #232323;
    font-size: 17px;
    flex-shrink: 0;
    user-select: none;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

    .el129-nav:hover {
        background: #232323;
        border-color: #232323;
        color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

    .el129-nav i {
        font-size: 17px;
        line-height: 1;
    }

.el129-section {
    position: relative;
}

/* ── Card ── */
.el129-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ebebeb;
    transition: box-shadow .3s ease, transform .3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .el129-card:hover {
        box-shadow: 0 16px 48px rgba(0,0,0,.11);
        transform: translateY(-5px);
    }

/* ── Image ── */
.el129-img-wrap {
    position: relative;
    overflow: hidden;
    height: 230px;
    flex-shrink: 0;
}

    .el129-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .55s ease;
    }

.el129-card:hover .el129-img-wrap img {
    transform: scale(1.06);
}

/* ── Category badge (top-right) ── */
.el129-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(10,10,30,.7);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 30px;
    z-index: 2;
    line-height: 1;
}

/* ── Body ── */
.el129-body {
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.el129-title {
    font-size: 16.5px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.45;
    margin-bottom: 10px;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .25s;
}

    .el129-title:hover {
        color: #4a6cf7;
        text-decoration: none;
    }

.el129-desc {
    font-size: 13.5px;
    color: #6b7280;
    line-height: 1.65;
    margin-bottom: 14px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Meta row (author / date) ── */
.el129-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11.5px;
    color: #9ca3af;
    margin-bottom: 14px;
}

    .el129-meta i {
        font-size: 11px;
        margin-inline-end: 3px;
    }

/* ── Separator ── */
.el129-sep {
    height: 1px;
    background: #f0f0f4;
    margin-bottom: 16px;
}

/* ── CTA link with sliding arrow ── */
.el129-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .55px;
    color: #1a1a2e;
    text-decoration: none;
    transition: color .25s;
}

    .el129-cta:hover {
        color: #4a6cf7;
        text-decoration: none;
    }

.el129-cta-text {
    display: inline-block;
}

/* فلش چپ (قبل از متن) - حالت عادی فعال */
.el129-arrow-before {
    order: 1;
    display: inline-flex;
    align-items: center;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .3s ease, transform .3s ease;
}

.el129-cta:hover .el129-arrow-before {
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
}

/* فلش راست (بعد از متن) - حالت hover فعال */
.el129-arrow-after {
    order: -1;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .3s ease, transform .3s ease;
}

.el129-cta:hover .el129-arrow-after {
    opacity: 1;
    transform: translateX(0);
}

.el129-arrow-before i,
.el129-arrow-after i {
    font-size: 11px;
    transition: transform .25s;
}

.el129-cta:hover .el129-arrow-after i {
    transform: scale(1.1);
}

/* ── Navigation buttons ── */
.el129-nav {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s, border-color .25s, color .25s;
    color: #374151;
    font-size: 17px;
    flex-shrink: 0;
    user-select: none;
}

    .el129-nav:hover {
        background: #1a1a2e;
        border-color: #1a1a2e;
        color: #fff;
    }

/* ── No-image placeholder ── */
.el129-no-img {
    width: 100%;
    height: 230px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    font-size: 40px;
    flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════
   Element 129 & 131: Peek Effect - Left overflow visible
   ══════════════════════════════════════════════════════════════ */

/* Element 129 Blog Card Slider */
.el129-swiper {
    overflow: visible !important;
    padding-right: 0;
    padding-left: 0;
    margin-left: -15px; /* کمی بیشتر از margin-left قبلی */
}

.el129-section .container {
    overflow: hidden; /* فقط سمت راست hidden */
}

.el129-section .swiper-wrapper {
    padding-left: 15px;
}

/* Element 131 Dual Card Slider */
.el131-swiper {
    overflow: visible !important;
    padding-right: 0;
    padding-left: 0;
    margin-left: -15px;
}

.el131-section .container {
    overflow: hidden;
}

.el131-swiper-wrap {
    overflow: visible !important;
    margin-left: -15px;
}

.el131-swiper .swiper-wrapper {
    padding-left: 15px;
}
}

/* ═══════════════════════════════════════════════════════════════ */
/* Element 122: Customer Testimonials - Responsive Styles */
/* ═══════════════════════════════════════════════════════════════ */

/* ───────── Responsive: Tablet (768px - 1023px) ───────── */
@media (max-width: 1023px) {
    .el122-title { font-size: 1.6rem; }
    .el122-tcard-img-wrap { min-height: 220px; }
    .el122-tcard-img { min-height: 220px; }
    .el122-tcard-body { padding: 1.5rem 1.25rem; }
}

/* ───────── Responsive: Mobile (< 768px) - VERTICAL LAYOUT ───────── */
@media (max-width: 767px) {
    /* Card: Image on top, text below */
    .el122-tcard {
        flex-direction: column;
        padding: 1.5rem 1rem;
    }

    .el122-tcard-img-wrap {
        width: 100%;
        height: auto;
        min-height: auto;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .el122-tcard-img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 auto;
        display: block;
    }

    .el122-tcard-body {
        padding: 0;
        align-items: center;
        text-align: center;
    }

    .el122-tcard-quote {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* Stats: full width */
    .el122-stat-value { font-size: 1.6rem; }

    /* Logos: 2 columns */
    .el122-logos-strip {
        gap: 1rem 1.5rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .el122-logo-img { max-height: 44px; }
}


/* =============================================================================
   TINYMCE MODAL FIX - حل مشکل scroll مودال‌های TinyMCE
   ============================================================================= */

/* تنظیم مودال TinyMCE */
.tox-dialog {
    max-height: 90vh !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

.tox-dialog__header {
    flex-shrink: 0 !important;
    border-bottom: 1px solid #ddd !important;
}

.tox-dialog__body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* تنظیم body-nav-outer برای layout عمودی */
.tox-dialog__body-nav-outer {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

/* تنظیم tabpanel داخل مودال */
.tox-dialog__body .tox-tabpanel {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 10px !important;
}

.tox-dialog__body .tox-form {
    display: flex !important;
    flex-direction: column !important;
}

/* تنظیم items درون tabpanel */
.tox-dialog__body .tox-form__group {
    margin-bottom: 1rem !important;
    flex-shrink: 0 !important;
}

.tox-dialog__body textarea,
.tox-dialog__body input,
.tox-dialog__body select {
    max-width: 100% !important;
}

/* تنظیم footer مودال */
.tox-dialog__footer {
    flex-shrink: 0 !important;
    border-top: 1px solid #ddd !important;
    padding-top: 1rem !important;
    margin-top: 1rem !important;
}

/* تنظیم بهتر برای textareas */
.tox-dialog__body textarea {
    resize: vertical !important;
    min-height: 80px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* تنظیم backdrop */
.tox-dialog__backdrop {
    position: fixed !important;
}

.el121-btn-prev::after, .el121-btn-next::after{
    content:'';
}

/* ============================================================
   Dynamic Configurator UserArea (Element 999)
   Fully scoped; inherits the active website theme.
   ============================================================ */
.dynamic-configurator-shell {
    --cfg-primary: var(--color-primary, #ff5e14);
    --cfg-secondary: var(--color-secondary, #152332);
    --cfg-text: var(--text-primary, #202833);
    --cfg-muted: #667085;
    --cfg-border: #e7e9ee;
    --cfg-soft: #f7f8fa;
    --cfg-surface: #fff;
    --cfg-success: #168a55;
    --cfg-danger: #c93636;
    --cfg-radius: 20px;
    position: relative;
    min-height: 120px;
    color: var(--cfg-text);
}

.dynamic-configurator-shell *,
.dynamic-configurator-shell *::before,
.dynamic-configurator-shell *::after { box-sizing: border-box; }

.dynamic-configurator-shell button,
.dynamic-configurator-shell input,
.dynamic-configurator-shell select,
.dynamic-configurator-shell textarea { font: inherit; }

.dynamic-configurator__root { width: 100%; }

.dynamic-configurator__loading,
.dynamic-configurator-shell .configurator-state,
.dynamic-configurator__not-configured {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 220px;
    padding: 40px 24px;
    border: 1px dashed var(--cfg-border);
    border-radius: var(--cfg-radius);
    background: var(--cfg-soft);
    color: var(--cfg-muted);
    text-align: center;
}

.dynamic-configurator__loading .spinner-border { width: 2.5rem; height: 2.5rem; color: var(--cfg-primary); }
.dynamic-configurator__not-configured i { font-size: 2rem; color: var(--cfg-primary); }
.dynamic-configurator__error {
    padding: 20px;
    border: 1px solid #f2c6c6;
    border-radius: 14px;
    background: #fff5f5;
    color: var(--cfg-danger);
    text-align: center;
}

.dynamic-configurator-shell .configurator-state__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cfg-primary) 12%, white);
    color: var(--cfg-primary);
    font-size: 1.35rem;
}
.dynamic-configurator-shell .configurator-state--error .configurator-state__icon { background: #fff0f0; color: var(--cfg-danger); }
.dynamic-configurator-shell .configurator-state p { margin: 0; font-weight: 600; }

.dynamic-configurator-shell .configurator-surface {
    overflow: hidden;
    border: 1px solid var(--cfg-border);
    border-radius: 26px;
    background: var(--cfg-surface);
    box-shadow: 0 24px 70px rgba(21, 35, 50, .09);
}

.dynamic-configurator-shell .configurator-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 34px 40px;
    background: linear-gradient(125deg, var(--cfg-secondary), color-mix(in srgb, var(--cfg-secondary) 78%, var(--cfg-primary)));
    color: #fff;
}
.dynamic-configurator-shell .configurator-hero__copy { max-width: 720px; }
.dynamic-configurator-shell .configurator-eyebrow,
.dynamic-configurator-shell .planner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: color-mix(in srgb, var(--cfg-primary) 72%, white);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.dynamic-configurator-shell .configurator-hero h2 { margin: 0 0 9px; color: #fff; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 800; }
.dynamic-configurator-shell .configurator-hero p { max-width: 640px; margin: 0; color: rgba(255,255,255,.7); font-size: .94rem; line-height: 1.9; }
.dynamic-configurator-shell .configurator-progress { display: grid; gap: 9px; flex: 0 0 190px; color: rgba(255,255,255,.78); font-size: .8rem; }
.dynamic-configurator-shell .configurator-progress__track { overflow: hidden; height: 7px; border-radius: 999px; background: rgba(255,255,255,.15); }
.dynamic-configurator-shell .configurator-progress__track > span { display: block; height: 100%; border-radius: inherit; background: var(--cfg-primary); transition: width .35s ease; }

.dynamic-configurator-shell .configurator-stepper { overflow-x: auto; padding: 24px 40px 20px; border-bottom: 1px solid var(--cfg-border); scrollbar-width: thin; }
.dynamic-configurator-shell .configurator-stepper__list { display: flex; min-width: max-content; margin: 0; padding: 0; list-style: none; }
.dynamic-configurator-shell .configurator-step { position: relative; display: flex; align-items: center; gap: 9px; min-width: 132px; padding-inline-end: 38px; color: #98a0ad; }
.dynamic-configurator-shell .configurator-step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 39px; inset-inline-end: 8px; top: 17px; height: 2px; background: var(--cfg-border); }
.dynamic-configurator-shell .configurator-step.is-complete:not(:last-child)::after { background: var(--cfg-primary); }
.dynamic-configurator-shell .step-number { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 34px; height: 34px; border: 2px solid var(--cfg-border); border-radius: 50%; background: #fff; color: #98a0ad; font-size: .82rem; font-weight: 800; }
.dynamic-configurator-shell .configurator-step.is-active .step-number { border-color: var(--cfg-primary); background: var(--cfg-primary); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--cfg-primary) 13%, transparent); }
.dynamic-configurator-shell .configurator-step.is-complete .step-number { border-color: var(--cfg-primary); color: var(--cfg-primary); }
.dynamic-configurator-shell .configurator-step.is-active .step-title,
.dynamic-configurator-shell .configurator-step.is-complete .step-title { color: var(--cfg-text); font-weight: 700; }
.dynamic-configurator-shell .configurator-step .step-title {
    position: relative;
    z-index: 1;
    max-width: 150px;
    padding-inline: 4px;
    overflow: visible;
    background: var(--cfg-surface, #fff);
    white-space: normal;
    line-height: 1.45;
    font-size: .8rem;
}

.dynamic-configurator-shell .configurator-step-content { padding: 36px 40px 40px; }
.dynamic-configurator-shell .configurator-step-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 30px; }
.dynamic-configurator-shell .configurator-step-heading__number { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--cfg-primary) 11%, white); color: var(--cfg-primary); font-weight: 800; }
.dynamic-configurator-shell .configurator-step-heading .step-title { margin: 0 0 5px; color: var(--cfg-text); font-size: clamp(1.22rem, 2.6vw, 1.6rem); font-weight: 800; }
.dynamic-configurator-shell .configurator-step-heading .step-subtitle { margin: 0; color: var(--cfg-muted); line-height: 1.8; }

.dynamic-configurator-shell .configurator-content-block { display: grid; gap: 10px; margin: 0 0 28px; padding: 22px; border: 1px solid color-mix(in srgb, var(--cfg-primary) 18%, var(--cfg-border)); border-radius: 16px; background: color-mix(in srgb, var(--cfg-primary) 5%, white); }
.dynamic-configurator-shell .configurator-content-block img { max-height: 280px; width: 100%; object-fit: cover; border-radius: 12px; }
.dynamic-configurator-shell .configurator-content-block h4,
.dynamic-configurator-shell .configurator-content-block h6,
.dynamic-configurator-shell .configurator-content-block p { margin: 0; }

.dynamic-configurator-shell .configurator-option-groups { display: grid; gap: 34px; margin-bottom: 30px; }
.dynamic-configurator-shell .configurator-option-group { margin: 0; }
.dynamic-configurator-shell .option-group-title { margin: 0 0 7px; color: var(--cfg-text); font-size: 1.04rem; font-weight: 800; }
.dynamic-configurator-shell .option-group-description { margin: 0 0 16px; color: var(--cfg-muted); font-size: .88rem; }
.dynamic-configurator-shell .option-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px; }
.dynamic-configurator-shell .configurator-option-card {
    position: relative;
    overflow: hidden;
    min-height: 154px;
    padding: 0;
    border: 1.5px solid var(--cfg-border);
    border-radius: 16px;
    background: #fff;
    color: var(--cfg-text);
    cursor: pointer;
    text-align: start;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dynamic-configurator-shell .configurator-option-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cfg-primary) 68%, white); box-shadow: 0 13px 28px rgba(21,35,50,.1); }
.dynamic-configurator-shell .configurator-option-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--cfg-primary) 35%, transparent); outline-offset: 3px; }
.dynamic-configurator-shell .configurator-option-card.selected { border-color: var(--cfg-primary); background: color-mix(in srgb, var(--cfg-primary) 4%, white); box-shadow: inset 0 0 0 1px var(--cfg-primary), 0 10px 24px color-mix(in srgb, var(--cfg-primary) 13%, transparent); }
.dynamic-configurator-shell .option-card__check { position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: transparent; box-shadow: 0 3px 12px rgba(21,35,50,.15); }
.dynamic-configurator-shell .selected .option-card__check { background: var(--cfg-primary); color: #fff; }
.dynamic-configurator-shell .option-card__media { display: grid; place-items: center; width: 100%; height: 110px; overflow: hidden; background: var(--cfg-soft); color: color-mix(in srgb, var(--cfg-primary) 55%, #9da4ae); font-size: 2rem; }
.dynamic-configurator-shell .option-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.dynamic-configurator-shell .configurator-option-card:hover img { transform: scale(1.04); }
.dynamic-configurator-shell .option-content { padding: 15px 16px 17px; }
.dynamic-configurator-shell .option-content h5 { margin: 0 0 5px; color: var(--cfg-text); font-size: .95rem; font-weight: 800; }
.dynamic-configurator-shell .option-content p { margin: 0; color: var(--cfg-muted); font-size: .79rem; line-height: 1.7; }

.dynamic-configurator-shell .configurator-dynamic-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 18px; margin-bottom: 30px; }
.dynamic-configurator-shell .configurator-field { display: flex; grid-column: span var(--configurator-field-span, 12); flex-direction: column; min-width: 0; }
.dynamic-configurator-shell .field-label,
.dynamic-configurator-shell .configurator-lead-field label { margin-bottom: 8px; color: var(--cfg-text); font-size: .84rem; font-weight: 700; }
.dynamic-configurator-shell .field-label .text-danger,
.dynamic-configurator-shell .configurator-lead-field label span { color: var(--cfg-danger) !important; }
.dynamic-configurator-shell .field-input,
.dynamic-configurator-shell .configurator-lead-form .form-control,
.dynamic-configurator-shell .planner-room-controls input {
    width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid #d9dde4; border-radius: 11px; background: #fff; color: var(--cfg-text); box-shadow: none; transition: border-color .2s, box-shadow .2s;
}
.dynamic-configurator-shell textarea.field-input,
.dynamic-configurator-shell .configurator-lead-form textarea { min-height: 105px; resize: vertical; }
.dynamic-configurator-shell .field-input:focus,
.dynamic-configurator-shell .configurator-lead-form .form-control:focus,
.dynamic-configurator-shell .planner-room-controls input:focus { border-color: var(--cfg-primary); outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cfg-primary) 12%, transparent); }
.dynamic-configurator-shell .field-input.is-invalid,
.dynamic-configurator-shell .lead-phone.is-invalid { border-color: var(--cfg-danger); }
.dynamic-configurator-shell .field-help { margin-top: 6px; color: var(--cfg-muted); font-size: .76rem; }
.dynamic-configurator-shell .field-error { margin-top: 5px; color: var(--cfg-danger); font-size: .77rem; }
.dynamic-configurator-shell .form-check { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.dynamic-configurator-shell .form-check-input:checked { border-color: var(--cfg-primary); background-color: var(--cfg-primary); }

.dynamic-configurator-shell .configurator-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--cfg-border); }
.dynamic-configurator-shell .configurator-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 148px; min-height: 48px; padding: 10px 22px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s;
}
.dynamic-configurator-shell .configurator-btn:hover { transform: translateY(-2px); }
.dynamic-configurator-shell .configurator-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--cfg-primary) 35%, transparent); outline-offset: 2px; }
.dynamic-configurator-shell .configurator-btn--primary { margin-inline-start: auto; background: var(--cfg-primary); color: #fff; box-shadow: 0 10px 22px color-mix(in srgb, var(--cfg-primary) 24%, transparent); }
.dynamic-configurator-shell .configurator-btn--secondary { background: var(--cfg-soft); border-color: var(--cfg-border); color: var(--cfg-text); }
.dynamic-configurator-shell .configurator-btn:disabled { opacity: .58; cursor: wait; transform: none; }

.dynamic-configurator-shell .configurator-recommendation-results:not(:empty) { margin-top: 28px; }
.dynamic-configurator-shell .configurator-recommendation-results .configurator-state { min-height: 160px; }
.dynamic-configurator-shell .configurator-result-shell { display: grid; gap: 24px; max-width: 920px; margin-inline: auto; }
.dynamic-configurator-shell .configurator-package-result,
.dynamic-configurator-shell .configurator-price-result,
.dynamic-configurator-shell .configurator-lead-form {
    padding: 28px; border: 1px solid var(--cfg-border); border-radius: var(--cfg-radius); background: #fff; box-shadow: 0 14px 40px rgba(21,35,50,.07);
}
.dynamic-configurator-shell .configurator-result-heading,
.dynamic-configurator-shell .configurator-lead-form__heading { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 22px; }
.dynamic-configurator-shell .configurator-result-heading__icon,
.dynamic-configurator-shell .configurator-lead-form__heading > span { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--cfg-primary) 11%, white); color: var(--cfg-primary); font-size: 1.15rem; }
.dynamic-configurator-shell .configurator-result-badge { display: inline-block; margin-bottom: 5px; color: var(--cfg-primary); font-size: .73rem; font-weight: 800; }
.dynamic-configurator-shell .configurator-result-heading h3,
.dynamic-configurator-shell .configurator-lead-form h4 { margin: 0 0 5px; color: var(--cfg-text); font-size: 1.3rem; font-weight: 800; }
.dynamic-configurator-shell .configurator-result-heading p,
.dynamic-configurator-shell .configurator-lead-form__heading p { margin: 0; color: var(--cfg-muted); font-size: .84rem; line-height: 1.8; }
.dynamic-configurator-shell .package-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr)); gap: 12px; }
.dynamic-configurator-shell .product-card { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--cfg-border); border-radius: 14px; background: var(--cfg-soft); text-align: start; }
.dynamic-configurator-shell .product-card--link { color: inherit; text-decoration: none; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.dynamic-configurator-shell .product-card--link:hover,
.dynamic-configurator-shell .product-card--link:focus-visible { transform: translateY(-2px); border-color: var(--cfg-primary); background: #fff; color: inherit; text-decoration: none; box-shadow: 0 10px 24px rgba(21,35,50,.09); outline: 0; }
.dynamic-configurator-shell .product-card__icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--cfg-primary); }
.dynamic-configurator-shell .product-card__image { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 10px; background: #fff; object-fit: cover; }
.dynamic-configurator-shell .product-info { flex: 1; min-width: 0; }
.dynamic-configurator-shell .product-info h5 { margin: 0 0 3px; color: var(--cfg-text); font-size: .88rem; font-weight: 800; }
.dynamic-configurator-shell .product-info p { margin: 0; color: var(--cfg-muted); font-size: .72rem; }
.dynamic-configurator-shell .product-card__quantity { flex: none; color: var(--cfg-secondary); font-size: .79rem; }
.dynamic-configurator-shell .product-card__external { flex: none; color: var(--cfg-primary); font-size: .72rem; }
.dynamic-configurator-shell .configurator-base-price { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 15px 18px; border-radius: 13px; background: var(--cfg-secondary); color: #fff; }
.dynamic-configurator-shell .configurator-base-price strong { color: color-mix(in srgb, var(--cfg-primary) 65%, white); font-size: 1.1rem; }
.dynamic-configurator-shell .price-breakdown { display: grid; }
.dynamic-configurator-shell .price-item { display: flex; justify-content: space-between; gap: 20px; padding: 13px 2px; border-bottom: 1px solid var(--cfg-border); color: var(--cfg-muted); font-size: .86rem; }
.dynamic-configurator-shell .price-item strong { color: var(--cfg-text); }
.dynamic-configurator-shell .price-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 18px; border-radius: 14px; background: color-mix(in srgb, var(--cfg-primary) 9%, white); color: var(--cfg-text); }
.dynamic-configurator-shell .price-total strong { color: var(--cfg-primary); font-size: 1.3rem; }
.dynamic-configurator-shell .configurator-lead-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.dynamic-configurator-shell .configurator-lead-field { display: flex; flex-direction: column; }
.dynamic-configurator-shell .configurator-lead-field--wide,
.dynamic-configurator-shell .configurator-submit-message { grid-column: 1 / -1; }
.dynamic-configurator-shell .configurator-submit-message:empty { display: none; }
.dynamic-configurator-shell .configurator-success { max-width: 620px; margin-inline: auto; padding: 44px 30px; border: 1px solid #cae8d9; border-radius: 24px; background: #fbfffd; text-align: center; box-shadow: 0 20px 55px rgba(22,138,85,.1); }
.dynamic-configurator-shell .configurator-success__icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; background: var(--cfg-success); color: #fff; font-size: 1.5rem; box-shadow: 0 0 0 10px #eaf7f0; }
.dynamic-configurator-shell .configurator-success h3 { margin: 3px 0 8px; font-weight: 800; }
.dynamic-configurator-shell .configurator-success p { color: var(--cfg-muted); }
.dynamic-configurator-shell .configurator-tracking-code { display: inline-grid; gap: 5px; margin-top: 12px; padding: 12px 28px; border: 1px dashed #9fd0b8; border-radius: 12px; background: #fff; }
.dynamic-configurator-shell .configurator-tracking-code span { color: var(--cfg-muted); font-size: .72rem; }
.dynamic-configurator-shell .configurator-tracking-code strong { color: var(--cfg-success); font-size: 1.2rem; letter-spacing: .08em; }

/* Visual planner */
.dynamic-configurator-shell .planner-container { width: 100%; margin: 8px 0 0; }
.dynamic-configurator-shell .planner-header { margin-bottom: 18px; padding: 20px 22px; border-radius: 16px; background: var(--cfg-secondary); color: #fff; }
.dynamic-configurator-shell .planner-header h4 { margin: 0 0 6px; color: #fff; font-weight: 800; }
.dynamic-configurator-shell .planner-header p { margin: 0; color: rgba(255,255,255,.66); font-size: .82rem; }
.dynamic-configurator-shell .planner-dimension-source { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--cfg-primary) 24%, var(--cfg-border)); border-radius: 11px; background: color-mix(in srgb, var(--cfg-primary) 6%, white); color: var(--cfg-text); font-size: .76rem; }
.dynamic-configurator-shell .planner-dimension-source i { color: var(--cfg-primary); }
.dynamic-configurator-shell .planner-room-controls { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; padding: 15px; border: 1px solid var(--cfg-border); border-radius: 15px; background: var(--cfg-soft); }
.dynamic-configurator-shell .planner-room-controls .form-group { flex: 1; min-width: 150px; }
.dynamic-configurator-shell .planner-room-controls .planner-l-dimensions,
.dynamic-configurator-shell .planner-room-controls .planner-u-dimensions { display: contents; }
.dynamic-configurator-shell .planner-room-controls .planner-l-dimensions.d-none,
.dynamic-configurator-shell .planner-room-controls .planner-u-dimensions.d-none { display: none; }
.dynamic-configurator-shell .planner-room-controls select { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid #d9dde4; border-radius: 11px; background: #fff; color: var(--cfg-text); }
.dynamic-configurator-shell .planner-room-controls label { display: block; margin-bottom: 6px; font-size: .79rem; font-weight: 700; }
.dynamic-configurator-shell .planner-room-controls label small { color: var(--cfg-muted); font-weight: 400; }
.dynamic-configurator-shell .planner-dimension-input { direction: ltr; text-align: center; font-variant-numeric: tabular-nums; }
.dynamic-configurator-shell .planner-dimension-input::selection { background: color-mix(in srgb, var(--cfg-primary) 24%, white); }
.dynamic-configurator-shell .planner-dimension-equivalent { display: block; margin-top: 5px; color: var(--cfg-muted); font-size: .66rem; text-align: center; }
.dynamic-configurator-shell .planner-zoom-controls { display: flex; gap: 6px; margin-inline-start: auto; }
.dynamic-configurator-shell .planner-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--cfg-border); border-radius: 10px; background: #fff; color: var(--cfg-text); cursor: pointer; }
.dynamic-configurator-shell .planner-icon-btn:hover { border-color: var(--cfg-primary); color: var(--cfg-primary); }
.dynamic-configurator-shell .planner-main-area { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; }
.dynamic-configurator-shell .planner-canvas-wrapper { min-height: 460px; padding: 16px; overflow: auto; border: 1px solid var(--cfg-border); border-radius: 16px; background-color: #f7f8fa; background-image: linear-gradient(45deg,#eef0f3 25%,transparent 25%),linear-gradient(-45deg,#eef0f3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef0f3 75%),linear-gradient(-45deg,transparent 75%,#eef0f3 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
.dynamic-configurator-shell .planner-canvas { display: block; max-width: none; margin: auto; border-radius: 4px; background: #fff; cursor: grab; touch-action: none; box-shadow: 0 8px 28px rgba(21,35,50,.14); }
.dynamic-configurator-shell .planner-canvas:active { cursor: grabbing; }
.dynamic-configurator-shell .planner-canvas:focus-visible { outline: 3px solid color-mix(in srgb, var(--cfg-primary) 40%, transparent); outline-offset: 4px; }
.dynamic-configurator-shell .planner-sidebar { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dynamic-configurator-shell .planner-toolbar,
.dynamic-configurator-shell .planner-product-library { padding: 14px; border: 1px solid var(--cfg-border); border-radius: 15px; background: #fff; }
.dynamic-configurator-shell .planner-toolbar h4,
.dynamic-configurator-shell .planner-product-library h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--cfg-text); font-size: .9rem; font-weight: 800; }
.dynamic-configurator-shell .planner-product-library h4 small { margin-inline-start: auto; color: var(--cfg-muted); font-size: .62rem; font-weight: 400; }
.dynamic-configurator-shell .planner-product-filters { display: grid; gap: 7px; margin-bottom: 10px; }
.dynamic-configurator-shell .planner-product-filters select,
.dynamic-configurator-shell .planner-product-filters input { width: 100%; min-height: 37px; padding: 7px 9px; border: 1px solid var(--cfg-border); border-radius: 8px; background: #fff; color: var(--cfg-text); font-size: .72rem; }
.dynamic-configurator-shell .planner-product-filters select:focus,
.dynamic-configurator-shell .planner-product-filters input:focus { border-color: var(--cfg-primary); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfg-primary) 12%, transparent); }
.dynamic-configurator-shell .planner-toolbar-buttons,
.dynamic-configurator-shell .planner-product-list { display: grid; gap: 7px; }
.dynamic-configurator-shell .planner-product-empty { margin: 8px 0; color: var(--cfg-muted); font-size: .72rem; text-align: center; }
.dynamic-configurator-shell .planner-tool-btn { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--cfg-border); border-radius: 9px; background: var(--cfg-soft); color: var(--cfg-text); cursor: pointer; font-size: .76rem; font-weight: 700; text-align: start; }
.dynamic-configurator-shell .planner-tool-btn i { width: 18px; color: var(--cfg-muted); text-align: center; }
.dynamic-configurator-shell .planner-tool-btn:hover { border-color: var(--cfg-primary); color: var(--cfg-primary); }
.dynamic-configurator-shell .planner-tool-btn--primary { border-color: var(--cfg-primary); background: var(--cfg-primary); color: #fff; }
.dynamic-configurator-shell .planner-tool-btn--primary i { color: #fff; }
.dynamic-configurator-shell .planner-tool-btn:disabled { opacity: .5; cursor: not-allowed; }
.dynamic-configurator-shell .planner-product-library { max-height: 500px; overflow-x: hidden; overflow-y: auto; }
.dynamic-configurator-shell .planner-product-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border: 1px solid var(--cfg-border); border-radius: 10px; background: #fff; color: var(--cfg-text); cursor: pointer; text-align: start; transition: border-color .2s, background .2s; }
.dynamic-configurator-shell .planner-product-item:hover,
.dynamic-configurator-shell .planner-product-item:focus-visible { border-color: var(--cfg-primary); background: color-mix(in srgb, var(--cfg-primary) 4%, white); outline: 0; }
.dynamic-configurator-shell .planner-product-item.is-used { border-color: var(--cfg-primary); background: color-mix(in srgb, var(--cfg-primary) 9%, white); box-shadow: inset 3px 0 0 var(--cfg-primary); }
.dynamic-configurator-shell .planner-product-item.is-used .planner-product-add { color: var(--cfg-primary); }
.dynamic-configurator-shell .planner-product-item.is-limit-reached,
.dynamic-configurator-shell .planner-product-item:disabled { opacity: .55; cursor: not-allowed; }
.dynamic-configurator-shell .planner-product-item.used-fallback { border-inline-start: 3px solid #f3a322; }
.dynamic-configurator-shell .planner-product-thumb { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 8px; background: var(--cfg-soft); object-fit: cover; }
.dynamic-configurator-shell .planner-product-info { flex: 1; min-width: 0; }
.dynamic-configurator-shell .planner-product-name { margin: 0 0 2px; overflow-wrap: anywhere; font-size: .76rem; font-weight: 800; line-height: 1.5; }
.dynamic-configurator-shell .planner-product-dims { margin: 0; color: var(--cfg-muted); font-size: .65rem; }
.dynamic-configurator-shell .planner-product-quantity { margin: 2px 0 0; color: var(--cfg-primary); font-size: .62rem; font-weight: 700; }
.dynamic-configurator-shell .planner-product-add { color: var(--cfg-primary); }
.dynamic-configurator-shell .planner-legend { margin-top: 12px; padding: 10px; border: 1px solid #f1dfae; border-radius: 9px; background: #fffaf0; color: #806624; font-size: .68rem; }
.dynamic-configurator-shell .planner-legend-title,
.dynamic-configurator-shell .planner-legend-item { display: flex; align-items: center; gap: 6px; }
.dynamic-configurator-shell .planner-legend-title { margin-bottom: 6px; font-weight: 800; }
.dynamic-configurator-shell .planner-legend-item + .planner-legend-item { margin-top: 5px; }
.dynamic-configurator-shell .planner-legend-swatch { display: inline-block; flex: 0 0 18px; width: 18px; height: 12px; border-radius: 2px; }
.dynamic-configurator-shell .planner-legend-swatch--device { border: 1px solid #667085; background: #fff; }
.dynamic-configurator-shell .planner-legend-swatch--clearance { border: 1px dashed #1f80ff; background: rgba(31,128,255,.1); }
.dynamic-configurator-shell .planner-legend-swatch--fallback { height: 3px; background: #ff9800; }
.dynamic-configurator-shell .planner-status:not(:empty) { margin-top: 12px; padding: 11px 13px; border: 1px solid #b8d7ef; border-radius: 10px; background: #eef8ff; color: #1c5c8c; font-size: .75rem; }
.dynamic-configurator-shell .planner-status.warning { border-color: #eed696; background: #fff8e5; color: #7b6220; }
.dynamic-configurator-shell .planner-status.error { border-color: #f2c6c6; background: #fff2f2; color: var(--cfg-danger); }

@media (max-width: 992px) {
    .dynamic-configurator-shell .planner-main-area { grid-template-columns: 1fr; }
    .dynamic-configurator-shell .planner-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
    .dynamic-configurator-shell .planner-toolbar-buttons { grid-template-columns: repeat(2,1fr); }
    .dynamic-configurator-shell .planner-product-library { max-height: 340px; }
}

@media (max-width: 700px) {
    .dynamic-configurator-shell .configurator-surface { border-radius: 18px; }
    .dynamic-configurator-shell .configurator-hero { align-items: flex-start; flex-direction: column; gap: 20px; padding: 26px 20px; }
    .dynamic-configurator-shell .configurator-progress { width: 100%; flex-basis: auto; }
    .dynamic-configurator-shell .configurator-stepper { padding: 20px 18px 17px; }
    .dynamic-configurator-shell .configurator-step { min-width: 140px; padding-inline-end: 24px; }
    .dynamic-configurator-shell .configurator-step .step-title { max-width: 110px; font-size: .7rem; }
    .dynamic-configurator-shell .configurator-step-content { padding: 26px 18px 24px; }
    .dynamic-configurator-shell .configurator-field { grid-column: 1 / -1; }
    .dynamic-configurator-shell .configurator-lead-form__grid { grid-template-columns: 1fr; }
    .dynamic-configurator-shell .configurator-lead-field { grid-column: 1; }
    .dynamic-configurator-shell .configurator-package-result,
    .dynamic-configurator-shell .configurator-price-result,
    .dynamic-configurator-shell .configurator-lead-form { padding: 20px 17px; }
    .dynamic-configurator-shell .configurator-actions { position: sticky; z-index: 4; bottom: 8px; margin-inline: -8px; padding: 12px 8px 0; background: linear-gradient(transparent, white 26%); }
    .dynamic-configurator-shell .configurator-btn { flex: 1; min-width: 130px; padding-inline: 14px; }
    .dynamic-configurator-shell .planner-room-controls { align-items: stretch; flex-wrap: wrap; }
    .dynamic-configurator-shell .planner-room-controls .form-group { flex-basis: calc(50% - 6px); min-width: 125px; }
    .dynamic-configurator-shell .planner-zoom-controls { width: 100%; justify-content: center; margin: 2px 0 0; }
    .dynamic-configurator-shell .planner-canvas-wrapper { min-height: 350px; padding: 10px; }
    .dynamic-configurator-shell .planner-sidebar { display: flex; }
    .dynamic-configurator-shell .planner-toolbar-buttons { grid-template-columns: repeat(4,1fr); }
    .dynamic-configurator-shell .planner-tool-btn { justify-content: center; padding: 9px; }
    .dynamic-configurator-shell .planner-tool-btn span { display: none; }
    .dynamic-configurator-shell .planner-tool-btn i { color: inherit; font-size: 1rem; }
    .dynamic-configurator-shell .planner-product-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 430px) {
    .dynamic-configurator-shell .option-list,
    .dynamic-configurator-shell .planner-product-list { grid-template-columns: 1fr; }
    .dynamic-configurator-shell .configurator-result-heading,
    .dynamic-configurator-shell .configurator-lead-form__heading { align-items: center; }
    .dynamic-configurator-shell .configurator-result-heading__icon,
    .dynamic-configurator-shell .configurator-lead-form__heading > span { flex-basis: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .dynamic-configurator-shell *,
    .dynamic-configurator-shell *::before,
    .dynamic-configurator-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.el121-btn-prev::after, .el121-btn-next::after {
    content: '';
}
    /* ============================================
   Element 129 - FAQ Style 5 with Left Content
   ============================================ */
    /* Accordion Style 02 - FAQ استایل ۵ */
    .accordion-style-02 {
        margin-bottom: 0;
    }

        .accordion-style-02 .accordion-item {
            background-color: transparent;
            border: none;
            border-bottom: 1px solid #e8e8e8 !important;
            margin-bottom: 0;
            padding: 20px 0;
            overflow: hidden;
        }

            .accordion-style-02 .accordion-item:first-child {
                padding-top: 0;
            }

            .accordion-style-02 .accordion-item:last-child {
                border-bottom: none !important;
                padding-bottom: 0;
            }

        .accordion-style-02 .accordion-header {
            margin-bottom: 0;
            padding: 0;
            background-color: transparent;
            border: none;
        }

        .accordion-style-02 .accordion-title {
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .accordion-style-02 .accordion-title i {
                position: static;
                transform: none !important;
                margin-left: 15px;
                font-size: 0.8rem;
                transition: transform 0.3s ease;
            }

        .accordion-style-02 .accordion-item.active-accordion .accordion-title i {
            transform: rotate(180deg);
        }

        .accordion-style-02 .accordion-body {
            padding: 20px 0 0 0;
            border: none;
            background-color: transparent;
        }

            .accordion-style-02 .accordion-body p {
                color: #666;
                line-height: 1.8;
                margin-bottom: 0;
            }
    /* Icon-small from imported SCSS */
    .icon-small {
        font-size: 0.75rem;
    }
    /* FAQ Left Content Column */
    .faq-left-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .faq-left-column .text-base-color {
            color: var(--base-color, #3498db);
        }

        .faq-left-column .text-dark-gray {
            color: #333;
        }

        .faq-left-column img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }
    /* Desktop vs Mobile adjustments */
    @media (max-width: 991.98px) {
        .accordion-style-02 .accordion-item {
            padding: 15px 0;
        }

        .faq-left-column {
            margin-bottom: 30px;
        }
    }
    /* ===================================
    Element 134 – Project Timeline Steps (process-step-style-06 based)
====================================== */
    .h-7px {
        height: 7px !important;
    }

    .w-7px {
        width: 7px !important;
    }

    .border-radius-100 {
        border-radius: 100% !important;
    }

    .bg-dark-gray, .bg-dark-gray:focus {
        background-color: #212020;
    }

    .hover-box * {
        -webkit-transition: .5s cubic-bezier(.5,1,.89,1);
        transition: .5s cubic-bezier(.5,1,.89,1);
        will-change: transform;
    }

    .h-7px {
        height: 7px !important;
    }

    .w-7px {
        width: 7px !important;
    }

    .border-radius-100 {
        border-radius: 100% !important;
    }

    .bg-dark-gray, .bg-dark-gray:focus {
        background-color: #212020;
    }

    .hover-box * {
        -webkit-transition: .5s cubic-bezier(.5,1,.89,1);
        transition: .5s cubic-bezier(.5,1,.89,1);
        will-change: transform;
    }
    /* Main section styling */
    [data-element-type='134'] {
        position: relative;
    }
        /* Ensure proper spacing */
        [data-element-type='134'] .row {
            margin-left: 0;
            margin-right: 0;
        }
        /* Column adjustments for timeline steps */
        [data-element-type='134'] .col {
            padding-left: 0;
            padding-right: 0;
        }
    /* Process Step Style 06 - Timeline variant */
    .process-step-style-06 {
        position: relative;
        padding-left: 20px;
        min-height: 120px;
    }

        .process-step-style-06.last-paragraph-no-margin p:last-child {
            margin-bottom: 0;
        }
    /* Process Step Icon Box - Timeline container */
    .process-step-icon-box {
        position: relative;
    }

        .process-step-icon-box.top-minus-14px {
            top: -14px;
        }
    /* Timeline separator line */
    .progress-step-separator {
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        vertical-align: middle;
        transform: translateY(-50%);
    }

        .progress-step-separator.bg-light-gray {
            background-color: #f0f0f0;
        }

        .progress-step-separator.separator-line-1px {
            height: 1px;
        }

        .progress-step-separator.opacity-1 {
            opacity: 1;
        }
    /* Step Box - Circle point */
    .step-box {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1.7);
        will-change: transform;
    }

        .step-box.d-flex {
            display: flex;
        }

        .step-box.align-items-center {
            align-items: center;
        }

        .step-box.justify-content-center {
            justify-content: center;
        }

        .step-box.border-radius-100 {
            border-radius: 50%;
        }

        .step-box.bg-white {
            background-color: white;
        }

        .step-box.border {
            border: 1px solid;
            border-color: var(--rgba-primary-6);
        }

        .step-box.border-color-extra-medium-gray {
            border-color: #ddd;
        }

        .step-box.box-shadow-large {
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        }

        .step-box.w-25px {
            width: 25px;
        }

        .step-box.h-25px {
            height: 25px;
        }
        /* Inner dot */
        .step-box > span.w-7px.h-7px.bg-dark-gray.border-radius-100 {
            width: 7px;
            height: 7px;
            background-color: var(--color-primary);
            border-radius: 50%;
            transition: all 0.3s ease;
        }
    /* Hover effect */
    .process-step-style-06:hover .step-box {
        transform: scale(1.3);
    }
    /* Icon inside step-box */
    .step-box i {
        font-size: 12px;
        transition: all 0.3s ease;
    }

    .process-step-style-06:hover .step-box i {
        transform: scale(1.1);
    }
    /* Text content styling */
    .process-step-style-06 span.d-block.alt-font.text-dark-gray.fw-600 {
        margin-bottom: 10px;
        margin-top: 15px;
        font-size: 22px;
        line-height: 28px;
        letter-spacing: -0.5px;
        color: #333;
        font-weight: 600;
        max-width: 80%;
        font-family: 'Georgia', serif;
    }

    .process-step-style-06 p {
        color: #666;
        font-size: 14px;
        line-height: 1.6;
    }

        .process-step-style-06 p.w-60.lg-w-75.md-w-100.sm-w-100 {
            max-width: 60%;
        }
    /* Responsive sizing */
    @media (max-width: 1199px) {
        .process-step-style-06 span.d-block.alt-font.text-dark-gray.fw-600 {
            max-width: 75%;
        }

        .process-step-style-06 p.w-60.lg-w-75.md-w-100.sm-w-100 {
            max-width: 75%;
        }
    }

    @media (max-width: 991px) {
        .process-step-style-06 {
            padding-left: 0;
            min-height: auto;
            margin-bottom: 0;
        }

        .progress-step-separator {
            display: none;
        }

        .process-step-style-06 span.d-block.alt-font.text-dark-gray.fw-600 {
            max-width: 100%;
            margin-top: 15px;
        }

        .process-step-style-06 p.w-60.lg-w-75.md-w-100.sm-w-100 {
            max-width: 100%;
        }
    }

    @media (max-width: 575px) {
        .process-step-style-06 {
            padding-left: 0;
            margin-bottom: 50px;
        }

            .process-step-style-06 span.d-block.alt-font.text-dark-gray.fw-600 {
                font-size: 18px;
                max-width: 100%;
            }

            .process-step-style-06 p {
                font-size: 13px;
                max-width: 100%;
            }

            .process-step-style-06.sm-mb-50px {
                margin-bottom: 50px;
            }
    }

/* ===================================
   FAQ Style 5 (Element 135) - With Left Content
====================================== */
.accordion-style-02 {
    .accordion-item {
        background-color: transparent;
        padding: 0;
        margin-bottom: 0;
        border: none;

        .accordion-header {
            margin-bottom: 0;
            padding: 15px 0;
            border: none;
            background-color: transparent;
            border-bottom: 1px solid #ddd;
            transition: border-color 0.3s ease;

            &.border-open {
                border-bottom-color: transparent !important;
            }

            .accordion-title {
                display: flex;
                align-items: center;
                gap: 12px;
                cursor: pointer;
                position: relative;

                i {
                    color: var(--dark-gray);
                    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
                    width: 18px;
                    text-align: center;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                }

                span {
                    margin: 0;
                    padding: 0;
                }
            }

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

                &:hover .accordion-title span {
                    color: var(--base-color);
                }
            }
        }

        .accordion-body {
            padding: 0 0 15px 30px;
            border: none;

            p {
                margin: 0;
                color: var(--text-color, #666);
                font-size: 14px;
                line-height: 1.6;
            }
        }

        &.active-accordion {
            .accordion-header {
                border-bottom-color: transparent;

                .accordion-title {
                    i {
                        color: var(--base-color);
                    }
                }
            }
        }
    }

    .border-bottom {
        border-bottom: 1px solid #ddd !important;
    }

    .border-color-dark-gray {
        border-bottom-color: #999 !important;
    }

    .border-color-transparent {
        border-bottom-color: transparent !important;
    }
}
.faq-135-title {
    margin-bottom: auto;
    margin-top: 1rem;
}
/* Responsive for Element 135 FAQ */
@media (max-width: 991.98px) {
    .accordion-style-02 {
        .accordion-item {
            .accordion-body {
                padding: 0 0 15px 25px;
            }
        }
    }
}

@media (max-width: 575.98px) {
    .accordion-style-02 {
        .accordion-item {
            .accordion-header {
                padding: 12px 0;

                .accordion-title {
                    gap: 8px;

                    i {
                        font-size: 14px;
                    }

                    span {
                        font-size: 16px;
                    }
                }
            }

            .accordion-body {
                padding: 0 0 12px 22px;

                p {
                    font-size: 13px;
                }
            }
        }
    }
}

/* Sliding box zoom effect */ 
@keyframes scale-effect {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes scale-effect {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* Sliding box fade effect */ 
@keyframes fade {
    0% {
        opacity: 0.2;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fade {
    0% {
        opacity: 0.2;
    }
    to {
        opacity: 1;
    }
}

/* Sliding box right effect */ 
@keyframes slide-right {
    0% {
        -webkit-transform: translateX(-25px);
        transform: translateX(-25px);
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(-25px);
        transform: translateX(-25px);
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/* Sliding box */ 
.sliding-box * {
    will-change: transform;
}
.sliding-box .sliding-box-item {        
    margin-left: 15px;
    margin-right: 15px;
    float: right;
    overflow: hidden;
    position: relative;        
    -webkit-transition: width 0.7s;
    transition: width 0.7s;
}
.sliding-box .sliding-box-item .sliding-box-content {
    top: 0;
    height: 100%;
    position: absolute;
}

/* Sliding box style 01 */ 
.sliding-box-style-01 .sliding-box-item .sliding-box-content:after {
    content: '';
    left: 100%;
    top: 50%;
    height: 0;
    width: 0;
    opacity: 0;
    z-index: 9;
    margin-top: -10px;
    position: absolute;
    border: solid transparent;
    border-left-color: #ffffff;
    border-width: 12px;
    pointer-events: none;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.sliding-box-style-01 .sliding-box-item.active .sliding-box-content:after,
.sliding-box-style-01 .sliding-box-item:hover .sliding-box-content:after {
    opacity: 1;
}

/* Sliding box style 02 */ 
.sliding-box-style-02 .sliding-box-item .sliding-box-img {
    border-radius: 4px;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.sliding-box-style-02 .sliding-box-item.active .sliding-box-img {
    border-radius: 0 4px 4px 0;
}
.sliding-box-style-02 .sliding-box-item.active .sliding-box-content {
    border-radius: 4px 0 0 4px;
}
.sliding-box-style-02 .sliding-box-item.active .content-hover {
    animation: fade 1s;
}

/* Sliding box style 03 */ 
.sliding-box-style-03 .overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    z-index: 1;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.sliding-box-style-03 .overlay-contnet {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}
.sliding-box-style-03 .number {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    text-align: center;
}
.sliding-box-style-03 .sliding-box-content:after {
    display: none;
}
.sliding-box-style-03.active .overlay {
    opacity: 0;
    visibility: hidden;
}
.sliding-box-style-03.active .overlay-contnet {
    opacity: 0;
    visibility: hidden;
}

/* =========================================
    Element 136: Events / When and Where
=========================================== */


.sliding-box-style-02 {
    gap: 0;
    padding: 0 15px;
}

.sliding-box-item {
    cursor: pointer;
    transition: all 0.5s ease;
    min-width: 280px;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
}

.sliding-box-img {
    overflow: hidden;
    border-radius: 8px;
    height: 300px;
    width: 100%;
    min-width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.5s ease;
}

.sliding-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sliding-box-item:hover .sliding-box-img img {
    transform: scale(1.05);
}

.sliding-box-content {
    opacity: 0;
    transition: opacity 0.4s ease, width 0.5s ease, padding 0.5s ease;
    overflow-y: auto;
    min-height: 300px;
    width: 0;
    min-width: 0;
    padding: 0;
    border-radius: 8px;
    direction: rtl;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sliding-box-item.active .sliding-box-img {
    width: 280px;
}

.sliding-box-item.active .sliding-box-content {
    opacity: 1;
    width: 350px;
    padding: 30px;
}

.content-hover {
    animation: slideInContent 0.4s ease forwards;
}

@keyframes slideInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive: Sliding Box */
@media (max-width: 1199px) {
    .sliding-box-item {
        min-width: 220px;
    }

    .sliding-box-img {
        height: 220px;
        min-width: 220px;
    }

    .sliding-box-item.active .sliding-box-img {
        width: 220px;
    }

    .sliding-box-item.active .sliding-box-content {
        width: 280px;
        min-height: 220px;
    }
}

@media (max-width: 767px) {
    .sliding-box {
        flex-direction: column !important;
    }

    .sliding-box-item {
        width: 100% !important;
        flex-direction: column !important;
        margin-bottom: 20px;
        min-width: unset;
        min-height: auto;
    }

    .sliding-box-img {
        height: 250px;
        width: 100% !important;
        min-width: unset;
        border-radius: 8px 8px 0 0;
        flex-shrink: 0;
    }

    .sliding-box-content {
        opacity: 1 !important;
        width: 100% !important;
        min-height: auto;
        padding: 20px !important;
        border-radius: 0 0 8px 8px;
        position: relative;
        left: auto !important;
        right: auto !important;
        height: auto !important;
    }

    .sliding-box-item.active {
        width: 100% !important;
    }

    .sliding-box-item.active .sliding-box-img {
        width: 100% !important;
        border-radius: 8px 8px 0 0;
    }

    .sliding-box-item.active .sliding-box-content {
        width: 100% !important;
        min-height: auto;
        border-radius: 0 0 8px 8px;
        opacity: 1 !important;
        animation: none !important;
    }

    .sliding-box-item.active .content-hover {
        animation: none !important;
    }
}

.right-25px {
    right: 25px;
}

.bottom-25px {
    bottom: 25px;
}

.pb-20px {
    padding-bottom: 20px !important;
}

.pt-20px {
    padding-top: 20px !important;
}

.w-80px {
    width: 80px !important;
}
.sliding-box-item p {
    margin-bottom: 0;
}
.mb-40px {
    margin-bottom: 40px !important;
}

.icon-large {
    font-size: 42px;
}

/* Tablet/Mobile navigation: compact list rows with a directional disclosure icon. */
.mobile-navigation-menu__main .main-menu {
    margin: 0;
}

.mobile-navigation-menu__main .main-menu > li > .mobile-main-category,
.mobile-navigation-menu__main .main-menu > li > .mobile-navigation-parent-row {
    border-bottom: 1px solid #dce1e3;
}

.mobile-navigation-menu__main .mobile-main-category {
    min-height: 53px;
    padding: 15px 0 !important;
    color: #111 !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    text-align: start;
}

.mobile-navigation-menu__main .mobile-main-category:hover,
.mobile-navigation-menu__main .mobile-main-category:focus {
    color: #111 !important;
}

.mobile-navigation-menu__main .mobile-navigation-parent-row {
    min-height: 53px;
}

.mobile-navigation-menu__main .mobile-dropdown-expander {
    display: grid;
    min-height: 52px;
    place-items: center;
    color: #111;
}

.mobile-navigation-menu__main .mobile-dropdown-expander::after {
    position: static;
    content: "\f104";
    margin: 0;
    color: currentColor;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro";
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    transform: none;
}

.mobile-navigation-menu__main .mobile-dropdown-expander[aria-expanded="true"]::after {
    content: "\f107";
    color: currentColor;
    transform: none;
}

html[dir="ltr"] .mobile-navigation-menu__main .mobile-dropdown-expander[aria-expanded="false"]::after {
    transform: scaleX(-1);
}

.mobile-navigation-menu__main .mobile-main-category-collapse {
    margin-top: 0;
}

.mobile-navigation-menu__main .mobile-category-container {
    padding: 6px 0 4px;
}

.mobile-navigation-menu__main .mobile-category-item {
    margin: 0;
    border-bottom: 1px solid #edf0f1;
}

.mobile-navigation-menu__main .mobile-category-item:last-child {
    border-bottom: 0;
}

.mobile-navigation-menu__main .mobile-category-level2-link,
.mobile-navigation-menu__main .mobile-category-level3-link,
.mobile-navigation-menu__main .mobile-category-level4-link,
.mobile-navigation-menu__main .mobile-category-level5-link,
.mobile-navigation-menu__main .mobile-category-level6-link,
.mobile-navigation-menu__main .mobile-category-level7-link {
    padding: 10px 0;
    margin: 0;
    border: 0;
    color: #555 !important;
    font-size: 14px;
    font-weight: 400;
    text-align: start;
}

.mobile-navigation-menu__main .mobile-navigation-parent-row--nested {
    min-height: 42px;
}

.mobile-navigation-menu__main .mobile-navigation-parent-row--nested .mobile-dropdown-expander {
    min-height: 42px;
    color: #555;
}

.mobile-navigation-menu__main .mobile-category-level2-link:hover,
.mobile-navigation-menu__main .mobile-category-level3-link:hover,
.mobile-navigation-menu__main .mobile-category-level4-link:hover,
.mobile-navigation-menu__main .mobile-category-level5-link:hover,
.mobile-navigation-menu__main .mobile-category-level6-link:hover,
.mobile-navigation-menu__main .mobile-category-level7-link:hover {
    color: #333 !important;
}