@font-face {
    font-family: azar;
    src: url(../font/Azar.ttf);
}

@font-face {
    font-family: lila;
    src: url(../font/Leila-Bold[@fontrayegan].ttf);
}

body {
    height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 20% 30%, #ff00b373 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, #0088ff80 0%, transparent 60%),
        radial-gradient(circle at 70% 80%, #00ff6666 0%, transparent 60%),
        radial-gradient(circle at 30% 80%, #ff004480 0%, transparent 70%),
        linear-gradient(180deg, #ffd7fa 0%, #ffb9f6 20%, #9ef0ff 55%, #8deeff 75%, #ffffff 100%);
    background-blend-mode: screen, screen, overlay, normal, normal;
    position: relative;
    overflow: hidden;
}



::selection {
    color: #ff5e79;
    background-color: #4174a7;
}

@media (min-width: 0px) and (max-width: 1509px) {
    #preloader{
        display: none;
    }
    .dispaly {
        display: none;
    }

    h5 {
        font-family: azar;
        font-size: 3dvw;
        color: #7d0081;
        text-align: center;
    }

    .mini-divce {
        height: 100dvh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .big-divce {
        display: none;
    }
}

@media (min-width: 1931px) and (max-width: 8000px) {
    .dispaly {
        display: none;
    }

    h5 {
        font-family: azar;
        font-size: 3dvw;
        color: #7d0081;
        text-align: center;
    }

    .big-divce {
        height: 100dvh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mini-divce {
        display: none;
    }
    #preloader{
        display: none;
    }
}

@media (min-width: 1510px) and (max-width: 1930px) {
    #preloader {
        position: fixed;
        inset: 0;
        background:
            radial-gradient(circle at 20% 30%, #ff00b373 0%, transparent 60%),
            radial-gradient(circle at 80% 20%, #0088ff80 0%, transparent 60%),
            radial-gradient(circle at 70% 80%, #00ff6666 0%, transparent 60%),
            radial-gradient(circle at 30% 80%, #ff004480 0%, transparent 70%),
            linear-gradient(180deg, #ffd7fa 0%, #ffb9f6 20%, #9ef0ff 55%, #8deeff 75%, #ffffff 100%);
        background-blend-mode: screen, screen, overlay, normal, normal;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .loader {
        position: relative;
        overflow: hidden;
        background: #c7c7c7;
        corner-shape: squircle;
        border-radius: 400px;
        width: 600px;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .loader::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;

        background: linear-gradient(90deg,
                transparent,
                #f0f0f0,
                transparent);
        animation: spin 1.2s infinite;
    }

    @keyframes spin {
        0% {
            left: -100%;
        }

        100% {
            left: 100%;
        }
    }

    .mini-divce {
        display: none;
    }

    .big-divce {
        display: none;
    }

    .mom-sec-parmis {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 98dvh;
    }

    .mom-div-content {
        display: flex;
        position: relative;
        width: 600px;
        height: 600px;
        overflow: hidden;
        border-radius: 400px;
        corner-shape: squircle;
        border: 3px solid transparent;
        background: linear-gradient(#002a53 0 100%) padding-box, linear-gradient(-45deg, #ff00b3, #7d0081, #ff00b3) border-box;

    }

    .backGround {
        width: 600px;
        height: 600px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .parmis-animation {
        width: 100%;
        position: absolute;
        top: -4%;
        left: 5%;
        z-index: 3;
    }

    h1 {
        position: absolute;
        top: 35%;
        left: -50%;
        z-index: 2;
        text-align: center;
        direction: rtl;
        font-size: 50px;
        font-family: azar;
        color: #7d0081;
    }

    .btn-del {
        position: absolute;
        top: -12%;
        left: 50%;
        z-index: 6;
        transition: 300ms;
        width: 170px;
        height: 60px;
        border-radius: 150px;
        background-color: #7d0081;
        corner-shape: squircle;
        transform: translate(-50%, 0);
        direction: rtl;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-family: azar;
        color: #ff00b3;
        font-size: 22px;
        border: 3px solid #ff00b3;
        transition: 300ms;
    }

    .btn-del:hover {
        border-color: #7d0081;
        transition: 300ms;
    }

    .parmis {
        width: 100%;
        position: absolute;
        top: 0%;
        left: 0;
        z-index: 5;
    }

    .img-footer-parmis {
        width: 200px;
    }

    .mom-footer-img {
        display: flex;
        justify-content: center;
        margin: 30px 0 0 0;
    }

    .mom-phone {
        position: fixed;
        top: -60%;
        left: 60%;
        transform: translate(-50%, 0);
        scale: 0.5;
    }

    .phone {
        width: 400px;
    }

    .old-phone {
        width: 400px;
        height: 600px;
    }

    .falsh {
        width: 35px;
        height: 35px;
        border-radius: 50px;
        box-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 30px #fff, 0px 0px 40px #fff, 0px 0px 50px #fff, 0px 0px 60px #fff, 0px 0px 70px #fff, 0px 0px 80px #fff, 0px 0px 90px #fff;
        position: absolute;
        top: 83px;
        left: 272px;
    }

    .line-chat {
        position: fixed;
        top: 29%;
        left: 20%;
        direction: rtl;
        font-size: 50px;
        font-family: azar;
        color: #7d0081;
        text-align: right;
        transform: translate(-50%, -50%);
        margin: 0;
    }

    .name-parmis {
        position: fixed;
        top: 50%;
        left: 50%;
        direction: rtl;
        font-size: 400px;
        font-family: lila;
        color: #7d0081;
        text-align: right;
        transform: translate(-50%, -50%);
        margin: 0;
    }

    .shoter {
        width: 50px;
        height: 50px;
        background-color: #fff;
        border: 3px solid rgb(0, 0, 0);
        border-radius: 60px;
        margin: -136px 0 0 280px;
        transition: 500ms;
        cursor: pointer;
    }

    .shoter:hover {
        scale: 0.8;
        transition: 500ms;
    }

    .mom-img-sup {
        position: relative;
        top: -365px;
        left: 50px;
        z-index: -3;
    }

    .img-hand {
        position: absolute;
        width: 250px;
        top: 10px;
        left: 40px;
        transform: translate(1200px, 0);
    }

    .img-pepar {
        position: absolute;
        width: 300px;
    }

    .img-moon {
        position: absolute;
        width: 220px;
        top: 40px;
        left: 40px;
    }

    .alaf {
        width: 90%;
        position: absolute;
        top: 86%;
        left: 5%;
        z-index: 2;
    }

    .jahat {
        width: 300px;
        position: absolute;
        top: 18%;
        left: 17%;
        z-index: 2;
        opacity: 0;
    }

    .roz {
        width: 120px;
        position: absolute;
        top: 30%;
        left: -18%;
        z-index: 2;
        transform: rotate(20deg);
    }

    .roz2 {
        width: 120px;
        position: absolute;
        top: 16%;
        left: 97%;
        z-index: 2;
        transform: rotate(-20deg);
    }
}