@font-face {
    font-family: 'IRANSansWeb';
    src: url( '/public_theme/beta2_85/Fonts/IRANYekanMobile-Medium-a2a33a60.ttf' ) format( 'opentype' );
}
* {
    font-family: 'IRANSansWeb' !important;
}
@media (min-width:700px) {

    .reveal .slide-background-content {
        background-size: contain;
    }

    .NavBar {
        display: flex;
        position: absolute;
        height: 100vh;
        align-self: center;
        align-self: start;
    }

        .NavBar .navar {
            margin-right: -10px;
        }

    .BradTop {
        position: absolute;
        bottom: -1em;
        right: 0;
        left: 0;
        justify-self: center;
        transition: all ease 0.5s;
        opacity: 0;
        transition-delay: 2s;
        
    }

    .reveal .present .BradTop {
        opacity: 1;
        
    }

    .Items {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

        .Items button {
            animation: MexicoWave 4s infinite;
            display: inline-block;
            background: none;
            border: none;
        }

            .Items button img {
                width: 24em;
                margin: 0.2em 0;
                transform: translateX(120%);
                opacity: 0;
                transition: all ease-out 2s;
                box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
            }

    .reveal .present .Items button img {
        transform: translateX(0);
        opacity: 1;
    }

    .backbtn {
        position: absolute;
        z-index: 99;
        top: -2em;
        right: 0;
        left:0;
        background: none;
        border: none;
        backdrop-filter: blur(4px);
        width: 12.9em;
        overflow: hidden;
        border-radius: 5em;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
        justify-self: center;
    }

        .backbtn::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            transform: skewX(-25deg);
            animation: shine-effect 4s infinite;
            pointer-events: none;
        }

    @keyframes MexicoWave {
        0% {
            transform: scale(1);
        }

        30% {
            transform: scale(1.1);
        }
        /* زمان عبور */
        100% {
            transform: scale(1);
        }
    }

    .Header {
        margin-bottom: 2.5em;
    }

        .Header img {
            width: 8em;
            transform: scale(0.2);
            opacity: 0;
            transition: all ease-out 1s;
        }

    .reveal .present .Header img {
        transform: scale(1);
        opacity: 1;
    }

    .logo-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        justify-content: center;
        justify-self: center;
        transform: translateY(-300px);
        overflow: hidden;
        width: 5em;
        transition: all ease 2s;
        border-radius: 10em;
    }

    .company-title-en {
        display: block;
        width: 100%;
    }

    .reveal #Branchs.present .logo-wrapper {
        display: block;
        width: 100%;
        transform: scale(20);
        opacity: 0;
    }

    /* حالا افکت روی کانتینر اعمال می‌شود */
    .logo-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        transform: skewX(-25deg);
        animation: shine-effect 4s infinite;
        pointer-events: none; /* این خط باعث می‌شود نور مانع کلیک روی لوگو نشود */
    }

    @keyframes shine-effect {
        0% {
            left: -100%;
        }

        40% {
            left: 150%;
        }
        /* زمان عبور */
        100% {
            left: 150%;
        }
    }

    .logo-fa-elevator {
        position: absolute;
        left: 0;
        right: 0;
        width: 4em;
        top: 2.8em;
        object-fit: cover;
        justify-self: center;
    }

    .company-title-fa {
        width: 7em;
        object-fit: cover;
        justify-self: center;
        z-index: 99;
        opacity: 0;
        transform: translateY(-600px);
        transition: all 2.5s ease-out;
    }

    .company-logo {
        width: 6em;
        transform: scale(0);
        transition: all 1s ease;
        object-fit: contain;
        justify-self: center;
    }

    .more-info {
        justify-self: center;
        width: 4em;
        transition: all ease 0.5s;
        opacity: 0;
        transition-delay: 2s;
    }

    .more-info-pointer {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        justify-self: center;
        width: 1em;
        animation: SmoothHover 3s ease-in-out infinite;
    }

    @keyframes SmoothHover {
        0% {
            transform: translateY(20px);
        }

        50% {
            transform: translateY(30px);
        }

        100% {
            transform: translateY(20px);
        }
    }

    .Container {
        border-radius: 1em;
        position: absolute;
        height: 85vh;
        align-content: center;
        justify-self: center;
        background: linear-gradient(0deg, #c7c5d7, #c7c5d7, #faece1);
        width: 70%;
        align-self: self-start;
        top: 28vh;
        box-shadow: 0 10px 51px rgb(0 0 0 / 48%);
        margin: 0px;
        transform: translateY(110%);
        opacity: 0;
        transition: transform ease 2s, opacity ease 2.5s;
    }

    .reveal .present .Container {
        transform: translateY(0);
        opacity: 0.8;
    }

    .Container .cityId {
        width: 100%;
    }

    .Container a {
        margin: 0;
        padding: 0;
        color: #000;
    }

        .Container a:hover, .Container a:focus {
            color: #000;
        }

        .Container a img {
            height: 2em;
            margin: 0;
        }

        .Container a p {
            margin: 0;
            padding: 0 1em;
            font-size:0.6em;
        }

    .Container span {
        display: block;
        width: 34%;
        height: 1px;
        background: #424242;
        justify-self: center;
        margin: 0.5em 0;
        opacity: 0.7;
    }

    .item-loader {
        display: flex;
        flex-direction: column;
        justify-self: center;
        position: absolute;
        /* top: -60vw; */
        bottom: 0;
        left: 6em;
        align-self: center;
        top: 0;
    }

        .item-loader img {
            width: 4em;
            object-fit: cover;
            cursor: pointer;
            transform: translateX(-600px);
            transition: transform ease 2s;
            margin: 0;
            opacity: 0;
        }

    .reveal .present .item-loader a img {
        width: 6em;
        object-fit: cover;
        cursor: pointer;
        transform: translateX(0px);
        opacity: 1;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(4px);
    }

    .item-loader img:hover {
        width: 4em;
        object-fit: cover;
        cursor: pointer;
        transform: translateX(20px);
    }

    .item-loader .line {
        width: 4em;
        height: 1px;
        background: #c6c6c6;
        opacity: 0.4;
        margin-left: 2em;
    }

    .reveal .slides section {
        height: 100%
    }

    .reveal .present .logo-wrapper {
        opacity: 1;
        transform: translateY(-20px);
    }

    .reveal .present .company-title-fa {
        opacity: 1;
        transform: translateY(-100px);
    }

    .reveal .present .more-info {
        transition-delay: 2s;
        opacity: 1;
    }

    .reveal .present .more-info-pointer {
        transition-delay: 2s;
        opacity: 1;
        width: 1em;
    }

    .reveal .present .company-logo {
        transform: scale(1);
    }

    .reveal .present .about-us, .reveal .present .left_anim, .reveal .present .right_anim, .reveal .present .footer {
        opacity: 1;
        transform: translateX(0);
    }

    .reveal .present .zoom_anim {
        transform: scale(1);
    }
}
@media (max-width:500px) {
    .reveal .slide-background-content {
        background-size: cover;
    }
    .NavBar {
        display: flex;
        position: absolute;
        width: 100%;
        align-self: end;
        bottom:-40vh;
    }
        .NavBar .navar {
            margin-right: -10px;
        }
    .BradTop {
        position: absolute;
        bottom: -110vh;
        right: 0;
        left: 0;
        justify-self: center;
        transition: all ease 0.5s;
        opacity: 0;
        transition-delay: 2s;
    }.reveal .present .BradTop{
         opacity:1;
     }.Items{
          width:100%;
          display:flex;
          flex-direction:column;
          margin-top: -2em;
          
      }
        .Items button {
            animation: MexicoWave 4s infinite;
            display: inline-block;
            background:none;
            border:none;
        }
            .Items button img {
                width: 70%;
                transform: translateX(120%);
                opacity: 0;
                transition: all ease-out 2s;
                box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
            }
        .reveal .present .Items button img {
            transform: translateX(0);
            opacity:1;
        }
    .backbtn {
        position: absolute;
        z-index: 99;
        bottom: 80vh;
        right: 1em;
        background: none;
        border: none;
        backdrop-filter: blur(4px);
        width: 15em;
        overflow:hidden;
        border-radius: 5em;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
    }
        .backbtn::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            transform: skewX(-25deg);
            animation: shine-effect 4s infinite;
            pointer-events:none;
        }
    @keyframes MexicoWave {
        0% {
            transform:scale(1);
        }

        30% {
            transform: scale(1.1);
        }
        /* زمان عبور */
        100% {
            transform: scale(1);
        }
    }.Header{
           margin-bottom:5em;
       }.Header img{
            width:70%;
            transform:scale(0.2);
            opacity:0;
            transition:all ease-out 1s;
       }.reveal .present .Header img{
            transform:scale(1);
            opacity:1;
       }

    .logo-wrapper {
        position: absolute;
        top: -100vh;
        left: 0;
        right: 0;
        justify-content: center;
        justify-self: center;
        transform: translateY(-300px);
        overflow: hidden;
        width: 12em;
        transition: all ease 2s;
        border-radius: 10em;
    }

    .company-title-en {
        display: block;
        width: 100%;
    }

    .reveal #Branchs.present .logo-wrapper {
        display: block;
        width: 100%;
        transform: scale(20);
        opacity: 0;
    }

    /* حالا افکت روی کانتینر اعمال می‌شود */
    .logo-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        transform: skewX(-25deg);
        animation: shine-effect 4s infinite;
        pointer-events: none; /* این خط باعث می‌شود نور مانع کلیک روی لوگو نشود */
    }

    @keyframes shine-effect {
        0% {
            left: -100%;
        }

        40% {
            left: 150%;
        }
        /* زمان عبور */
        100% {
            left: 150%;
        }
    }

    .logo-fa-elevator {
        position: absolute;
        left: 0;
        right: 0;
        width: 7em;
        top: -74vh;
        object-fit: cover;
        justify-self: center;
    }
    .company-title-fa {
        width: 7em;
        object-fit: cover;
        justify-self: center;
        z-index: 99;
        opacity: 0;
        transform: translateY(-600px);
        transition: all 2.5s ease-out;
    }

    .company-logo {
        width: 6em;
        transform: scale(0);
        transition: all 1s ease;
        object-fit: contain;
        justify-self: center;
    }

    .more-info {
        justify-self: center;
        width: 10em;
        transition: all ease 0.5s;
        opacity: 0;
        transition-delay: 2s;
    }

    .more-info-pointer {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        justify-self: center;
        width: 1em;
        animation: SmoothHover 3s ease-in-out infinite;
    }

    @keyframes SmoothHover {
        0% {
            transform: translateY(20px);
        }

        50% {
            transform: translateY(30px);
        }

        100% {
            transform: translateY(20px);
        }
    }
    .Container {
        border-radius: 1em;
        position: absolute;
        height: 155vh;
        align-content: center;
        justify-self: center;
        background: linear-gradient(0deg, #c7c5d7, #c7c5d7, #faece1);
        width: 95%;
        align-self: self-start;
        top: -30vh;
        box-shadow: 0 10px 51px rgb(0 0 0 / 48%);
        margin: 0px;
        transform: translateY(110%);
        opacity: 0;
        transition: transform ease 2s,opacity ease 2.5s;
        left: 0;
        right: 0;
    }.reveal .present .Container {
        transform: translateY(0);
        opacity:0.8;
    }
        .Container .cityId {
            width: 100%;
        }.Container a {
             margin:0;
             padding:0;
             color:#000;
        }.Container a:hover,.Container a:focus {
             color:#000;
        }.Container a img {
             height:4em;
             margin:0;
        }.Container a p {
             margin:0;
             padding:0 1em;
        }
        .Container span {
            display: block;
            width: 34%;
            height: 1px;
            background: #424242;
            justify-self: center;
            margin:0.5em 0;
            opacity:0.7;
        }

    .item-loader {
        display: flex;
        flex-direction: column;
        justify-self: center;
        position: absolute;
        /* top: -60vw; */
        bottom: 0;
        left: 0.4em;
        align-self: center;
        top: 0;
    }

        .item-loader img {
            width: 4em;
            object-fit: cover;
            cursor: pointer;
            transform: translateX(-600px);
            transition: transform ease 2s;
            margin: 0;
            opacity:0;
        }
    .reveal .present .item-loader a img {
        width: 12.5em;
        object-fit: cover;
        cursor: pointer;
        transform: translateX(0px);
        opacity: 1;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(4px);
    }

    .item-loader img:hover {
        width: 4em;
        object-fit: cover;
        cursor: pointer;
        transform: translateX(20px);
    }

    .item-loader .line {
        width: 6em;
        height: 1px;
        background: #c6c6c6;
        opacity: 0.4;
        margin-left:2em;
    }

    .reveal .slides section {
        height: 100%
    }

    .reveal .present .logo-wrapper {
        opacity: 1;
        transform: translateY(-20px);
    }

    .reveal .present .company-title-fa {
        opacity: 1;
        transform: translateY(-100px);

    }

    .reveal .present .more-info {
        transition-delay: 2s;
        opacity: 1;
    }

    .reveal .present .more-info-pointer {
        transition-delay: 2s;
        opacity: 1;
        width: 2em;
    }

    .reveal .present .company-logo {
        transform: scale(1);
    }

    .reveal .present .about-us, .reveal .present .left_anim, .reveal .present .right_anim, .reveal .present .footer {
        opacity: 1;
        transform: translateX(0);
    }

    .reveal .present .zoom_anim {
        transform: scale(1);
    }
}