@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;
        }
        .h2{
            width: 200px;
            height: 100px;
            background: rgb(0, 0, 0);
            transition: width 2s, height 2s, transform 2s, color 2s,opacity 2s, border-radius 2s ;
             text-align: center;
             color: white;
             margin-top: 100px;
             font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
             border-radius: 10px;
             z-index: 0.5;
             font-style: italic;
        
        
        }
        .h2:hover {
            width: 300px;
            height: 250px;
            transform: rotate(360deg);
            color: rgb(0, 106, 255);
            opacity: 0.8;
            border-radius: 40px;
          
          }
          @keyframes wellcome {
            0%   {background-color:red;z-index:0 ;}
            15%  {background-color:yellow;z-index: 0;}
            30%  {background-color:blue;z-index: 1;}
            45%  {background-color:green;z-index: 1;}
            60% {background-color:rgb(255, 0, 217);z-index: 1;}
            70% {background-color:rgb(255, 149, 0);z-index: 0;}
            80% {background-color:rgb(0, 183, 255);z-index: 0;}
            /* 90% {background-color:gold; left:0px; top:0px;z-index: 0;} */
            /* 100% {background-color:rgb(0, 255, 21); left:0px; top:0px;z-index: 0;} */
            
          }
          .hh2{
        
            animation-name: wellcome;
          animation-duration: 8s;
          animation-iteration-count: infinite;
          height: 100px;
          width: 100px;
          position: relative;
          text-decoration: dashed;
          text-align: center;
          margin: auto;
          border-radius: 10px;
          z-index: 1;
          font-weight: bold;
          font-style: italic;
          }
          .hh2:hover{
            box-shadow: 4px 4px 8px rgb(0, 191, 255);
            border-radius: 15px;
          }
          a{
        padding-top: 100px;
        
          }
          .tooltip{
          animation-name: IRANDUCT;
          animation-duration: 5s;
          animation-iteration-count: infinite;
          position: relative;
          }
          @keyframes IRANDUCT{
          0% {top: 0px;}
          25%{top: 200px;}
          50%{top: 0px;}
          75%{top: 200px;}
          100%{top: 0px;}
          }
          .contacttrans{
            animation-name: IRANDUCTc;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            position: relative;
          }
          @keyframes IRANDUCTc{
            0% {top: 0px;}
            25%{top: 200px;}
            50%{top: 0px;}
            75%{top: 200px;}
            100%{top: 0px;}
          }
        
        .darvishvand{
          animation-name: darvishvand;
          animation-duration: 10s;
          animation-iteration-count: infinite;
          position: relative;
        }
        @keyframes darvishvand {
         0%{color: currentColor;}
         10%{color: red;} 
         20%{color: purple;}
         30%{color: blue;}
         40%{color: cyan;}
         50%{color: darkgoldenrod;}
         60%{color: lime;}
         70%{color: royalblue;}
         80%{color:rgb(255, 221, 0) ;}
         90%{color: rgb(0, 255, 132);}
         100%{color: black;}
        }
        .ppppp{
          font-weight: bold;
        }
        .spain{
          font-weight: bolder;
          font-style: italic;
        }
        .tooltipp{
          animation-name: mainIRANDUCT;
          animation-duration: 5s;
          animation-iteration-count: infinite;
          position: relative;
          }
          @keyframes mainIRANUCT{
          0% {right: 0px;}
          25%{right: 200px;}
          50%{right: 0px;}
          75%{right: -200px;}
          100%{right: 0px;}
          }
          .ull{
            height: 100px;
          }
          .tooltippp{
            animation-name: aboutIRANDUCT;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            position: relative;
          }
          @keyframes aboutIRANDUCT{
            0%{opacity: 1;color: black;}
            25%{opacity: 0.5;color: blue;}
            50%{opacity: 0;color: gold;}
            75%{opacity: 0.5;color: red;}
            100%{opacity: 1;color: black;}
          }
          .iiir
        {
          animation-name: iiir;
          animation-duration: 5s;
          animation-delay: 0s;
          animation-iteration-count: infinite;
        }
        @keyframes iiir {
          0%{border: 3px solid black;}
          25%{border: 3px solid blue;}
          50%{border: 3px solid red;}
          75%{border: 3px solid gold;}
          100%{border: 3px solid black;}
          
        }
        .iiir:hover{
          background-color: darkgray;
        }
        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;}
      .aaaa{
        height: 10px;
    }
    .aaaa:hover
    {
    border-bottom:2px solid gold;
    
    }    
    p.h4{
     font-size: larger;
     text-shadow: 2px 2px 5px black;
     text-align: right;

    }
    p.myp{
      text-shadow: 2px 2px 5px black;
    }
    i.ii{
      color: red;
    }
    i.ioi{
      margin-top: 0;
      text-shadow: 2px 2px 5px hsl(0, 0%, 0%);
      font-size: larger;

    }
    p.mip{
      text-align: center;
      font-style: italic;
      text-shadow: 2px 2px 5px black;
    }
    p.mmp{
      text-shadow: 2px 2px 3px black;
    }
    h2.darvishvand{
      text-align: center;
      margin: auto;
      text-shadow: 2px 3px 5px black;
    }
    h4.h4c{
      text-align: center;
      color: rgb(255, 106, 0);
      font-size: 20px;
    }
    p.ponda{
      text-align: center;
      color: chocolate;
      font-size: 20px;
    }
    h2.h2c3{
      text-align: center;
      color: cornflowerblue;
    }
    h3.h3stlo{
     text-align: center;
    }
    p.fogp{
      text-align: center;
      font-size: larger;
      text-shadow: 2px 2px 3px gray;
    }
    h2.h2fogl{
      font-family: vazirli;
      text-shadow: 2px 2px 5px black;
    }
    a.wowa{
      text-decoration: none;
    }
    div.repair{
      text-align: center;
    }
    h3.hhh3{
      text-align: center;
      text-shadow: 2px 2px 5px black;
    }
    div.sell{
      text-align: center;
    }
    p.cosp{
      text-align: center;
    }
    p.ppppp{
       text-shadow: 2px 2px 3px black;
    }
    span.spain{
      text-shadow: 2px 2px 5px rgb(0, 0, 0);
    }
    h2.hh2{
      text-shadow: 2px 2px 5px white;
      overflow: hidden;
    }
    div.dave{
     text-align: center;
    }
    div.tahvi{
      font-size: 20px;
      text-align: center
      ;width: 50%;
      margin: auto;
    }
    h2.tooltipp{
      text-shadow: 3px 3px 5px black;
    }
    h3.fogh3{
      text-align: center;
    }
        .iranduct-content {
          max-width: 900px;
          margin: 0 auto;
          padding: 20px 25px;
          font-family: 'Arial', sans-serif;
          color: #444;
          line-height: 1.7;
        }
    
        .iranduct-content h5,
        .iranduct-content h6 {
          color: #222;
          margin-top: 25px;
          margin-bottom: 12px;
        }
    
        .iranduct-content h5 {
          font-size: large;
        }
    
        .iranduct-content h6 {
          font-size:large;
          font-weight: 600;
        }
    
        .iranduct-content p {
          margin-bottom: 16px;
          font-size: 1rem;
        }
    
        .iranduct-content ul {
          margin: 15px 0 20px 25px;
        }
    
        .iranduct-content ul li {
          margin-bottom: 9px;
          font-size: 1rem;
          color: #555;
        }
        *{
          text-align: justify;
        }
    
        /* ریسپانسیو برای صفحه نمایش کوچکتر از 768 پیکسل (تبلت و موبایل) */
        @media (max-width: 768px) {
          .iranduct-content {
            padding: 15px 18px;
            max-width: 100%;
            
          }
    
          .iranduct-content h5 {
            font-size: large;
          }
    
          .iranduct-content h6 {
            font-size: large;
          }
    
          .iranduct-content p,
          .iranduct-content ul li {
            font-size: 0.95rem;
          }
          *{
            text-align: justify;
          }
        }
    
        /* ریسپانسیو برای موبایل‌های خیلی کوچک (کمتر از 400 پیکسل) */
        @media (max-width: 400px) {
          .iranduct-content {
            padding: 10px 12px;
          }
    
          .iranduct-content h5 {
            font-size:large;
          }
    
          .iranduct-content h6 {
            font-size: large;
          }
    
          .iranduct-content p,
          .iranduct-content ul li {
            font-size: 0.9rem;
          }
          *{
            text-align: justify;
          }
        }
                span.spoon {
                  color: #007acc;
                  font-weight: 600;
                  display: block;
                  /* باعث میشه هر span در خط جدا باشه */
                  margin-bottom: 5px;
                  /* فاصله زیر هر کلمه کلیدی */
                }
                span.spain{
                  text-align: center;
                  margin: auto;
                  display: block;
                }
                
                                    .content {
                                      display: none;
                                      /* متن مخفی به صورت پیشفرض */
                                      background-color: #ffffff;
                                      border: 1px solid #ccc;
                                      padding: 15px;
                                      border-radius: 6px;
                                    }
                                    .coonh3{
                                      cursor: pointer;
                                      text-align: center;
                                      margin: auto;
                                      display: block;
                                    }
                                    .ppppppppp{
                                      text-decoration: underline;
                                    }
  .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;
    }