/* 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;
}
@media (max-width: 1060px) {
    h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
        line-height:1.2;
    }
}
    :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;
    }

    .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;
    }


.glass-header .big-menu > ul > li > a.nav-link, .glass-header .big-menu > .full-menu-container > a.nav-link {
    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 {
    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 {
    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 {
        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: 40px;
    }
    /*------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: 60px;
    }

    .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(--text-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: 58, 116, 255;
        --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);
}
.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 {
        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: 70px 10px 0 0;
    }

    .aiart-un-btn-sm {
        width: 58px;
        height: 58px;
        background: -webkit-gradient(linear, left bottom, left top, from(#5b795a), to(#202329));
        background: linear-gradient(0deg, #547553, #ccceca);
    }

    @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;
}
.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;
}
.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_1100{
    position:relative;
}
    .search_1100 .resault .resault-partial .row a {
    
    color:inherit;
    }
    .search_1100 .resault .resault-partial .row {
    
    padding-inline:1rem;
    }
    .search_1100 .resault .resault-partial {
        background: white;
        height: 50vh;
        right: 0;
        position: absolute;
        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_1100 .resault .search-row * {
    margin-block:auto;
    }
    .search_1100 .resault .search-row:hover {
        background-color: var(--rgba-primary-1);
        border-radius:5px;
        transition: all 0.4s ease-in-out;

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

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

        .search_1100 .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;
}
درسته، بیایم یه کد کامل HTML با روش دوم (بدون وابستگی به Animate.css و با انیمیشن‌های دستی) بسازیم. این کد از WOW.js برای تشخیص اسکرول استفاده می‌کنه و انیمیشن‌ها رو با CSS خالص مدیریت می‌کنه. تصویر از مبدا (مثل راست یا چپ) شروع می‌کنه و به مقصد (موقعیت اصلی‌ش) می‌رسه.

کد کامل HTML:
html

Preview

Collapse

Wrap

Copy
<!DOCTYPE html >
<html >
<head >
<meta charset="UTF-8" >
<title > Test Animation with Custom CSS</title >
<style >
/* استایل‌های پایه */
.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;
    /* animation-duration از data-wow-duration توسط WOW.js اعمال می‌شه */
}
/* تعریف 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;
    }

    /* استایل‌های بخش سرچ */
.search-input-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #FFF;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    transform: translateX(-100%);
}

        .search-input-container.active {
            display: flex;
            animation: slideInFromLeft 0.5s ease-in-out forwards;
        }

    .search-input-wrapper {
        position: relative;
        width: 100%;
        max-width: 1200px;
        padding: 0 15px;
    }

    .search-input {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        border: none;
        padding: 0 40px 0 15px;
        font-family: IRANSansWebFaNum, sans-serif;
        font-size: 16px;
    }

        .search-input:focus {
            border-color: var(--color-primary);
            box-shadow: none;
        }

    .search-close-btn {
        position: absolute;
        right: 25px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

        .search-close-btn:hover {
            color: var(--color-secondary);
        }

    /* انیمیشن ظاهر شدن از چپ به راست */
    @keyframes slideInFromLeft {
        from {
            transform: translateX(-100%);
        }

        to {
            transform: translateX(0);
        }
    }

    /* انیمیشن مخفی شدن به چپ */
    @keyframes slideOutToLeft {
        from {
            transform: translateX(0);
        }

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

    @media (min-width: 1200px) {
        .m-headsearch {
            display: none;
        }
    }
#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;
}

    .productGalleryMain .swiper-slide {
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.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: #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;
}

    .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;
}
    .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;
}

.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;
}

.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 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

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


    .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: #007bff;
}

.swiper-pagination-bullet-active {
    background: #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: #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: #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: #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: #007bff;
        border-radius: 50%;
        cursor: pointer;
    }

.swiper-button-next,
.swiper-button-prev {
    color: #007bff;
}

.swiper-pagination-bullet-active {
    background: #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-left: none !important;
    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 {
    font-size: 0.75rem;
}

.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;
    background-color: #f8f9fa;
}
.primary-inline-border {
    border-inline: 4px solid var(--color-primary);
    padding: 10px 16px;
    margin: 8px 0;
    background-color: #f8f9fa;
}
.primary-left-border {
    border-left: 4px solid var(--color-primary);
    padding: 10px 16px;
    margin: 8px 0;
    background-color: #f8f9fa;
}
.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 a {
    color: white;
    text-decoration: none;
}
.breadcrumb-item.active {
    color: var(--color-primary);
}
div.dynamic-breadcrumb {
    position: absolute;
    bottom: 0;
    z-index:2;
}