.navul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  .navli {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: #111;
  }
  
  .active {
    border-bottom: 2px solid #04AA6D;
    text-shadow: 2px 2px 5px green;
    
  }
  .active:hover{
   border-bottom: 2px solid blue;
   text-shadow: 2px 2px 5px blue;


  }
  @font-face {
    font-family: vazir ;
    font-style: normal;
    font-weight: 400;
    src: url("fonts/vazir/Vazir-Regular.eot") format(".eot");
    src: url("fonts/vazir/Vazir-Regular.ttf") format(".ttf");
    src:url("fonts/vazir/Vazir-Regular.woff") format(".woff");
    src:url("fonts/vazir/Vazir-Regular.woff2") format("woff2");
}   
@font-face {
    font-family: vazirbl ;
    font-style: normal;
    font-weight: 950;
    src: url("fonts/vazir/Vazir-Black.eot") format(".eot"),
    url("fonts/vazir/Vazir-Black.ttf") format(".ttf"),
    url("fonts/vazir/Vazir-Black.woff") format(".woff"),
    url("fonts/vazir/Vazir-Bold.woff2") format("woff2");
}  
@font-face {
    font-family: vazirli ;
    font-style: normal;
    font-weight: 100;
    src: url("fonts/vazir/Vazir-Light.eot") format(".eot"),
    url("fonts/vazir/Vazir-Light.ttf") format(".ttf"),
    url("fonts/vazir/Vazir-Light.woff") format(".woff"),
    url("fonts/vazir/Vazir-Light.woff2") format("woff2");
}  

@font-face {
    font-family: vazirbo ;
    font-style: normal;
    font-weight: 400;
    src: url("fonts/vazir/Vazir-Bold.eot") format(".eot"),
    url("fonts/vazir/Vazir-Bold.ttf") format(".ttf"),
    url("fonts/vazir/Vazir-Bold.woff") format(".woff"),
    url("fonts/vazir/Vazir-Bold.woff2") format("woff2");
}   
@font-face {
    font-family: sahelbl;
    font-style: normal;
    font-weight: 950;
    src: url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Black.eot") format(".eot"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Black.ttf") format(".ttf"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Black.woff") format(".woff"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Black.woff2") format(".woff2");
}
@font-face {
    font-family: sahelbo;
    font-style:normal;
    font-weight: 950;
    src: url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Bold.eot") format(".eot"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Bold.ttf") format(".ttf"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Bold.woff") format(".woff"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Bold.woff2") format(".woff2");
}
@font-face {
    font-family:tanha;
    font-style: normal;
    font-weight: 400;
    src: url("fonts/persian/tanha-font-v0.9/Tanha.eot") format(".eot"),
    url("fonts/persian/tanha-font-v0.9/Tanha.ttf") format(".ttf"),
    url("fonts/persian/tanha-font-v0.9/Tanha.woff") format(".woff"),
    url("fonts/persian/tanha-font-v0.9/Tanha.woff2") format(".woff2");
}
@font-face {
    font-family: yekan;
    src: url("fonts/yekan/yekan/Yekan.eot") format(".eot"),;
    src: url("fonts/yekan/yekan/Yekan.ttf") format(".ttf"),;
    src: url("fonts/yekan/yekan/Yekan.woff") format(".woff"),;
    src: url("fonts/yekan/yekan/Yekan.woff2") format(".woff2"),;
}
html,body{
    font-family: yekan;
}

@font-face {
    font-family: vazir ;
    font-style: normal;
    font-weight: 400;
    src: url("fonts/vazir/Vazir-Regular.eot") format(".eot");
    src: url("fonts/vazir/Vazir-Regular.ttf") format(".ttf");
    src:url("fonts/vazir/Vazir-Regular.woff") format(".woff");
    src:url("fonts/vazir/Vazir-Regular.woff2") format("woff2");
}   
@font-face {
    font-family: vazirbl ;
    font-style: normal;
    font-weight: 950;
    src: url("fonts/vazir/Vazir-Black.eot") format(".eot"),
    url("fonts/vazir/Vazir-Black.ttf") format(".ttf"),
    url("fonts/vazir/Vazir-Black.woff") format(".woff"),
    url("fonts/vazir/Vazir-Bold.woff2") format("woff2");
}  
@font-face {
    font-family: vazirli ;
    font-style: normal;
    font-weight: 100;
    src: url("fonts/vazir/Vazir-Light.eot") format(".eot"),
    url("fonts/vazir/Vazir-Light.ttf") format(".ttf"),
    url("fonts/vazir/Vazir-Light.woff") format(".woff"),
    url("fonts/vazir/Vazir-Light.woff2") format("woff2");
}  

