@font-face {
    font-family: BYekan;
    src: url('../fonts/b-yekan/BYekan.ttf');
    font-weight: normal;
}

@font-face {
    font-family: BYekan;
    src: url('../fonts/b-yekan/BYekanBold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: CenturyGothicRegular;
    src: url('../fonts/century-gothic/century-gothic-regular.ttf');
    font-weight: normal;
}

html[lang="en"] * {
    font-family: CenturyGothicRegular !important;
}

html[lang="en"] p,
html[lang="en"] h3,
html[lang="en"] h1 {
    direction: ltr;
    text-align: left;
}

body {
    font-family: 'BYekan', CenturyGothicRegular, serif !important;
}

.font-bykan {
    font-family: BYekan !important;
}

.font-century-gothic {
    font-family: CenturyGothicRegular !important;
}

.btn-custom {
    width: 135px;
    /*display: inline-block;*/
    border: 1px white solid;
    padding: 5px;
    border-radius: 15px;
    font-size: 12px;
}

    .btn-custom.follow-us-btn.active li {
        opacity: 1;
    }

    .btn-custom.follow-us-btn.active span {
        margin-right: 15px;
        transition: all .5s;
    }

    .btn-custom.login-btn.active span {
        margin-left: 20px;
        transition: all 1s;
    }

    .btn-custom span {
        min-width: 75%;
        text-align: center;
        color: #0E0E0E;
        background-color: #fff;
        border-radius: 15px;
        padding: 5px 15px;
        transition: all .5s;
    }

body.whiteSlide .btn-custom span, body.whiteSlide .btn-custom:hover {
    background-color: #0E0E0E;
    color: white;
}

.lang-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px white solid;
    border-radius: 30px;
    overflow: hidden;
}

.lang-btn:nth-child(1) {
    border-right: 1px white solid;
}

body.whiteSlide .lang-btn:nth-child(1), body.whiteSlide .lang-btns, body.whiteSlide .btn-custom {
    border-color: #000000;
}

.lang-btn {
    width: 44px;
    display: inline-block;
    padding: 7px 13px;
    text-align: center;
}

    .lang-btn.active {
        background-color: rgba(255, 255, 255, 1);
        color: #0E0E0E;
    }

body.whiteSlide .lang-btns {
    border-color: #0E0E0E !important;
}

    body.whiteSlide .lang-btns .lang-btn.active {
        background-color: rgba(9, 1, 1, 1) !important;
        color: #ffffff !important;
    }

.side .navigation.custom-navigation li.selected::after {
    padding: 30px 12px;
    border-radius: 20px;
    right: 9px;
    position: relative;
    color: #0E0E0E;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: white !important;
}

body.whiteSlide .side .navigation.custom-navigation li.selected::after {
    background-color: #000000 !important;
    color: white !important;
}

.side {
    display: flex;
    align-items: center;
}

    .side .navigation.custom-navigation li.selected::before {
        top: 24px;
    }

    .side .navigation.custom-navigation li:not(.selected)::after {
        content: '';
    }

.custom-navigation {
    position: relative;
    max-height: 75%;
    min-height: 400px;
}

    .custom-navigation::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 70%;
        top: 15%;
        background: rgba(255, 255, 255, 0.7);
    }

body.whiteSlide .custom-navigation::before {
    background: rgba(0, 0, 0, 0.7);
}

.custom-navigation ul {
    position: relative;
}

    .custom-navigation ul::before, .custom-navigation ul::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.7);
    }

body.whiteSlide .custom-navigation ul::before, body.whiteSlide .custom-navigation ul::after {
    background: rgba(0, 0, 0, 0.7);
}

.custom-navigation ul::before {
    top: 12%;
    right: 18px;
}

.custom-navigation ul::after {
    bottom: 12%;
    right: 18px;
}

.text-justify {
    text-align: justify;
}
   
/*
.animate.active [class*=ae-]:not(.done),
.slides .animated.animate.active [class*=ae-]:not(.done) img,
.slides.animated .animate.active [class*=ae-]:not(.done) img {
    position: absolute;
    top: 0;
} */
.animated .animate .slow [class*=ae-]:not(.done),
.animated .animate [class*=ae-].slow:not(.done),
.animated .animate.slow [class*=ae-]:not(.done),
.animated.slow .animate [class*=ae-]:not(.done) {
    transition-duration: 2s !important;
}

html.desktop .lifterak-position {
    transform: translate(0,17%)scale(1.3);
}

html.desktop .anbar-position {
    left: -2%;
    position: absolute;
    bottom: -1%;
    width: 75%;
    /*transform: translate(-23%,31%)scale(2.2);*/
}

html.desktop .hands-position {
    /* transform: translate(53%,20%)scale(2.7); */
    transform: translate(6%,20%)scale(1.6);
}

html.desktop .brain-position {
    transform: translate(4%,0%)scale(1.8);
}

html.desktop .benz-position {
    transform: translateY(7%);
}

