/* header */
* {
    cursor: url(img/icons8-select-cursor-20.png), auto;
}

/* heder */
.heder {
    width: 80%;
    height: 10%;
    position: fixed;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20%;
}

.logo {
    width: 6%;
    height: 90%;
}

.logo img {
    width: 100%;
    height: 100%;
}

.meno {
    width: 27%;
    height: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8%;
    border-bottom: solid 2px #6544c0;
    font-family: "shabnam";
    font-size: 11px;
    animation: bordercolor 2s infinite alternate;
    padding: 5px;
}

@keyframes bordercolor {
    from {
        border-color: rgb(120, 0, 131);
    }

    to {
        border-color: #977ae9;
    }
}

.meno p {
    transition: all .2s ease;
    color: rgb(92, 11, 212);
}

.meno p:hover {
    color: rgb(177, 164, 255);
    font-size: 13px;
    cursor: url(img/icons8-cursor-32.png), auto;
}

.ertebat {
    background-color: #14004d;
    width: 2.3%;
    height: 36%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: url("img/icons8-cursor-32.png"), auto;
}

.ertebat img {
    cursor: url("img/icons8-cursor-32.png"), auto;
}

.meno-mobayl {
    opacity: 0;
    position: fixed;
    visibility: hidden;
}

.meno-back {
    opacity: 0;
    visibility: hidden;
    position: fixed;
}

/* */


@font-face {
    font-family: "shabnam";
    src: url("font/Shabnam-Bold-FD.ttf");
}

/* sfahe asly */


.photo-shir {
    width: 15%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 18%;
    left: 20%;
    border: solid 1px;
    border-color: #fdfdff #ffffff #330897 #14004d;
    border-radius: 0px 0px 0px 20px;
    transition: all 0.5s ease;
    transform: skewX(5deg);
}

.photo-shir img {
    width: 95%;
    height: 95%;
    background-color: #14004d;
    position: fixed;
    bottom: 7%;
    left: 7%;
    box-shadow: 0px 0px 10px 8px #14004d;
    border-radius: 20px;
    transition: all 1s ease;
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translatey(0);
    }

    25% {
        transform: translatey(-10px);
    }
}

h2 {
    position: fixed;
    top: 20%;
    left: 55%;
    font-family: "shabnam";
    direction: rtl;
    animation: d 2s infinite alternate;
    transition: all 1s ease;
}

@keyframes d {
    from {
        color: #c2acf7;
    }

    tow {
        color: #ffffff;
    }

}


.tablig {
    position: fixed;
    top: 40%;
    left: 54%;
    font-family: "shabnam";
    direction: rtl;
    animation: colorchange 2s infinite alternate;
    font-size: 13px;
    transition: all 1s ease;
}

/* khadamt */
.khadamat {
    width: 50%;
    height: 23%;
    position: absolute;
    top: 76%;
    left: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    gap: 10%;
    transition: all ease 1s;
    z-index: 999;
}

.khadamat div {
    width: 50%;
    height: 100%;
    background-color: #14004d;
    border-radius: 20px;
    border-left: solid 3px #977ae9;
    border-bottom: solid 3px #977ae9;
    transition: all .2s ease;
    box-shadow: -10px 10px 15px #1a0061;
    box-sizing: border-box;

}

.khadamat div:hover {
    transform: translatey(-10px);
    border-left: solid 5px #977ae9;
    border-bottom: solid 5px #977ae9;
}

.khadamat div h4 {
    position: relative;
    bottom: 66%;
    color: #c2acf7;
    font-family: "shabnam";
    font-size: 12px;
    text-align: center;
}

.khadamat div p {
    position: relative;
    bottom: 70%;
    color: #ffffff;
    font-family: "shabnam";
    font-size: 9px;
    text-align: justify;
    direction: rtl;
    margin: 0px 20px 10px 20px;
    animation: d 2s infinite alternate;
}

img[alt="AKSE_FARD"] {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    height: 0%;
}


.khadamat div img {
    width: 100%;
    height: 90%;
    position: relative;
    bottom: 60%;
    right: 6%;
    border-radius: 0px 0px 70px 40px;
}

h3 {
    position: fixed;
    font-family: "shabnam";
    top: 60%;
    left: 79%;
    color: #c2acf7;
    transition: all 1s ease;
    background-color: #14004d;
    padding: 2px 15px 2px 15px;
    border-radius: 10px;
    box-shadow: 10px 10px 1px 1px #330897;
}

