:root, [data-bs-theme=light] {
    --ar-primary: #ed1c24;
    --ar-primary-rgb: 237,28,36;
    --ar-link-color: #ed1c24;
    --ar-link-hover-color: #d4030b;
    --ar-border-radius: 0.25rem;
    --ar-border-radius-sm: calc(var(--ar-border-radius)*0.75);
    --ar-root-font-size: 1rem;
    --ar-body-font-family: 'Inter',sans-serif;
    --ar-warning: #f7c146;
    --ar-warning-rgb: 247,193,70;
    --ar-info: #377dd2;
    --ar-info-rgb: 55,125,210;
    --ar-success: #1cc152;
    --ar-success-rgb: 28,193,82;
    --ar-danger: #dc0a0a;
    --ar-danger-rgb: 220,10,10;
}

[data-bs-theme=dark] {
    --ar-primary: #fff;
}

.navbar-stuck[data-bs-theme="dark"] {
    --ar-navbar-color: var(--ar-nav-link-color);
}

    .navbar-stuck[data-bs-theme="dark"] .nav-link {
        color: var(--ar-nav-link-color);
    }

        .navbar-stuck[data-bs-theme="dark"] .nav-link:hover {
            color: #d4030b;
        }


.btn-primary {
    --ar-btn-bg: #ed1c24;
    --ar-btn-border-color: #ed1c24;
    --ar-btn-hover-bg: #d4030b;
    --ar-btn-hover-border-color: #d4030b;
    --ar-btn-active-bg: #d4030b;
    --ar-btn-active-border-color: #d4030b;
    --ar-btn-disabled-bg: #ed1c24;
    --ar-btn-disabled-border-color: #ed1c24;
}

.btn-warning {
    --ar-btn-bg: #f7c146;
    --ar-btn-border-color: #f7c146;
    --ar-btn-hover-bg: #dea82d;
    --ar-btn-hover-border-color: #dea82d;
    --ar-btn-active-bg: #dea82d;
    --ar-btn-active-border-color: #dea82d;
    --ar-btn-disabled-bg: #f7c146;
    --ar-btn-disabled-border-color: #f7c146;
}

.btn-info {
    --ar-btn-bg: #377dd2;
    --ar-btn-border-color: #377dd2;
    --ar-btn-hover-bg: #1e64b9;
    --ar-btn-hover-border-color: #1e64b9;
    --ar-btn-active-bg: #1e64b9;
    --ar-btn-active-border-color: #1e64b9;
    --ar-btn-disabled-bg: #377dd2;
    --ar-btn-disabled-border-color: #377dd2;
}

.btn-success {
    --ar-btn-bg: #1cc152;
    --ar-btn-border-color: #1cc152;
    --ar-btn-hover-bg: #03a839;
    --ar-btn-hover-border-color: #03a839;
    --ar-btn-active-bg: #03a839;
    --ar-btn-active-border-color: #03a839;
    --ar-btn-disabled-bg: #1cc152;
    --ar-btn-disabled-border-color: #1cc152;
}

.btn-danger {
    --ar-btn-bg: #dc0a0a;
    --ar-btn-border-color: #dc0a0a;
    --ar-btn-hover-bg: #c30000;
    --ar-btn-hover-border-color: #c30000;
    --ar-btn-active-bg: #c30000;
    --ar-btn-active-border-color: #c30000;
    --ar-btn-disabled-bg: #dc0a0a;
    --ar-btn-disabled-border-color: #dc0a0a;
}

.btn-outline-primary {
    --ar-btn-color: #ed1c24;
    --ar-btn-border-color: #ed1c24;
    --ar-btn-hover-bg: #ed1c24;
    --ar-btn-hover-border-color: #ed1c24;
    --ar-btn-active-bg: #ed1c24;
    --ar-btn-active-border-color: #ed1c24;
    --ar-btn-disabled-color: #ed1c24;
    --ar-btn-disabled-border-color: #ed1c24;
}

