.bodyBlur{
        filter: blur(5px);
    }
    main,footer, .animationTeharnFrame{
        transition: all 0.27s ease-in;
    }
    .mainNav{
        background: var(--bgColLight);
        width: 18em;
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        transition: all 0.26s ease-in;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        z-index: 10;
    }
    .mainNav.dark{
        background: var(--bgColDark);
    }
    .secNav>div {
        margin-bottom: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .secNav a{
        font-weight: bold;
        color: var(--bgColDark);
        transition: all 0.27s ease-in;
    }
    .secNav .dark a{
        color: var(--bgColLight);
    }
    .secNav a:hover,
    .secNav a:active{
        color: var(--blueDark);
        transform: scale(1.2);
    }
    
    .burgerCon{
        width: 2em;
        position: fixed;
        top: 0.7em;
        right: 0.7em;
        z-index: 100;
        transition: all 0.26s ease-in;
        cursor: pointer;
    }
    .burgernt{
        transform-origin: center;
        transition: all 0.26s ease-in;
    }
    .mainNavvs{
        transform: translate(18em);
        transition: all 0.26s ease-in;
    }
    .langToggleContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 2em;
        width: 9em;
    }
    
    .themeToggleContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 2em;
        width: 9em;
    }
    
    .langToggleContainer::before{
        content: 'per';
    }
    .langToggleContainer::after{
        content: 'eng';
    }
    .langToggleContainer.dark::after,
    .langToggleContainer.dark::before{
        color: var(--bgColLight);
    }
    .themeToggleContainer::before{
        content: '';
        background: url(../pic/sun.svg);
        width: 2em;
        height: 2em;
        background-position:center;
        background-repeat:no-repeat;
        background-size: contain;
    }
    .themeToggleContainer::after{
        content: '';
        background: url(../pic/moon.svg);
        width: 2em;
        height: 2em;
        background-position:center;
        background-repeat:no-repeat;
        background-size: contain;
    }
    .themeToggleContainer.dark::before,
    .themeToggleContainer.dark::after{
        filter: invert(1);
    }
    
    
    /* The switch - the box around the slider */
    .switch {
        position: relative;
        display: inline-block;
        width: 3em;
        height: 1.8em;
        margin: 0 0.5em 0 0.5em;
    }
    
      /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--blueDark);
        -webkit-transition: .4s;
        transition: .4s;
    }
      
    .slider:before {
        position: absolute;
        content: "";
        height: 1.46em;
        width: 1.46em;
        left: 0.17em;
        bottom: 0.17em;
        background-color: var(--bgColLight);
        -webkit-transition: .4s;
        transition: .4s;
    }
      
    .switch.right .slider {
        background-color: var(--purpDark);
    }
      
      
    .switch.right .slider:before {
        -webkit-transform: translateX(1.33em);
        -ms-transform: translateX(1.33em);
        transform: translateX(1.33em);
    }
    .svgLine{
        height: 106vh;
        position: absolute;
        left: -0.2vh;
        top: -3vh;
    }
    .menuLine{
        fill:var(--purpDark);
        
    }
    .menuLine.dark{
        fill: var(--blueDark);
    }
    
    .customerLog,
    .employeeLog
    {
        height: 2.2em;
        background: var(--purpDark);
        color: var(--bgColLight);
        border-radius: 0.7em;
        margin-top: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.27 ease-in;
    }
    .customerLog:hover,
    .employeeLog:hover,
    .customerLog:active,
    .employeeLog:active{
        background: var(--blueDark);
        color: var(--bgColDark);
        transform: scale(1.1);
    }
    .stw0{
        fill: var(--blueDark);
    }
    .stw0.dark{
        fill: var(--bgColLight);
    }
    .secNav div,
    .secNav a{
        font-size: 0.95em;
    }
    .secNav a div.eng{
        font-size: 0.85em;
    }

    .logoContainer{
        height: 5em;
        width: 3em;
        position: fixed;
        left: 0.3em;
        top: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: logoRotate 20s linear infinite;
        z-index: 10;
    }
    @keyframes logoRotate{
        0%{
            transform: rotateY(0deg);
        }
        42%{
            transform: rotateY(0deg);
        }
        45%{
            transform: rotateY(180deg);
        }
        48%{
            transform: rotateY(0deg);
        }
        100%{
            transform: rotateY(0deg);
        }
    }
    .logoContainer svg{
        width: 3em;
    }