img[alt="aksediv"] {
    opacity: 0;
    visibility: hidden;
}

/*  */
/*  */


/* nemonekar */
.nemone_kar {
    width: 70%;
    height: 80%;
    background-color: #14004d;
    position: fixed;
    transform: translate(-270px, 100px);
    border-radius: 10px;
    transition: all 0.5s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
}

.nemone_kar h1 {
    color: #c2acf7;
    font-size: 50px;
    font-family: "shabnam";
    background-color: #6544c0;
    text-align: center;
    width: 80%;
    position: absolute;
    left: 9%;
    padding: 12px 15px 12px 15px;
    box-shadow: 15px 15px 1px 1px #330897;
    border-radius: 10px;
}

.nemone {
    width: 80%;
    height: 50%;
    position: fixed;
    top: 40%;
    left: 10%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
}

.nemone div {
    width: 80%;
    height: 60%;
    border-radius: 10px;
    border: solid 1px #977ae9;
    padding: 10px;
    transition: all .1s ease;
    box-sizing: border-box;
}

.nemone div h4 {
    font-family: "shabnam";
    color: #9600bb;
    font-size: 12px;
    background-color: #e8acf770;
    width: 130px;
    height: 15px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 10px 0px 10px 0px;
    margin-top: 150px;
    margin-left: 8px;
    border: #14004d 1px solid;
}

.nemone .box1,
.box2,
.box3,
.box4 {
    background-image: url(img/IMG_20260622_130839_815.jpg);
    background-size: cover;
    background-clip: content-box;
    background-position: center;
    transition: all .1s ease-out;
}

.box2 {
    background-image: url(img/IMG_20260622_130903_806.jpg);
}

.box3 {
    background-image: url(img/IMG_20260628_132724_566.jpg);
}

.box4 {
    background-image: url(img/IMG_20260628_132341_558.jpg);
}


.nemone .box1:hover {
    padding: 0px;
}

.nemone .box2:hover {
    padding: 0px;
}

.nemone .box3:hover {
    padding: 0px;
}


.nemone .box4:hover {
    padding: 0px;
}

/*  */

/* marahel */
.marahel {
    width: 70%;
    height: 80%;
    background-color: #14004d;
    position: fixed;
    transform: translate(-270px, 100px);
    border-radius: 10px;
    transition: all 0.4s ease;
    opacity: 0;
}

.marahel ul {
    color: #6544c0;
    font-family: "shabnam";
    direction: rtl;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 45px;
    width: 15%;
    position: relative;
    left: 70%;
    top: 28%;
    font-size: 12px;
    text-align: center;
    transition: all .1s ease;
    list-style-type: none;
}

.marahel h4 {
    color: #c2acf7;
    font-size: 50px;
    font-family: "shabnam";
    background-color: #6544c0;
    text-align: center;
    width: 80%;
    position: absolute;
    bottom: 75%;
    left: 9%;
    padding: 12px 15px 12px 15px;
    box-shadow: 15px 15px 1px 1px #330897;
    border-radius: 10px;
}

.marahel ul li {
    width: 110px;
    transition: all .1s ease;
    padding: 2px;
    cursor: url(img/icons8-cursor-32.png), auto;
}

.marahel ul li:hover {
    border-bottom: solid 1px #6544c0;
    transform: scaleX(1.2);
}

.marahel span img {
    background-color: #25007c;
    border-radius: 10px;
    padding: 5px;
    transition: all 0.4s ease;
}

.marahel span:hover img {
    transform: rotate(30deg) scale(1.1);
}


.marahel span:hover {
    background-color: #6544c0;
    color: black;
}

.tozih1,
.tozih2,
.tozih3,
.tozih4,
.tozih5,
.tozih6 {
    position: fixed;
    right: 80%;
    opacity: 0;
    visibility: hidden;
    color: #c2acf7;
    width: 13%;
    height: 35%;
    text-align: justify;
    transform: translatex(90px);
    background-color: #14004d;
    border-radius: 20px;
    border-left: solid 3px #977ae9;
    border-bottom: solid 3px #977ae9;
    transition: all 0.4s ease;
    box-shadow: -10px 10px 15px 2px #1a0061;
    padding: 20px;
}

img[alt="amir"] {
    width: 28%;
    height: 70%;
    position: relative;
    bottom: 30%;
    left: 34%;
    animation: float 3s ease-in-out infinite;
}

/*  */