.btn-outline-warning {
    --ar-btn-color: #f7c146;
    --ar-btn-border-color: #f7c146;
    --ar-btn-hover-bg: #f7c146;
    --ar-btn-hover-border-color: #f7c146;
    --ar-btn-active-bg: #f7c146;
    --ar-btn-active-border-color: #f7c146;
    --ar-btn-disabled-color: #f7c146;
    --ar-btn-disabled-border-color: #f7c146;
}

.btn-outline-info {
    --ar-btn-color: #377dd2;
    --ar-btn-border-color: #377dd2;
    --ar-btn-hover-bg: #377dd2;
    --ar-btn-hover-border-color: #377dd2;
    --ar-btn-active-bg: #377dd2;
    --ar-btn-active-border-color: #377dd2;
    --ar-btn-disabled-color: #377dd2;
    --ar-btn-disabled-border-color: #377dd2;
}

.btn-outline-success {
    --ar-btn-color: #1cc152;
    --ar-btn-border-color: #1cc152;
    --ar-btn-hover-bg: #1cc152;
    --ar-btn-hover-border-color: #1cc152;
    --ar-btn-active-bg: #1cc152;
    --ar-btn-active-border-color: #1cc152;
    --ar-btn-disabled-color: #1cc152;
    --ar-btn-disabled-border-color: #1cc152;
}

.btn-outline-danger {
    --ar-btn-color: #dc0a0a;
    --ar-btn-border-color: #dc0a0a;
    --ar-btn-hover-bg: #dc0a0a;
    --ar-btn-hover-border-color: #dc0a0a;
    --ar-btn-active-bg: #dc0a0a;
    --ar-btn-active-border-color: #dc0a0a;
    --ar-btn-disabled-color: #dc0a0a;
    --ar-btn-disabled-border-color: #dc0a0a;
}

.accordion-button:not(.collapsed)::after {
    --ar-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23ed1c24'%3e%3cpath%20d='M.5%206.3c.6-.6%201.6-.6%202.3%200l9.3%209.3%209.3-9.3c.6-.6%201.6-.6%202.3%200%20.6.6.6%201.6%200%202.3L13.3%2018.8c-.6.6-1.6.6-2.3%200L.8%208.5c-.9-.8-.9-1.6-.3-2.2z'/%3e%3c/svg%3e");
}

html {
    font-family: 'YekanBakh2', 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}

body {
    font-family: 'YekanBakh2', 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: #677788;
    text-align: right;
    background-color: #fff;
    letter-spacing: 0;
}

body {
    --ar-bg-opacity: 1;
    background-color: var(--ar-gray-100) !important;
}




.navbar-brand .logo {
    height: 1.8rem
}




footer .logo {
    height: 1.5rem
}

py-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.btn:focus {
    outline: 0;
}


.progress {
    --ar-progress-bar-bg: #008748;
}

.alert-success {
    --ar-alert-color: #008748;
    --ar-alert-bg: #ecfaf4;
    --ar-alert-border-color: #56da82;
}

.object-fit-img {
    object-fit: contain;
    height: 7rem;
    padding: 0.5rem;
    width: 7rem;
}

.progress {
    --ar-progress-height: 1.5rem;
}

.dark-mode .btn.fileinput-button {
    line-height: 1.4;
    color: var(--ar-body-color);
    background-color: transparent;
    background-clip: padding-box;
    border: var(--ar-border-width) solid var(--ar-gray-400);
}


.dark-mode .file-del, .dark-mode .view-file {
    color: var(--ar-body-color);
    text-decoration: none;
}

.project .card-img-top {
    object-fit: cover;
    height: 200px;
    object-position: center center;
}

.arrow-svg {
    transform: rotate(-195deg);
}

.blog-list article, .blog-list article .card .icon-arrow {
    transition: all 0.3s ease-in-out;
}

    .blog-list article:hover .card-title a {
        color: var(--ar-heading-link-hover-color);
    }

    .blog-list article .card {
        overflow: hidden
    }

        .blog-list article .card:after {
            display: block;
            content: '';
            border-bottom: solid 3px var(--ar-heading-link-hover-color);
            transform: scaleX(0);
            transition: transform 250ms ease-in-out;
        }

    .blog-list article:hover .card:after {
        transform: scaleX(1);
    }

    .blog-list article .card .icon-arrow {
        color: var(--ar-heading-color);
    }

    .blog-list article:hover .card .icon-arrow {
        transform: rotate(45deg);
        color: var(--ar-heading-link-hover-color)
    }



