*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: CustomFont;
    letter-spacing: 1px;
    transition: all 0.35s linear;
    color: #fff;
}

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Koulen&family=Lato&family=Nunito&family=Playfair+Display:ital@1&family=Prata&family=Raleway:ital,wght@1,100&family=Roboto&family=Roboto+Condensed&family=Teko&display=swap');
@font-face {
font-family: CustomFont;
src: url(../fonts/NRT-Font-Kurdish.ttf);
}

@media (max-width:500px) {
p.hp3{
font-size: 11px !important;
width: 300px;
text-align: center;
}
video{
width: 220px;
height: 140px;
aspect-ratio: auto 220 / 140;
}
#d9{
        margin-bottom: 35%;
margin-right: 5%;
}
}
@media (min-width:800px) {
#d1{

    display: flex;
    text-align: justify;
    flex-direction: column;
    align-items: center;
    /* margin-bottom: 70px; */
}
}
/* Start header + body + footer */
header{
background: #00b4d8;
height: 20px;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
} 

body{

    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-image: url(../img/1.gif);
    background-size: cover;
    background-repeat: space;
    justify-content: space-evenly;


}

.play  
{  
    width: 18px;
    height: 18px;
    margin-bottom: 4px;
    outline-color: #fff;
}
 
.glass{
 height: 85vh; 
padding: 0 20px;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
border-radius: 50px;
text-align: center;
   
    margin: 0; 
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); 
    box-shadow: 0px 10px 30px 0 rgba(43, 45, 66, 0.3);
    
 
}

footer{
    background: #00b4d8;
    height: 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

#myForm{
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    
}

p{
font-family: CustomFont;
font-size: 14px; 
}
a{
    text-decoration: none; 
}

.audio-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
    
.player{
    display: flex;
    /* grid-template-columns: 48px 1fr 48px; */
 
    padding: 0px 24px;
    position: relative;
    border-radius: 64px;
    border: solid 4px #00b4d8;
    margin-top: 15px;
    justify-content: end;
}
.controls{
    display: flex;
    gap: 15vh;
    /* height: 46px; */
     margin: 1px; 
    flex-direction: row;
}
/* .player[disabled]{
opacity: .2;
color: gray;
} */
#current{
    height: 100%;  
    text-align: right;
    color: #fff;
    margin-top: 6px;

}
#playbtn{ 
    margin: 10px 0;
    font-size: 20px; 
    width: 18px;
    height: 20px; 
    cursor: pointer; 
    background-color: transparent;
    border: transparent; 
    
}
#playbtn img
{
   
    width: 18px;
    height: 20px;   
}

#current1,#current2,
#current3,#current4,#current5{
    height: 100%;  
    text-align: right;
    color: #fff;
    margin-top: 6px;
}
#playbtn1,#playbtn2,
#playbtn3,#playbtn4,#playbtn5{ 
    margin: 10px 0;
    font-size: 20px; 
    width: 18px;
    height: 20px; 
    cursor: pointer; 
    background-color: transparent;
    border: transparent; 
}
#playbtn1 img,#playbtn2 img,
#playbtn3 img,#playbtn4 img,#playbtn5 img{
    width: 18px;
    height: 20px;   
}
#aud2[disabled],
#aud3[disabled],
#aud4[disabled],
#aud5[disabled]{
opacity: .2;
color: gray;
}

#progress1,#progress2,
#progress3,#progress4,#progress5{
    display: blcok;
    width: var(--progress,0%);
    background-color: #00b4d8;
    transition: all 1s linear;
    height: 100%; 
}

.info {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 21px;
}

.bar {
    --space: -4px;
    background-color: transparent;
    overflow: hidden;
    left: var(--space);
    right: var(--space);
    top: var(--space);
    bottom: var(--space);
    position: absolute;
    border-radius: 64px;
    z-index: -2;
}

#progress{
    display: blcok;
    width: var(--progress,0%);
    background-color: #00b4d8;
    transition: all 1s linear;
    height: 100%; 
}
/* btn id */