/* darbarema */
.darbarema {
    width: 70%;
    height: 80%;
    background-color: #14004d;
    position: fixed;
    transform: translate(-1970px, 100px);
    transition: all 0.4s ease;
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 50px;
    border-radius: 10px;
}

.darbarema-box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    font-family: "shabnam";
    color: #7800be;
    width: 20%;
    height: 30%;
    text-align: justify;
    direction: rtl;
    background-color: #14004d;
    border-radius: 20px;
    border-left: solid 3px #977ae9;
    border-bottom: solid 3px #977ae9;
    transition: all 0.4s ease;
    box-shadow: -10px 10px 15px 2px #1a0061;
    padding: 20px;

}

.darbarema-box1 div p {
    font-size: 11px;
    font-weight: bold;
}

.darbarema-box1 img {
    width: 70px;
    height: 70px;
}


.link-site {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
    flex-direction: row-reverse;
    width: 100px;
}

.link-site button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
    cursor: url(img/icons8-cursor-32.png), auto;
}

.link-site .link2 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
}

.link-site button:hover {
    background-color: #7800be;

}



.link-site button img {
    width: 20px;
    height: 20px;
    cursor: url(img/icons8-cursor-32.png), auto;
}

.darbarema-box2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    font-family: "shabnam";
    color: #7800be;
    width: 20%;
    height: 30%;
    text-align: justify;
    background-color: #14004d;
    border-radius: 20px;
    border-left: solid 3px #977ae9;
    border-bottom: solid 3px #977ae9;
    transition: all 0.4s ease;
    box-shadow: -10px 10px 23px 10px #1a0061;
    padding: 20px;
}

.tamas1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    direction: rtl;
}

.tamas2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    direction: rtl;
}

.p-hogog {
    font-family: "shabnam";
    color: #7800be;
    direction: rtl;
    font-size: 13px;
    position: fixed;
    top: 94%;
}

img[alt="amir-leon"] {
    position: fixed;
    right: 70%;
    width: 27%;
    height: 70%;
    animation: colorchange 2s infinite alternate;
}

/*  */