.border-scale {
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

    .border-scale:after {
        display: block;
        content: '';
        margin-top: -1px;
        border-bottom: solid 3px var(--ar-heading-link-hover-color);
        transform: scaleX(0);
        transition: transform 250ms ease-in-out;
    }

.box-hover {
    transition: all 0.3s ease-in-out;
}

    .box-hover:hover .title-hover a {
        color: var(--ar-heading-link-hover-color);
    }

    .box-hover:hover .border-scale:after, .border-scale:hover:after {
        transform: scaleX(1);
    }

    .box-hover .icon-arrow-rotate, .icon-arrow-rotate {
        transition: all 0.3s ease-in-out;
    }

        .box-hover:hover .icon-arrow-rotate, .icon-arrow-rotate:hover {
            transform: rotate(-45deg);
            color: var(--ar-heading-link-hover-color)
        }

    .box-hover .img-sacle, .img-sacle {
        overflow: hidden;
    }

        .box-hover .img-sacle img, .img-sacle img {
            transform: scale(1);
            transition: all 0.3s ease-in-out;
        }

        .box-hover:hover .img-sacle img, .img-sacle:hover img {
            transform: scale(1.1);
        }

#table-contents ul {
    list-style: none;
    padding: 0;
}

    #table-contents ul li a {
        color: var( --ar-heading-color);
        text-decoration: none;
        display: block;
        margin-bottom: 15px;
        font-weight: 500;
        font-size: 0.9rem;
        padding-right: 1rem;
        border-right: 3px solid transparent;
        transition: all 0.3s ease-in-out;
    }

        #table-contents ul li a:hover {
            color: var(--ar-heading-link-hover-color);
        }

        #table-contents ul li a.selected {
            color: var(--ar-heading-link-hover-color);
            border-right: 3px solid var(--ar-heading-link-hover-color);
        }

.transition-inner-all * {
    -webkit-transition: all .4s cubic-bezier(.37,0,.63,1);
    transition: all .4s cubic-bezier(.37,0,.63,1);
}