@font-face {
    font-family: vazirbo ;
    font-style: normal;
    font-weight: 400;
    src: url("fonts/vazir/Vazir-Bold.eot") format(".eot"),
    url("fonts/vazir/Vazir-Bold.ttf") format(".ttf"),
    url("fonts/vazir/Vazir-Bold.woff") format(".woff"),
    url("fonts/vazir/Vazir-Bold.woff2") format("woff2");
}   
@font-face {
    font-family: sahelbl;
    font-style: normal;
    font-weight: 950;
    src: url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Black.eot") format(".eot"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Black.ttf") format(".ttf"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Black.woff") format(".woff"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Black.woff2") format(".woff2");
}
@font-face {
    font-family: sahelbo;
    font-style:normal;
    font-weight: 950;
    src: url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Bold.eot") format(".eot"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Bold.ttf") format(".ttf"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Bold.woff") format(".woff"),
    url("fonts/persian/sahel-font-v1.0.0-alpha14/Sahel-Bold.woff2") format(".woff2");
}
@font-face {
    font-family:tanha;
    font-style: normal;
    font-weight: 400;
    src: url("fonts/persian/tanha-font-v0.9/Tanha.eot") format(".eot"),
    url("fonts/persian/tanha-font-v0.9/Tanha.ttf") format(".ttf"),
    url("fonts/persian/tanha-font-v0.9/Tanha.woff") format(".woff"),
    url("fonts/persian/tanha-font-v0.9/Tanha.woff2") format(".woff2");
}
@font-face {
    font-family: yekan;
    src: url("fonts/yekan/Yekan.eot") format(".eot");
    src: url("fonts/yekan/Yekan.ttf") format(".ttf");
    src: url("fonts/yekan/Yekan.woff") format(".woff");
    src: url("fonts/yekan/Yekan.woff2") format(".woff2");
    src: url("fonts/yekan/Yekan.svg") format(".svg");
    src: url("fonts/yekan/Yekan.css") format(".css");
}
@font-face {
    font-family: poyla;
    src: url("Polya.otf") format("otf");
}
body{
    font-family: vazirli;
}
.ull{

    text-align: center;
    background-color: rgb(0, 0, 0);
    color: white;
    padding-top: 15px;
    height: 60px;
 margin-top: 0% ;
 border-bottom: 2px solid red ;
 border-left: 2px solid black;
 border-right: 2px solid black;
 border-top: 2px solid black;
}
/* a{ */
    /* text-decoration: none; */
    /* color: rgb(255, 255, 255); */
    /* border: 2px solid black; */
/* } */
.li{
    list-style-type: none;
    display: inline-block;
    margin-right: 25px;
}
.aa:hover{
    color: rgb(204, 0, 255);
    font-size: 20px;
    border-bottom: 3px groove rgb(255, 179, 0);
}
img{
    text-align: center;

}
.img1:hover{
border: 1.5px solid rgb(89, 89, 89);
}
.lii{
    list-style-type:none;
}
.bobobo{
    font-family: yekan;
}

strong
{
color: rgb(62, 62, 62);
font-style: normal;
font-weight: 800;
}
/* .


*/
/* .

*/
button {
    /* --- button styles --- */
    width: 200px;
    height: 75px;
    padding: 20px;
    background-color: #ddb104;
    border: 3px solid #22292f;
    color: white;
    /* --- transitions --- */
    transition: all 0.5s ease-in-out;
    margin: auto;
    display: block;
    text-align: center;
    border-radius: 15px; /* اضافه شده */
    font-family: Arial, sans-serif; /* اضافه شده */
    font-size: 16px; /* اضافه شده */
  }
   
  button:hover {
    background-color: #22292f;
    border: 3px solid #ddb104;
    transform: scale(1.3);
    width: 350px;
    border-radius: 30px; /* اضافه شده */
    height: 75px;

  }
  
  button > .spainish {
    transition: opacity 2s ease-in-out;
    opacity: 0;
    visibility: hidden;
  }
  
  button:hover > .spainish {
    opacity: 1;
    visibility: visible;
  }
  
  .spainish {
    text-align: left;
    font-style: italic; /* اضافه شده */
    font-size: 14px; /* اضافه شده */
  }
  
  .rotating-symbol {
    display: inline-block;
    margin-left: 5px;
    transition: transform 1s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 1;
}

.rotating-symbol.changing {
    opacity: 0;
}

button:hover .rotating-symbol {
    transform: rotate(360deg);
}
.csss {
  display: inline-block;
  margin-left: 5px;
  transition: transform 1s ease-in-out, opacity 0.5s ease-in-out;
  opacity: 1;
}

.csss.changing {
  opacity: 0;
}

button:hover .csss {
  transform: rotate(360deg);
}
button,span{
  direction: ltr;
}
button > .spainish23 {
  transition: opacity 2s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

button:hover > .spainish23 {
  opacity: 1;
  visibility: visible;
}

.spainish23 {
  text-align: left;
  font-style: italic; /* اضافه شده */
  font-size: 14px; /* اضافه شده */
  color: red;
}
*{
    text-align: justify;
}