@media screen and (max-width:110dvh) {

    /* verjen_tablet */

    body {
        padding: 0%;
        margin: 0%;
    }

    /* heder */
    .logo img {
        width: 100px;
        height: 100px;
        position: relative;
        left: 190%;
        bottom: 2%;
    }

    .meno {
        opacity: 0;
        visibility: hidden;
        width: 27%;
        height: 0%;
    }

    .ertebat {
        width: 7%;
        height: 5%;
        position: fixed;
        right: 80%;
        bottom: 92.5%;
    }


    .meno-mobayl {
        opacity: 1;
        visibility: visible;
        position: fixed;
        top: 2.5%;
        right: 88%;
        background-color: #c2acf7;
        width: 7%;
        height: 5%;
        border-radius: 50%;
        border: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #meno-mobayle {
        opacity: 0;
        visibility: hidden;
        position: fixed;
        top: 25%;
        background-color: #1d0858;
        border-radius: 20px;
        width: 8%;
        height: 50%;
        box-shadow: 70px 0px 170px 250px #6544c06e;
        transition: all 0.2s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        gap: 13%;
    }

    #meno-mobayle img {
        width: 30px;
        height: 30px;
    }

    .meno-back {
        position: fixed;
        top: 80%;
        right: 88%;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: hidden;
        background-color: #1d0858;
    }

    /* heder */

    /* safhe_asle */
    .photo-shir {
        width: 40%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 48%;
        left: 25%;
        border: solid 1px;
        border-color: #fdfdff #ffffff #330897 #14004d;
        border-radius: 0px 0px 0px 20px;
        transition: all 0.5s ease;
        transform: skewX(5deg);
        z-index: -1;
    }

    .khadamat {
        opacity: 0;
        visibility: hidden;
        position: fixed;
        top: 13%;
        left: 10%;
        width: 79%;
        height: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        background-color: #d3cedf00;
        flex-direction: column;
        border-radius: 15px;
        z-index: -1;
    }

    .khadamat div {
        width: 20%;
        height: 20%;
        background-color: #14004d;
        border-radius: 20px;
        border-left: solid 3px #977ae9;
        border-bottom: solid 3px #977ae9;
        transition: all .2s ease;
        box-shadow: -10px 10px 15px #1a0061;
        box-sizing: border-box;
        position: sticky;
        left: 65%;
    }


    .khadamat div:hover {
        transform: translatey(-10px);
        border-left: solid 5px #977ae9;
        border-bottom: solid 5px #977ae9;
    }


    .khadamat div h4 {
        position: relative;
        bottom: 98%;
        color: #c2acf7;
        font-family: "shabnam";
        font-size: 17px;
        text-align: center;

    }


    .khadamat div p {
        position: relative;
        bottom: 102%;
        color: #ffffff;
        font-family: "shabnam";
        font-size: 13px;
        text-align: justify;
        direction: rtl;
        margin: 0px 10px 20px 10px;
        animation: d 2s infinite alternate;
    }

    .khadamat div img {
        opacity: 0;
        visibility: hidden;
    }

    img[alt="AKSE_FARD"] {
        opacity: 1;
        visibility: visible;
        position: fixed;
        right: 50%;
        width: 40%;
        height: 50%;
    }

    .tablig {
        position: fixed;
        top: 30%;
        left: 35%;
        padding-right: 40px;
    }

    h3 {
        opacity: 0;
        z-index: 0;
        top: 12%;
        left: 17%;
    }

    h2 {
        position: fixed;
        top: 15%;
        left: 40%;
        font-family: "shabnam";
        direction: rtl;
        padding-right: 40px;
    }

    /*  */

    /* nmonekar */

    .nemone_kar {
        width: 70%;
        height: 75%;
        background-color: #14004d;
        position: fixed;
        left: 45%;
        top: 3%;
    }

    .nemone {
        flex-direction: column;
        gap: 1%;
        width: 110%;
        height: 85%;
        top: 15%;
        left: -5%;
    }

    .nemone_kar h1 {
        bottom: 84%;
    }

    .nemone div {
        width: 25%;
        height: 23%;
    }

    .nemone div h4 {
        color: #faf8ff;
        background-color: #3a00c270;
    }


    /*  */
    /*  */

    /* marahel */

    .marahel {
        bottom: 15%;
        left: 43%;
        opacity: 0;
        background-color: #15004d00;
    }

    .marahel h4 {
        bottom: 83%;
    }

    .marahel ul {
        gap: 30px;
        width: 15%;
        position: relative;
        left: 70%;
        top: 22%;
        font-size: 12.2px;
    }

    .tozih1,
    .tozih2,
    .tozih3,
    .tozih4,
    .tozih5,
    .tozih6 {
        position: fixed;
        right: 74%;
        opacity: 0;
        visibility: hidden;
        color: #c2acf7;
        width: 23%;
        height: 25%;
        text-align: justify;
        transform: translatex(90px);
        background-color: #14004d;
        border-radius: 20px;
        border-left: solid 3px #977ae9;
        border-bottom: solid 3px #977ae9;
        transition: all 0.4s ease;
        box-shadow: -10px 10px 15px 2px #1a0061;
        padding: 20px;
    }

    img[alt="amir"] {
        width: 80%;
        height: 70%;
        top: 20%;
        left: 30%;
    }

    /* darabrema */

    .darbarema {
        width: 58%;
        height: 80%;
        left: 25%;
        transform: translate(-0px, 90px);
        opacity: 0;
        visibility: hidden;
        gap: 50px;
        background-color: #15004d00;
    }

    .darbarema-box1 {
        width: 70%;
    }


    .darbarema-box1 div p {
        font-size: 7px;
        font-weight: bold;
    }


    .darbarema-box1 img {
        width: 70px;
        height: 70px;
    }

    .link-site button img {
        width: 20px;
        height: 20px;
        cursor: url(img/icons8-cursor-32.png), auto;
    }


    .darbarema-box2 {
        width: 70%;
        height: 30%;
    }


    .tamas1 {
        font-size: 6;
    }


    .tamas2 {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        direction: rtl;
        font-size: 6;
    }


    .p-hogog {
        font-size: 9px;
        top: 94%;
    }


    img[alt="amir-leon"] {
        top: 80%;
        right: 90%;
        width: 49%;
        height: 70%;
        opacity: 0;
        visibility: hidden;
    }

    /*  */

}

/*  */