/* Portfolio classic */
.portfolio-box {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    overflow: hidden;
    will-change: transform;
}

    .portfolio-box .portfolio-hover {
        opacity: 0;
        transform: translate3d(0, 45px, 0);
    }

    .portfolio-box:hover {
        -webkit-clip-path: inset(2% 2% 2% 2%);
        clip-path: inset(2% 2% 2% 2%);
    }

        .portfolio-box:hover .portfolio-image img {
            opacity: 0.15;
            -webkit-filter: blur(4px);
            filter: blur(4px);
        }

        .portfolio-box:hover .portfolio-hover {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

    .portfolio-box .portfolio-icon a {
        margin: 0 4px;
        position: relative;
        -webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
    }

    .portfolio-box .portfolio-overlay {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    .portfolio-box:hover {
        -webkit-box-shadow: -10px 0 70px rgba(0, 0, 0, 0.15);
        box-shadow: -10px 0 70px rgba(0, 0, 0, 0.15);
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

        .portfolio-box:hover .portfolio-image img {
            opacity: 0.3;
        }

        .portfolio-box:hover .portfolio-overlay {
            opacity: 1;
            visibility: visible;
        }


    .portfolio-box .portfolio-hover {
        opacity: 0;
        transform: translate3d(0, 45px, 0);
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .portfolio-box:hover {
        -webkit-clip-path: inset(2% 2% 2% 2%);
        clip-path: inset(2% 2% 2% 2%);
    }

        .portfolio-box:hover .portfolio-hover {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

    .portfolio-box .overlay-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        opacity: 1;
        visibility: visible;
    }

    .portfolio-box:hover .overlay-box {
        opacity: 0;
        visibility: hidden;
    }

    .portfolio-box .logo {
        filter: brightness(0) invert(1);
        width: 200px;
    }

    .portfolio-box .badge {
        background: rgba(255,255,255,0.35);
        color: #fff
    }



.bg-gradient-pink-orange {
    background-image: linear-gradient(to right top, #de347f, #e73a70, #ed4461, #f05152, #ef5f43);
}

.img-comp-container {
    position: relative;
    height: 200px; /*should be the same height as the images*/
}

.img-comp-img {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
}

    .img-comp-img img {
        display: block;
        vertical-align: middle;
    }

.img-comp-slider {
    position: absolute;
    z-index: 9;
    cursor: ew-resize;
    /*set the appearance of the slider:*/
    width: 40px;
    height: 40px;
    background-color: #2196F3;
    opacity: 0.7;
    border-radius: 50%;
}

@media (min-width: 1200px) {
    h4, .h4 {
        font-size: 1.4rem;
    }
}


@media (max-width: 768px) {
    .arrow-svg {
        transform: rotate(98deg);
    }

    .tab-projects .nav-link {
        font-size: 0.78rem;
    }

    header .btn {
        --ar-btn-padding-y: 0.575rem;
        --ar-btn-padding-x: 1.25rem;
        --ar-btn-font-size: calc(var(--ar-body-font-size) * 0.75);
        --ar-btn-border-radius: var(--ar-border-radius-sm);
    }

    .navbar-brand .logo {
        height: 1.4rem
    }
}


article.page h2 {
    font-size: 1.75rem;
    padding-top: 2rem;
}

article.page h3 {
    font-size: 1.4rem;
    padding-top: 1.5rem;
}

article.page p {
    margin-bottom: .75rem;
}

article.page .blockquote {
    font-size: 1.25rem
}

#modal-letsTalk {
    background: rgb(237 28 36 / 50%);
    transform: scale(0);
    opacity: 0;
    transition: all 0.75s ease-in-out;
}

    #modal-letsTalk.show {
        opacity: 1;
        transform: scale(1);
    }


.images-compare-container .images-compare-label {
    display: none !important;
}

.currency-rls:after {
    font-size: 0.6em;
    content: "ریال";
    margin-right: 2px;
}

.currency-tmn:after {
    font-size: 0.6em;
    content: "تومان";
    margin-right: 2px;
}

.currency-tmn-m:after {
    font-size: 0.6em;
    content: "تومان/ماه";
    margin-right: 2px;
}

.currency-tmn-y:after {
    font-size: 0.6em;
    content: "تومان/سال";
    margin-right: 2px;
}


.masonry-filters .nav-item {
    margin: 0 !important;
}

    .masonry-filters .nav-item a.nav-link {
        border-radius: 5px;
        padding: 10px 15px
    }

        .masonry-filters .nav-item a.nav-link.active {
            border: 0px !important;
        }


.icon-arrow-rotate.ai-arrow-up-right:before {
    content: "\f10f" !important;
}

.content-toggle {
    height: 620px;
    overflow: hidden;
    transition: all 1s ease-in-out;
}

    .content-toggle.show {
        height: auto;
    }

.projects-slide .logo {
    width: 150px;
}

.projects-slide .badge {
    background: rgba(255,255,255,0.35);
    color: #000
}

.projects-slide[data-bs-theme="dark"] .logo {
    filter: brightness(0) invert(1);
    width: 150px;
}

.projects-slide[data-bs-theme="dark"] .badge {
    color: #fff
}

.projects-slide .line:before {
    width: 60px;
    height: 3px;
    background: var(--ar-primary);
    border-radius: 1px;
    bottom: -15px;
}

.projects-slide[data-bs-theme="light"] .description, .projects-slide[data-bs-theme="light"] a {
    color: #000
}

.projects-slide[data-bs-theme="dark"] .description {
    color: #fff;
    opacity: 0.75;
}

.projects-slide[data-bs-theme="dark"] a {
    color: #fff;
}