@font-face {
    font-family: YekanBakh-SemiBold;
    src: url(/v3/font/YekanBakh-SemiBold.ttf);
}

@font-face {
    font-family: YekanBakh-Regular;
    src: url(/v3/font/YekanBakh-Regular.ttf);
}

:root {
    --theme-color: black;
    --font-color1: black;
    --font-color2: white;
    --hover-font-color1: rgb(163, 163, 163);
    --cnvs-themecolor-rgb: var(--theme-color);
    --cnvs-body-font: "YekanBakh-Regular";
    --cnvs-side-header-width: 10% !important;
    --cnvs-color-appstore: white !important;
    --cnvs-themecolor: var(--theme-color);
    --cnvs-btn-color: var(--font-color1) !important;
    --selected-menu-item-color: rgb(104, 104, 104);
    --navbar-width: 10%;
    --navbar-height: 100%;
    --color-gray1: #e8e8e8;

    --sidenav-logo-padding-top: 25%;
    --sidenav-logo-width: 50%;
    --sidenav-logo-height: 50%;

    --sidenav-menu-item-font-size: 14px;
    --sidenav-menu-item-font-color: var(--font-color1);
    --sidenav-menu-item-hover-font-color: var(--hover-font-color1);
    --sidenav-menu-item-line-height: 12px;

    --sidenav-social-color: var(--font-color2);
    --sidenav-social-border-size: 1px;
    --sidenav-social-border-color: var(--font-color1);
}

body,
html {
    height: 100%;
    margin: 0;
    font-family: "YekanBakh-Regular";
}

.font-secondary {
    font-family: "YekanBakh-SemiBold" !important;
}

.menu-link {
    font-family: "YekanBakh-SemiBold" !important;
}

.sidenav {
    height: var(--navbar-height);
    width: var(--navbar-width);
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: var(--color-gray1);
    overflow-x: hidden;
    padding-top: 0;
    text-align: center;
    /* max-width: 100px; */
}

.sidenav .logo {
    padding-top: var(--sidenav-logo-padding-top);
}

.sidenav .logo img {
    width: var(--sidenav-logo-width);
    height: var(--sidenav-logo-height);
}

.sidenav .menu-parent {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    line-height: var(--sidenav-menu-item-line-height);
    /* border: 1px solid red; */
    /* padding-left: 10%; */
    text-align: center;
}

.sidenav .menu-parent a {
    font-family: "YekanBakh-SemiBold" !important;
    text-decoration: none;
    font-size: var(--sidenav-menu-item-font-size);
    color: var(--sidenav-menu-item-font-color);
    /* color: Black; */
    cursor: pointer !important;
    display: block;
    -moz-osx-font-smoothing: grayscale;
    /* Firefox */
    -webkit-font-smoothing: antialiased;
    /* WebKit  */
}

.sidenav .menu-parent a:hover {
    color: var(--sidenav-menu-item-hover-font-color);
}


.sidenav .social {
    position: absolute;
    bottom: 1%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.sidenav .social .circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 32px;
    text-align: center;
    background: var(--sidenav-social-border-color);
    margin-top: 50%;
}

.sidenav .social a {
    color: var(--sidenav-social-color);
    text-decoration: none;
    display: block;
}

/* .main {
    margin-left: var(--navbar-width);
}

.main .slider{
    background-image: url("/v3/img/bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} */

/* .row {
    margin-left: var(--navbar-width);
} */

.journey-cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("/v3/img/bg.jpg");
}

.full-height {
    height: 100%;
}

.color {
    color: var(--theme-color) !important
}

.list-group-content>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 4rem;
    padding-right: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, .15)
}

@media(max-width: 991px) {
    #header-wrap {
        display: none;
    }

    .slider-logo {
        display: block;
        position: absolute;
        width: 100px;
        height: 100px;
        z-index: 1;
        top: 50px;
        left: 50px;
    }

    #footer {
        display: block;
    }

    /*Burger-Menu*/

    .header {
        padding: 5px 5px;
        background: rgba(22, 22, 23, .3);
        ;
        z-index: 2000 !important;
        text-align: right;
        height: 60px;
        position: sticky;
        top: 0;
        /* filter: saturate(180%) blur(20px);; */
    }

    .menu-logo {
        float: left;
        padding-top: 0px;
        padding-left: 0px;
    }

    .menu {
        position: relative;
        width: 30px;
        /* height: 30px; */
        margin: 8px;
    }

    .menu span {
        margin: 0 auto;
        position: relative;
        top: 12px;
        display: block;
        z-index: 1;
    }

    .menu span:before,
    .menu span:after {
        position: absolute;
        content: '';
    }

    .menu span,
    .menu span:before,
    .menu span:after {
        width: 30px;
        height: 6px;
        background-color: var(--font-color2);
        display: block;
    }

    .menu span:before {
        margin-top: -12px;
    }

    .menu span:after {
        margin-top: 12px;
    }

    #sized {
        color: white;
        font-size: 30px;
        background-color: transparent;
        border: transparent;
    }

    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        padding: 0.5%;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .modal-content {
        position: relative;
        margin: auto;
        padding: 0;
        width: 100%;
        height: 98vh;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s;
    }

    .modal-header {
        padding: 2px 16px;
        border-bottom: none;
        height: 35vh;
        display: block;
    }

    .modal-body {
        padding: 2px 16px;
    }

    .lang {
        color: var(--theme-color);
        float: left;
        font-size: 1em;
        margin-top: 25px;
        opacity: 1;
    }

    .close {
        color: var(--theme-color);
        float: right;
        font-size: 3em;
        opacity: 1;
    }

    .close:hover,
    .close:focus {
        color: var(--hover-font-color1);
        text-decoration: none;
        cursor: pointer;
    }

    @-webkit-keyframes zoomIn {
        from {
            opacity: 0;
            -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
        }

        50% {
            opacity: 1;
        }
    }

    .zoomIn {
        -webkit-animation-name: zoomIn;
        animation-name: zoomIn;
    }

    .animated {
        -webkit-animation-duration: .3s;
        animation-duration: .3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }


    /*Navigation Inner Styling*/

    .nav ul li a:hover {
        text-decoration: none;
        color: var(--hover-font-color1);
    }


    /* Landscape-Phone to Portrait Tablet*/

    .nav ul li {
        display: block;
        height: 100px;
    }

    .nav ul {
        clear: both;
        width: 100%;
        text-align: center;
        padding: 0;
    }

    .nav ul li a {
        padding: 0;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 6vw;
        letter-spacing: -0.05em;
    }

}

