@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;
}
.cooler{
    width: 75%;
    height: 150px;
    border: 1px solid black;
    text-align: center;
    margin:auto;
    display: block;
    
    
    }
    .cooler:hover {
       border: 1.5px solid blue;
      }
      .contact{
        width: 30%;
        margin: auto;
        }
        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;
        
          }
          
  .tooltipp .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
     /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
  }
  
  .tooltipp .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
  }
  .tooltipp:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
  
  
  
  .tooltipp {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
    
    .tooltipp .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      top: -5px;
      left: 110%;
    }
    
    .tooltipp .tooltiptext::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 100%;
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent black transparent transparent;
    }
    .tooltipp:hover .tooltiptext {
      visibility: visible;
    }
    hr{
        border-width: 2px;
        color: black;
        background-color: black;
    }
    .uli {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: #000000;
        border: 1px solid #555;
      }
      
      .liu a {
        display: block;
        color: #ffffff;
        padding: 8px 16px;
        text-decoration: none;
      }
      
      .liu {
        text-align: center;
        border: 1px solid black;
        width: 100px;
      }
      
      .liu:last-child {
        border-bottom: none;
      }
      
      .liu a.active {
        background-color: #04AA6D;
        color: white;
      }
      
      .liu a:hover:not(.active) {
        background-color: #555;
        color: white;
      }
      .liu a:hover(.active) {
        background-color: #000000;
        color: white;
      }
      .uli , .liu {overflow: hidden;}