#btn3 ,#btn32{
    font-family: CustomFont;
    padding: 5px 20px ; 
    cursor: pointer;
    font-size: 15px;
    text-align: center;
    border-radius: 15px;
    background-color:transparent;
    border: solid 1px #ffffff;
    opacity: .2;
    }     
    
    #btn3 a, #btn32 a{
        color: #fff;
        background-color: transparent;
        text-decoration: none;
        width: 100%;
        height: 100%;
    }
.btn3{
    font-family: CustomFont;
    padding: 5px 20px ; 
    cursor: pointer;
    font-size: 15px;
    text-align: center;
    border-radius: 15px;
    background-color:transparent;
    border: solid 1px #ffffff;
    opacity: .2;
}

.btn3:hover{
transition : 1000ms; 
transform : translateY(-0px);
background-color:#00b4d8;
color: #fff; 
}

.btng{
    font-family: CustomFont;
    font-size: 14px;
    color: #fff;
    background-color: #00b4d8;
    padding: 5px 20px;
    border: 2px solid #0092af;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    
    }

#btn{
font-family: CustomFont;
padding: 5px 20px ; 
cursor: pointer;
font-size: 15px;
text-align: center;
border-radius: 15px;
background-color:transparent;
border: solid 1px #ffffff;
 
} 
#btn a{
color: #fff;
background-color: transparent;
text-decoration: none;
width: 100%;
height: 100%;
}

/**** btn class ****/



.con-b{
    width: fit-content;
}
/* hp */
.ihp{
animation: MoveUpDown 3s linear;
position: relative;
left: 0;
top: 15px;
margin-bottom: 10px;
border-radius: 50%;
border: 6px solid  #00b4d8;
width:200px;
height: 200px;
animation-delay: 2ms;
transform: matrix;
text-align: center;
}
.hpsl{
font-family: CustomFont;
font-size: 30px;

}

.hp{
font-family: CustomFont;
font-size: 22px;
margin-top: 10px;
text-align: center;
color: #fff;
}
.hp1{
font-family: CustomFont;
font-size: 18px;

}
.hp2{
font-family: CustomFont;
font-size: 16px;

}
.hp3{
font-family: CustomFont;
font-size: 18px;
.hp4{
    font-family: CustomFont;
    font-size: 14px;
}
}
span {
display: inline-block;
opacity: 0;
filter: blur(4px);
text-align: center;
}
/*   typewrite  */

.wrapper {
/*This part is important for centering*/
display: grid;
place-items: center;
}

.typing-demo { 
width: 22ch;
animation: typing 2s steps(22), step-end infinite alternate;
animation-delay: 2s;
animation-fill-mode: backwards;
white-space: nowrap;
overflow: hidden; 
font-family:CustomFont ;
font-size: 1em;
direction: rtl;
text-align: center;
}

@keyframes typing {
from {
    width: 0
}
0% { opacity: 0; }
100% { opacity: 1; }
}
    
/* sst */
.sst{
display: flex; 
text-align: justify;
flex-direction: column;
flex-wrap: nowrap;
padding-left: 15px;
}
.sst1{
display: flex;
width: 70%;
height: 400px;
overflow: auto;
flex-direction: column;
flex-wrap: nowrap;
padding-left: 15px;
text-align: center;
margin: 0 auto;
}
.bbl{
color: #00b4d8;
}

/* d ds */
#d1{
display: flex;
text-align: justify;
flex-direction: column;
align-items: center;
}

#d6{
display: flex;
text-align: justify;
flex-direction: column;
align-items: center;
}
#d9{
display: flex;
flex-direction: column;
align-items: center;
height: 450px;
justify-content: space-between;
}
.social-link{
    width: 200px;
    display: flex;
    justify-content: space-evenly;
}
.social-link img{
	width: 40px;
    height: 40px;
}
#logos{
    opacity: .2;
}
#btnBox{
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 300px;
}