ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-shadow: 2px 2px 5px black;
  }
  
  li {
    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 {
    background-color: #04AA6D;
    text-shadow: 2px 2px 5px green;
  }
  .active:hover{
background-color: #07fff7;
text-shadow: 2px 2px 5ppx blue;

  }
  ul,li,a,div{
    margin-bottom: 0;
    padding-bottom:0 ;
    bottom: 0;
  }
@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;
}

strong
{
color: rgb(62, 62, 62);
font-style: normal;
font-weight: 800;
}
.contact{
    width: 30%;
    margin: auto;
    }
    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;
    }
    
    .aaaa{
        height: 10px;
    }
    .aaaa:hover
    {
    border-bottom:2px solid gold;
    
    }
    @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;
    }
    .contact {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 10px auto; /* وسط‌چین با فاصله مناسب */
        transition: transform 0.3s ease;
      }
      
      @media (max-width: 600px) {
        .contact {
          width: 60%; /* برای موبایل */
        }
      }    
      h2{
        color: red;
    }
    li,ul{text-align: right;
    list-style-type: none;
    color: gray;
    }
                    .iframe-container {
                      position: relative;
                      width: 100%;
                      padding-bottom: 56.25%;
                      /* نسبت 16:9 (ارتفاع بر اساس عرض) */
                      height: 0;
                      overflow: hidden;
                     
                    }
          
                    .iframe-container iframe {
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      border: 0;
                    }