html.desktop .shape {
    position: absolute;
    z-index: 5;
}

html.desktop .shape-1 {
    left: 25%;
    width: 80px;
    top: 13%;
}

html.desktop .shape-2 {
    left: 50%;
    width: 132px;
    top: 13%;
}

html.desktop .shape-3 {
    left: 67%;
    width: 137px;
    top: 35%;
}

html.desktop .shape-4 {
    left: 73%;
    width: 137px;
    top: 60%;
}

html.desktop .shape-5 {
    left: 63%;
    width: 137px;
    top: 75%;
}

html.desktop .shape-6 {
    left: 13%;
    width: 137px;
    top: 71%;
}

html.desktop .shape-7 {
    left: -7%;
    width: 143px;
    top: 54%;
}

html.desktop .shape-8 {
    left: -2%;
    width: 143px;
    top: 27%;
}

.box-contact {
    background: linear-gradient(0deg, rgba(68,68,68,1) 0%, rgba(95,95,95,1) 20%, rgba(255,255,255,1) 100%);
    color: white;
    border-radius: 25px;
    padding: 40px 10px 0 10px;
    box-shadow: 0 -0.5rem 1rem rgba(0,0,0,.15) !important;
    height: 100%;
}

.desktop .box-contact {
    max-width: 220px;
}

.slide .background {
    /*background-size: 100% 100%;*/
}

.logo {
    width: 275px;
    margin-top: 30px;
}

.carAnimation {
    animation: mymove 3s steps(1, start);
}

@keyframes mymove {

    0% {
        opacity: 0;
    }

    33% {
        opacity: 0.3;
    }

    66% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 767px) {
    .logo {
        margin-top: unset !important;
    }
}

.mobile .logo {
    width: 200px;
}

body.whiteSlide .logo {
    filter: invert(1);
}

.rotate-vert-center:hover img {
    -webkit-animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@-webkit-keyframes rotate-vert-center {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }

    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@keyframes rotate-vert-center {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }

    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}


/* Make it responsive */

.gomrok li:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
}

    .gomrok li:nth-child(1) img {
        position: absolute;
        top: 0;
        left: 0;
    }

/* Tablet */
@media (max-width: 1023px) {
    .gomrok ul {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 0;
    }

    .gomrok li img {
        position: relative !important;
    }

    .gomrok li:nth-child(1) {
        position: relative !important;
        padding-bottom: 0;
    }

    .gomrok li:nth-child(2) {
        position: relative;
        margin-right: 9%;
        margin-left: 9%;
    }

    .anbar .wrap {
        padding-bottom: 0 !important;
    }

    .anbar li:nth-child(1) {
        margin-bottom: 200px;
    }

    .anbar li:nth-child(2) {
        position: absolute;
        left: 0;
        bottom: 0;
    }

        .anbar li:nth-child(2) img {
            position: absolute;
            left: 0;
        }

    .transit ul {
        /* position: absolute; */
    }

    .transit li:nth-child(1) {
        position: absolute;
        top: 100px;
        padding-left: 10%;
        padding-right: 10%;
        right: 0;
    }

    .transit li:nth-child(2) {
        bottom: 0;
        position: fixed;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
    }

        .transit li:nth-child(2) img {
            width: 150px;
        }

    .group-company .wrap {
        padding-bottom: 0 !important;
    }
}

@media screen and (max-width: 424px) {
    .group-company div.wrap {
        padding-top: 0 !important;
    }

        .group-company div.wrap li > img {
            bottom: 10px;
        }
}

.sidebar .social.rtl li {
    margin-right: 0 !important;
    margin-left: 20px !important;
}

/* navigation */
@media screen and (min-height: 620px) {
    .side:not(.compact) .navigation li {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border: unset !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin: 0 -15px !important;
        transition: all 2s ease;
    }

        .side:not(.compact) .navigation li.selected {
            border: 1px solid #fff !important;
            background: transparent !important;
            padding-top: 15px !important;
            padding-bottom: 15px !important;
            border-radius: 20px !important;
            position:relative;
            left:5px;
        }
}

.slides.whiteSlide .navigation li.selected {
    border: 1px solid #000 !important;
    color: #000;
}

    .slides.whiteSlide .navigation li.selected:after {
        box-shadow: unset;
        background: transparent;
    }

.navigation li.selected:after {
    box-shadow: unset;
    background: transparent;
    transition: unset;
    position: relative;
    right: 4px;
}

.navigation li:after {
    border-radius: 0 !important;
    border: unset !important;
    width: 2px !important;
    height: 30px !important;
}

.navigation li[data-title]:before {
    right: 115% !important;
    top: 15px !important;
}

.navigation li.selected:nth-child(1):after {
    content: "1";
}

.navigation li.selected:nth-child(2):after {
    content: "2";
}

.navigation li.selected:nth-child(3):after {
    content: "3";
}

.navigation li.selected:nth-child(4):after {
    content: "4";
}