@media screen and (max-width:50dvh) {

    /* safhe asly */
    .logo img {
        width: 90px;
        height: 90px;
        left: 100%;
    }

    .meno {
        opacity: 0;
        visibility: hidden;
    }

    .ertebat {
        width: 12%;
        height: 5.5%;
        position: fixed;
        right: 70%;
        bottom: 92.5%;
    }


    .meno-mobayl {
        opacity: 1;
        position: fixed;
        top: 2%;
        right: 85%;
        background-color: #c2acf7;
        width: 12%;
        height: 5.5%;
        border-radius: 50%;
        border: hidden;
    }

    #meno-mobayle {
        opacity: 0;
        position: fixed;
        top: 25%;
        background-color: #14004d;
        border-radius: 20px;
        width: 15%;
        height: 40%;
        box-shadow: 40px 0px 170px 250px #6544c0de;
        transition: all 0.2s ease;
    }

    #meno-mobayle img {
        width: 20px;
        height: 20px;
    }

    .meno-back {
        position: fixed;
        top: 80%;
        right: 82%;
        border-radius: 50%;
        border: hidden;
        width: 40px;
        height: 40px;
        background-color: #14004d;
    }

    .photo-shir {
        width: 68%;
        height: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 59%;
        left: 15%;
        border: solid 1px;
        border-color: #fdfdff #ffffff #330897 #14004d;
        border-radius: 0px 0px 0px 20px;
        transition: all 0.5s ease;
        transform: skewX(5deg);
    }

    .tablig {
        position: fixed;
        top: 43%;
        right: 10%;
        font-size: 9.5px;
        font-weight: bold;
        width: 150px;
    }

    h2 {
        position: fixed;
        top: 8%;
        right: 70%;
        font-family: "shabnam";
        direction: rtl;
        font-size: 19px;
        width: 100px;
        padding-left: 40px;
    }

    .khadamat div {
        width: 45%;
        height: 22%;
        left: 50%;
    }

    .khadamat div h4 {
        font-size: 11.5px;
    }

    .khadamat div p {
        font-size: 7.5px;
        line-height: 15px;
    }

    /*  */

    /* nemone_kar */
    .nemone_kar {
        width: 69%;
        height: 79%;
        position: fixed;
        left: 85%;
        top: 0%;
        bottom: 0%;
        border-radius: 10px;
        transition: all 0.5s ease;
        opacity: 0;
        visibility: hidden;
        z-index: -1;
        background-color: #15004d00;
    }

    .nemone_kar h1 {
        color: #c2acf7;
        font-size: 16px;
        font-family: "shabnam";
        background-color: #6544c0;
        text-align: center;
        width: 80%;
        position: absolute;
        bottom: 89%;
        left: 2%;
        padding: 12px 15px 12px 15px;
        box-shadow: 11px 15px 1px 1px #330897;
        border-radius: 10px;
    }

    .nemone div {
        width: 40%;
        height: 35%;
        left: 2%;
    }

    .nemone div h4 {
        color: #faf8ff;
        background-color: #3a00c270;
        margin-top: 60px;
        margin-left: 2px;
        width: 60px;
        height: 15px;
        font-size: 7PX;
    }

    /*  */

    /* marahel */

    .marahel {
        bottom: 22%;
        left: 97.7%;
        opacity: 0;
    }

    .marahel h4 {
        bottom: 88%;
        left: 1.5%;
        font-size: 14px;
    }

    .marahel ul {
        gap: 20px;
        width: 15%;
        position: relative;
        left: 70%;
        top: 22%;
        font-size: 8px;
        z-index: 2;
    }

    .marahel ul li {
        z-index: 999;
    }

    .marahel ul li:hover {
        border-bottom: 0px;
        transform: scaleX(1.2);
        color: #9600bb;
        z-index: 999;
    }

    .marahel span img {
        background-color: #25007c;
        border-radius: 10px;
        padding: 5px;
        transition: all 0.4s ease;
        width: 30px;
        height: 30px;
    }

    .tozih1,
    .tozih2,
    .tozih3,
    .tozih4,
    .tozih5,
    .tozih6 {
        position: fixed;
        right: 85%;
        opacity: 0;
        visibility: hidden;
        color: #c2acf7;
        width: 38%;
        height: 30%;
        padding: 10px;
        font-size: 8;
    }

    img[alt="amir"] {
        width: 85%;
        height: 65%;
        top: 17%;
        left: 20%;
    }

    /*  */


}

/* @media screen and (max-width:412px) { */
/* .nemone_kar { */
/* left: 90%; */
/* } */
/*  */
/* } */

@media screen and (max-width:360px) {
    .nemone_kar {
        left: 90%;
    }

    .nemone div {
        position: relative;
        right: 3%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nemone div h4 {
        background-color: #3a00c270;
        margin-top: 50px;
        margin-left: 0px;
        width: 55px;
        height: 15px;
        font-size: 7PX;
        color: #ffffff;
        padding: 2px 10px;
    }
}