.main-menu ul li ul {
    position: absolute;
    width: 250px;
    background: #fff;
    top: 115px;
    right: 0;
    box-shadow: 0px 1px 6px #e6e6e6;
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease-in-out;
    z-index: 999;
    }
    .main-menu ul li ul li {
    list-style: none;
    }
    .main-menu ul li ul li a {
    padding: 9px 15px;
    display: block;
    font-weight: normal;
    
    }
    .main-menu ul li ul li a:hover {
    background: #5caf21;
    color: #fff;
    }
    .main-menu > ul > li:hover ul {
    opacity: 1;
    visibility: visible;
    top: 83px;
    }
    .main-menu ul li ul {
  position: absolute;
  width: 250px;
  background: #fff;
  top: 115px;
  right: 0;
  box-shadow: 0px 1px 6px #e6e6e6;
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease-in-out;
  z-index: 999;
  }
  .main-menu ul li ul li {
  list-style: none;
  }
  .main-menu ul li ul li a {
  padding: 9px 15px;
  display: block;
  font-weight: normal;
  
  }
  .main-menu ul li ul li a:hover {
  background: #5caf21;
  color: #fff;
  }
  .main-menu > ul > li:hover ul {
  opacity: 1;
  visibility: visible;
  top: 83px;
  }
  body {
  direction: rtl;
  font-size: 14px;
  text-align: right;
  color: #303030;
  line-height: 30px;
  font-family: 'iransans';
  }
  
  .main-menu {
  float: right;
  }
  .main-menu > ul > li {
  float: right;
  list-style: none;
  position: relative;
  }
  .main-menu ul li a {
  padding: 26px 22px;
  display: inline-block;
  font-size: 15px;
  text-decoration: none;
  color: #454647;
  font-weight: bold;
  }
  .main-menu ul li a i {
  margin-right: 5px;
  }
  @media (max-width: 768px) {
    .main-menu {
      width: 100%;
      float: none;
    }
  
    .main-menu > ul {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0;
      margin: 0;
    }
  
    .main-menu > ul > li {
      width: 100%;
      float: none;
      border-bottom: 1px solid #eaeaea;
    }
  
    .main-menu ul li a {
      display: block;
      padding: 15px 20px;
      font-size: 14px;
    }
  
    .main-menu ul li ul {
      position: static;
      opacity: 1;
      visibility: visible;
      box-shadow: none;
      width: 100%;
      background: #f9f9f9;
      display: none;
    }
  
    .main-menu > ul > li:hover ul {
      display: block;
      top: auto;
    }
  
    .main-menu ul li ul li a {
      padding: 12px 25px;
      font-size: 13px;
    }
  }
  @media (max-width: 768px) {
    .main-menu ul li ul {
      position: static;
      width: 100%;
      max-width: 100%;
      background: #f9f9f9;
      box-shadow: none;
      opacity: 1;
      visibility: visible;
      display: none;
      padding: 0;
      margin: 0;
      overflow-x: hidden;
    }
  
    .main-menu ul li ul li a {
      padding: 12px 20px;
      font-size: 13px;
      white-space: normal; /* جلوگیری از اسکرول افقی */
    }
  
    .main-menu > ul > li:hover ul {
      display: block;
    }
  }
  @media (max-width: 300px) {
    .main-menu > ul {
      flex-direction: column;
      padding: 0;
      margin: 0;
    }
  
    .main-menu > ul > li {
      width: 100%;
      border-bottom: 1px solid #ddd;
    }
  
    .main-menu ul li a {
      padding: 10px 12px;
      font-size: 12px;
    }
  
    .main-menu ul li ul li a {
      padding: 10px 18px;
      font-size: 11px;
    }
  
    .main-menu ul li ul {
      width: 100%;
      background: #f2f2f2;
      padding: 0;
    }
  
    body {
      font-size: 13px;
      line-height: 24px;
    }
  
    html, body {
      overflow-x: hidden;
    }
  }
  .uuul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-shadow: 2px 2px 5px black;
  }
  
  .llli {
    float: left;
  }
  
  .llli a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  .llli a:hover:not(.aaactive) {
    background-color: #111;
  }
  
  .active {
    background-color:  #04AA6D;
    
  }
  .active:hover{
   background-color: #00fff7;

  }
  @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;
}
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;
}