.animationTehran{
    width: 400vw;
    height: 21.2vw;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: var(--bgColLight);
}
.animationTeharnFrame{
    overflow: hidden;
}
.animationTehran.dark{
    background-color: var(--bgColDark);
}
.animationTehran div{
    width: 100vw;
    height: 21.2vw;
}
.animationTehran div svg{
    width: 100vw;
    height: 21.2vw;
}
.animationTehran div svg *{
    stroke: var(--bgColDark);
}
.animationTehran div svg *.dark{
    stroke: var(--bgColLight);
}
.stml0{fill:none;stroke-miterlimit:10;}
.stml1{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke-miterlimit:2.6131;}
.stml2{fill:none;stroke-miterlimit:2.6131;}
.stml3{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke-miterlimit:10;}
.stml4{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

.firstTehran{
    animation: tehranimateOne 128s linear infinite,
    tehranimateTickOne 128s steps(1) infinite;
}
.secondTehran{
    animation: tehranimateTwo 128s linear infinite,
    tehranimateTicktwo 128s steps(1) infinite;
}
.thirdTehran{
    animation: tehranimateThree 128s linear 32s infinite,
    tehranimateTicktwo 128s steps(1) 32s infinite;
}
.fourthTehran{
    animation: tehranimateFour 128s linear 64s infinite,
    tehranimateTicktwo 128s steps(1) 64s infinite;
}

@keyframes tehranimateOne{
    0%{
        transform: translateX(0%);
    }
    25%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(0%);
    }
    75%{
        transform: translate(100%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes tehranimateTickOne{
    0%{
        opacity: 1;
    }
    25%{
        opacity: 0;
    }
    75%{
        opacity: 1;
    }
}

@keyframes tehranimateTwo{
    0%{
        transform: translateX(0%);
    }
    25%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-200%);
    }
    75%{
        transform: translate(-100%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes tehranimateTicktwo{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes tehranimateThree{
    0%{
        transform: translateX(-100%);
    }
    25%{
        transform: translateX(-200%);
    }
    50%{
        transform: translateX(-300%);
    }
    75%{
        transform: translate(-300%);
    }
    100%{
        transform: translateX(-100%);
    }
}
@keyframes tehranimateFour{
    0%{
        transform: translateX(-200%);
    }
    25%{
        transform: translateX(-300%);
    }
    50%{
        transform: translateX(-400%);
    }
    75%{
        transform: translate(-300%);
    }
    100%{
        transform: translateX(-200%);
    }
}

footer{
    height: 11em;
    background-color: var(--bgColDark);
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-evenly;
    align-items: center;
}
footer.dark{
    background-color: var(--bgColDarkey);
    
}

footer .eng,
footer .per{
    color: var(--bgColLight);
}

footer .eng.dark,
footer .per.dark{
    color: var(--bgColDark);
}
.nemads{
    width: 21em;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.nemads div{
    width: 6em;
    height: 6em;
    background-color: var(--yellow);
}
.footerText{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 0.7em;
}
@media screen and (max-width: 768px){
    .mainNav{
        width: 16em;
    }
    .burgerCon{
        width: 1.6em;
        height: 1.6em;
        top: 0.6em;
        right: 1em;
    }
    .logoContainer{
        height: 3em;
        width: 2em;
    }
    .logoContainer svg{
        width: 2em;
    }
    .nemads{
        width: 11em;
    }
    footer{
        height: 6em;
    }
    .nemads div{
        width: 3em;
        height: 3em;
    }
    .footerText{
        font-size: 0.6em;
    }
}