/* normalize */
body {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

:root {
    --griffin-dark: #0a0014 ;
    --griffin-purple: #ac23ff;
}

a {
    text-decoration: none;
    color: white;
}

li {
    list-style: none;

}

/* FONTS */

/* thin */
@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir-Thin.woff2') format("woff2"), url('/fonts/Vazir-Thin.woff') format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* light */
@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir-Light.woff2') format("woff2"), url('/fonts/Vazir-Light.woff') format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* medium */
@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir-Medium.woff2') format("woff2"), url('/fonts/Vazir-Medium.woff') format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* regular */
@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir.woff2') format("woff2"), url('/fonts/Vazir.woff') format("woff");
    font-display: swap;
    
}

/* bold */
@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir-Bold.woff2') format("woff2"), url('/fonts/Vazir-Bold.woff') format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* styles */

body {
    font-family: 'vazir';
}
button,input,select,textarea {
    font-family: inherit;
}
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}

button {
    cursor: pointer;
    transition: all 0.5s 0.1s linear, box-shadow 0.1s 0s linear;
    
}
button:active {
    box-shadow: 1px 1px 10px 10px aqua;
}
.a-iiner-link {
    cursor: pointer;
    transition: all 0.5s 0.1s linear, box-shadow 0.1s 0s linear;
    
}
.a-iiner-link:active {
    box-shadow: 1px 1px 10px 10px aqua;
}





/* main */
#menu-languageset {
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu-item a {
    color: white;
    font-weight: 700;
    text-decoration: none;
}

.header {
    /* width: 100%; */
    height: 70PX;
    background-color: #0a1a4f;
    background-color: black;
    padding: 30px 50px 10px 50px;
}

.headerMainContent {
    padding: 30px 50px 30px 50px;
    height: 65PX;
    line-height: 40px;
    background-color: black;
    display: flex;
    direction:ltr;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 2000;
    border-radius: 0px 0px 10px 10px;

}

.logo-wraper {
    /* color: aqua; */
    width: 150px;
    height: 65px;
    line-height: 50px;
    text-align: center;
}

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

.menoes-container {
    width: 55%;
}

.logo-burgermeno {
    width: 100px;
    height: 100px;
    display: none;
}

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

.changeLanguage {
    display: flex;
    align-items: center;
    justify-content: center;
}