.navigation li.selected:nth-child(5):after {
    content: "5";
}

.navigation li.selected:nth-child(6):after {
    content: "6";
}

.navigation li.selected:nth-child(7):after {
    content: "7";
}

.navigation li.selected:nth-child(8):after {
    content: "8";
}

.navigation li.selected:nth-child(9):after {
    content: "9";
}

.navigation li.selected:nth-child(10):after {
    content: "10";
    right: 10px;
}

.side.compact .navigation li {
    width: 8px !important;
    height: 21px !important;
}

.set-line {
    line-height: 1.8rem;
}

@media (min-width: 769px) {
    section.home div.right {
        margin-top: 20rem;
    }
}

@media (max-width: 425px) {
    section.home div.right {
        margin-top: 100px;
        color: #000 !important;
    }
}

/* white service */
.white-service-fm-lines span {
    width: 100%;
    height: 1px;
    background: #fff;
    margin: 9px 0;
    display: block;
}

body.whiteSlide .white-service-fm-lines span {
    filter: invert(1);
}

/* Follow us */
.follow-us-icons li {
    padding: 5px;
    position: relative;
    top: 5px;
    margin-right: 10px;
    opacity: 0;
}

    .follow-us-icons li.social-icon-1 {
        opacity: 0;
        transition: opacity 1.7s;
    }

    .follow-us-icons li.social-icon-2 {
        opacity: 0;
        transition: opacity 1.2s;
    }

    .follow-us-icons li.social-icon-3 {
        opacity: 0;
        transition: opacity .7s;
    }

.follow-us-icons.active li.social-icon-1 {
    opacity: 1;
    transition: opacity .7s;
}

.follow-us-icons.active li.social-icon-2 {
    opacity: 1;
    transition: opacity 1.2s;
}

.follow-us-icons.active li.social-icon-3 {
    opacity: 1;
    transition: opacity 1.7s;
}

.follow-us-icons li a svg {
    width: 25px;
    height: 25px;
}

.sidebarTrigger {
    float: right !important;
    margin-right: 25px !important;
}

@media screen and (max-width: 423px) {
    .sidebarTrigger {
        margin-right: 0 !important;
    }
} 
.navigation-scroll-up {
    left: 15px;
    position: relative;
    writing-mode: vertical-rl;
    font-size: 13px;
    display: none;
}
.navigation-scroll-down {
    left: 15px;
    position: relative;
    writing-mode: vertical-lr;
    font-size: 13px;
}
.whiteSlide .navigation-scroll-up, .whiteSlide .navigation-scroll-down{ color:black;}
.stage-1 .navigation-scroll-up {display:none}.stage-1 .navigation-scroll-down { top: -285px;}
.stage-2 .navigation-scroll-up {top: 45px;}.stage-2 .navigation-scroll-down { top: -255px;}
.stage-3 .navigation-scroll-up {top: 75px;}.stage-3 .navigation-scroll-down { top: -225px;}
.stage-4 .navigation-scroll-up {top: 105px;}.stage-4 .navigation-scroll-down { top: -195px;}
.stage-5 .navigation-scroll-up {top: 135px;}.stage-5 .navigation-scroll-down {top: -165px;}
.stage-6 .navigation-scroll-up {top: 165px;}.stage-6 .navigation-scroll-down {top: -135px;}
.stage-7 .navigation-scroll-up {top: 195px;}.stage-7 .navigation-scroll-down {top: -105px;}
.stage-8 .navigation-scroll-up {top: 225px;}.stage-8 .navigation-scroll-down {top: -75px;}
.stage-9 .navigation-scroll-up {top: 255px;}.stage-9 .navigation-scroll-down {top: -45px;}
.stage-10 .navigation-scroll-up {top: 285px;}.stage-10 .navigation-scroll-down {display:none;}

.bulets {
    width: 12px;
    height: 12px;
    display: block;
    background-color: #fff;
    border-radius: 50%;
    margin-top: 5px;
    margin-bottom: 5px;
    opacity: 1;
    /*animation: fadeinbulet-1 2s 1s infinite;*/
}

.whiteSlide .bulets {
    background-color: #000;
} 
 
@keyframes fadeinbulet-1 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }

    75% {
        opacity: .25;
    }

    100% {
        opacity: 1;
    }
}

body.whiteSlide .login-btn > .internalSection {
    border: solid 1px black !important;
}

body.whiteSlide .login-btn .internalSectionL1 {
    background-color: black !important;
}

    body.whiteSlide .login-btn .internalSectionL1 div {
        color: white !important;
    }

body.whiteSlide .follow-us-area > .internalSection {
    border: solid 1px black !important;
}

body.whiteSlide .follow-us-area .internalSectionL1 {
    background-color: black !important;
}

    body.whiteSlide .follow-us-area .internalSectionL1 div {
        color: white !important;
    }

body.stage-8 .panel-top {
    background-color: #fafafa !important;
}