@font-face {
    font-family: YekanBakh;
    src:url(Assets/fonts/YekanBakh-Regular.ttf) format("woff2"),
        url(Assets/fonts/YekanBakh-Regular.ttf) format("truetype"),
        url(Assets/fonts/YekanBakh-Regular.ttf) format("woff");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: Valman;
    src: url(Assets/fonts/Valman-Black.ttf)format("truetype"), url(Assets/fonts/Valman-Black.woff2) format("woff2"),
         url(Assets/fonts/Valman-Black.woff) format("woff");
}

*{
    padding: 0px;
    margin: 0px;
    /* border: 2px solid red */
}

html{
    overflow-x: hidden;
    direction: rtl;
}

body{
    font-family: YekanBakh;
    display: flex; justify-content: center; flex-direction: column; align-items: center; overflow-x:hidden;
}

#top{
    height: 940px; background: linear-gradient(150deg, black 20%, #1f1f1f 100%) ;
    display: flex; justify-content: start; flex-direction: column; align-items: center; gap: 30px;
}


#header{
    width: clamp(300px, 70%, 600px);height: fit-content; padding-left: 30px; padding-right: 30px; padding-top: 15px; padding-bottom: 15px; margin-top: 20px;
    background: linear-gradient(137deg, rgba(7.85, 7.85, 7.85, 0.60) 0%, rgba(57.87, 57.87, 57.87, 0.60) 49%,
    rgba(7.85, 7.85, 7.85, 0.60) 100%); border-radius: 25px; justify-content: space-between; align-items: center;
    display: inline-flex;
}

.header-text{
    opacity: 0.85; text-align: justify; color: white; font-size: 15px; font-family: Yekan Bakh; font-weight: 400;
    line-height: 33px; word-wrap: break-word;
}
#container{
    width: 100%; height: fit-content; display: flex; flex-direction: column; align-items: center; gap: 50px; margin-top: 200px;
}
#footer{
    width:100% ; height: 198px; position: relative; background-color: black; margin-top: 55px; overflow-x: hidden;
    display: flex; flex-direction: column; align-items: center; box-sizing: border-box;
}
.normal-text{
    color: white; font-size: 10px;
}
.png{
    width: 85%;
}
#poem{
    width: 60%;
}
#join-us{
    width: 100%;
}
#footer-text{
    width: 350px; height: auto; left: 235px; text-align: right;
    justify-content: center; display: flex; flex-direction: column; color: white; font-size: 9px; 
    font-family: YekanBakh; font-weight: 200; line-height: 15px; word-wrap: break-word; 
    padding-right: 20px; opacity: 0.8;
}
.footer-ul{
    display: flex; flex-direction: row ; justify-content: center; align-items: center; gap: 30px;
    list-style-type: none; padding: 0px; margin-top: 20px;  
}
.footer-ul-li{
    color: white; font-size: 14px; font-family: YekanBakh; font-weight: 400;
    line-height: 4.02px; word-wrap: break-word; opacity: 0.8;
    cursor: pointer; text-decoration: none;
}
.footer-ul-li:hover{
       opacity: 1; font-weight: 500;
}
#footer-des{
    width: 100%; height: fit-content; display: flex; flex-direction: row; align-items: top; gap: 10px;
    margin : 10px;padding-right:15px; padding-left: 30px; justify-content: space-between; 
    box-sizing: border-box;
}
@media(max-width:  500px){
    .svg{
        width: 100%;
    }
    #poem{
        width: 90%;
    }
    #footer-text{
        width: 150px;
    } 
   
    #footer-des{
        width: 100%; height: fit-content; display: flex; flex-direction: row-reverse; align-items: top; gap: 10px;
        margin : 10px;padding-right:15px; padding-left: 30px; justify-content: space-between; 
        box-sizing: border-box;
    }
    #footer{
        width: 100%;
    }
}