.change-language-btn {
    width: 25px;
    height: 20px;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.change-language-btn:active {
    box-shadow: 0px 0px 6px 0px aqua;

}

.burgermenoContainerDiv {
    display: none;
    width: 30px;
    height: 20px;
    position: relative;
    right: 0px;
    top: 0px;
    cursor: pointer;
}


.line1 {
    width: 28px;
    height: 2px;
    background-color: #9c33ff;
    transition: all 1s 0.1s linear;
}

.line2 {
    width: 28px;
    height: 2px;
    background-color: #9c33ff;
    transition: all 1s 0s linear;
}

.line3 {
    width: 28px;
    height: 2px;
    background-color: #9c33ff;
    transition: all 1s 0.1s linear;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style-type: none;
}

.meno-logo-burger {
    display: none;
}

.menu li a {
    color: white;
    font-weight: 600;
    text-decoration: none;
}

.menu li {
    position: relative;
}

.menu li::after {
    content: "";
    width: 80%;
    height: 2px;
    position: absolute;
    /* background-color: aqua; */
    background: linear-gradient(90deg, #13befe, #9c33ff);
    left: 50%;
    transform: translateX(-50%) scale(0%);
    top: 34px;
    transition: all 0.2s 0.1s ease;
}

.menu li:hover::after {
    transform: translateX(-50%) scale(1);
}
/*////////////*/
/*popup*/
/*////////////*/

.icon {
    width:25px;
    height:25px;
}

.sub-menu li::after {
    width:50%;
}
.menoes-container ul li a {
    display:block;
    text-align:center;
}

.menu-item-has-children{
    max-height:40px;
    position:relative;
    transition:all 0.5s 0.1s linear;
}
.arrow_icon {
    width:50px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    position: absolute;
    top: 4px;
    left: -40px;
    transform: rotateZ(90deg);
    cursor:pointer;
    transition:all 0.5s 0.1s linear;
}
.popup_open {
    left: -33px;
    transform: rotateZ(270deg);
}
.sub-menu {
    width: 240px;
    padding: 3px 10px 6px 10px;
    position: absolute;
    left: -80px;
    visibility:hidden;
    transform:translateY(-15px);
    opacity:0;
    transition:all 0.5s 0.1s linear;
}
@media(max-width:1000px) {
    .menoes-container {
    width: 70%;
    }
}
@media(min-width:768px) and (max-width:840px) {
    ul li {
        font-size:15px;
    }
    .arrow_icon {
        left: -38px;
    }
    .menu-item-has-children:hover .arrow_icon {
        left: -27px;
    }
    
}
@media(min-width:768px) {
    


.menu-item-has-children:hover .sub-menu {
    box-shadow: 2px 5px 16px 0px var(--griffin-purple);
    border-radius: 15px 50px;
    transform:translateY(0px);
    background-color: black;
    visibility: visible;
    opacity: 1;
}
.arrow_icon:hover .arrow_icon{
    left: -40px;
    transform: rotateZ(270deg);
}
.menu-item-has-children:hover .arrow_icon {
    left: -40px;
    transform: rotateZ(270deg);
}
.sub-menu li {
   font-size:14px !important;
}

}
/* key frames */


@keyframes logo-burgermeno-shine {
    0% {
        transform: translateX(175px) scale(0);
    }

    100% {
        transform: translateX(0px) scale(1);
    }
}

@keyframes logo-burgermeno-fall {
    0% {
        transform: translateX(0px) scale(1);
    }

    100% {
        transform: translateX(175px) scale(0);
    }

}

/* medias */

@media (max-width : 768px) {

    /* for header */
    .logo-burgermeno {
        display: block;
        margin-top: 50px;
        margin-right: auto;
        margin-left: auto;

    }

    .logo-burgermeno-shineAnimate {
        animation-name: logo-burgermeno-shine;
        animation-duration: 1s;
        animation-timing-function: linear;
    }

    .logo-burgermeno-fallAnimate {
        animation-name: logo-burgermeno-fall;
        animation-duration: 1s;
        animation-timing-function: linear;

    }

    .burgermenoContainerDiv {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        visibility: visible;
    }

    #menu-fa-menue,#menu-en-menue {
        flex-direction: column;
        gap: 10px;
    }

    .menu li {
        font-size: 25px;
    }
    .menu ul li {
        font-size:14px !important;
    }

    .header .menoes-container {
        width: 250px;
        height: 100vh;
        position: fixed;
        right: -250px;
        top: 0px;
        background-color: black;
        padding-top: 75px;
        transition: all 1s 0.1s linear;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    /*popup*/
    .icon {
        width:30px;
        height:30px;
    }
    .arrow_icon {
        height:50px;
        left:-7px;
        top:-8px;
    }
    .popup_open {
        left:-11px;
    }
    .sub-menu {
        padding:3px 0px;
        position:static;
    }
    .sub-menu_open {
        border-radius: 0px 50px;
        transform:translateY(0px) ;
        background-color: black;
        visibility: visible;
        opacity:1;
        
    }
    .sub-menu_open li {
        font-size:18px !important;
    }
    .open_popup_on_mobile {
        max-height:400px;
}
}

@media (max-width : 360px) {
    .header .menoes-container {
        right:-320px;
    }
        .section2-step1 {
        width: 330px;
    }
    .headerMainContent {
        padding: 30px 30px 30px 30px;
    }
}
@media (max-height:670px) {
    #menu-fa-menue, #menu-en-menue {
        gap:5px
    }
}

.page_item {
    color: white;
}