@media(max-width:767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-md-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-md-down .modal-footer,
    .modal-fullscreen-md-down .modal-header {
        border-radius: 0
    }

    .modal-fullscreen-md-down .modal-body {
        overflow-y: auto
    }

    .offcanvas-md {
        position: fixed;
        bottom: 0;
        z-index: var(--bs-offcanvas-zindex);
        display: flex;
        flex-direction: column;
        max-width: 100%;
        color: var(--bs-offcanvas-color);
        visibility: hidden;
        background-color: var(--bs-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        transition: var(--bs-offcanvas-transition)
    }

    .offcanvas-md.offcanvas-start {
        top: 0;
        left: 0;
        width: var(--bs-offcanvas-width);
        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateX(-100%)
    }

    .offcanvas-md.offcanvas-end {
        top: 0;
        right: 0;
        width: var(--bs-offcanvas-width);
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateX(100%)
    }

    .offcanvas-md.offcanvas-top {
        top: 0;
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(-100%)
    }

    .offcanvas-md.offcanvas-bottom {
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(100%)
    }

    .offcanvas-md.show:not(.hiding),
    .offcanvas-md.showing {
        transform: none
    }

    .offcanvas-md.hiding,
    .offcanvas-md.show,
    .offcanvas-md.showing {
        visibility: visible
    }

    .h1,
    h1 {
        font-size: 1.75rem
    }

    .h2,
    h2 {
        font-size: 1.5rem
    }

    .h3,
    h3 {
        font-size: 1.25rem
    }

    .h4,
    h4 {
        font-size: 1rem
    }

    .side-push-panel #side-panel-trigger-close a {
        display: block;
        position: absolute;
        z-index: 12;
        top: 0;
        left: auto;
        right: 0;
        width: 40px;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
        color: var(--cnvs-contrast-900);
        text-align: center;
        background-color: rgba(0, 0, 0, .1);
        border-radius: 0 0 0 2px
    }

    .slider-caption .h2,
    .slider-caption h2 {
        font-size: 5.5vw
    }

    .slider-caption p {
        font-size: 2.6vw
    }

    #page-title,
    .page-title {
        --cnvs-page-title-padding: 3rem;
        text-align: center
    }

    .page-title-content .h1,
    .page-title-content h1 {
        font-size: calc(1.5rem + 1.25vw);
        line-height: 1.5
    }

    .page-title-parallax span {
        font-size: 1rem
    }

    .page-title-mini {
        --cnvs-page-title-padding: 2rem
    }

    .page-title-mini .h1,
    .page-title-mini h1 {
        font-size: var(--cnvs-page-title-mini-size)
    }

    .page-title-mini .breadcrumb {
        margin-top: 1rem
    }

    #page-title #portfolio-navigation,
    #portfolio-ajax-title #portfolio-navigation {
        position: relative;
        top: 0;
        left: 0;
        margin: 1rem auto 0
    }

    .grid-filter {
        width: 100%
    }

    .hide-in-phone {
        display: none;
        visibility: hidden;
    }

}

@media(min-width:768px) {

    .hide-in-pc {
        display: none;
        visibility: hidden;
    }
}

@media(min-width:992px) {

    .hide-in-big-pc {
        display: none;
        visibility: hidden;
    }
}

.button.button-border {
    --cnvs-btn-border-color: var(--cnvs-btn-color-dark);
    border: var(--cnvs-btn-border-width) solid var(--cnvs-btn-border-color);
    background: 0 0;
    color: var(--cnvs-btn-border-color);
}

.button.button-border:not(.button-fill):hover {
    background-color: var(--theme-color);
    color: #fff;
    border-color: transparent !important;
}

.menu-item.current>.menu-link {
    color: var(--selected-menu-item-color);
}

.gray-scale {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


.rtl {
    direction: rtl !important;
}

.justify {
    text-align: justify;
    text-justify: inter-word;
}


.grow-wrap {
    display: grid;
}

.grow-wrap::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
}

.grow-wrap>textarea {
    resize: none;
    overflow: hidden;
}

.grow-wrap>textarea,
.grow-wrap::after {
    padding: 0.5rem;
    grid-area: 1 / 1 / 2 / 2;
}

.form-control:focus {
    color: var(--cnvs-input-focus-color);
    background-color: var(--cnvs-input-focus-bg);
    border-color: #000000;
    box-shadow: var(--cnvs-input-focus-box-shadow);
    --cnvs-input-focus-border-color: black;
    --cnvs-input-focus-box-shadow: black;
}

.nowrap {
    white-space: nowrap;
}