*{

    box-sizing: border-box;
    padding: 0;
    margin: 0;
}



body{

      background-color: #F0F2F5;
      font-family: 'Almarai', sans-serif; 
    
}

::placeholder{

      color :#555ccc;
      position: relative;
      left: 28px;
      font-weight: bolder;
      font-size: 14px;
}


/* start nav */


  nav{

      padding: 30px ;
      background-color: white;
      position: relative;

  }



    nav{

        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
    
    
          }



  @media(max-width:768px){

    nav{
         padding:45px;
         margin-left: 0;
    }
} 


  @media(max-width:576px){

      nav{
           padding:40px;
           margin-left: 0;
      }
  } 


  

/* start right */

   nav>.container{
   
      margin-right: 0;
   } 


  nav .r img{

     width: 40px;
     height: 40px;
     border-radius: 50%;
     margin-left: -33px;
     position: absolute;
     top: 8px ;    
}


@media(max-width:992px){

  nav .r img{

    display: block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-left: -286px;
    position: absolute;
    top: 14px;
}

}


@media(max-width:768px){

  nav .r img{

    display: none;

}

}


 @media(max-width:576px){

    nav .r img{

      display: none;

 }

}

  nav .r input{

   position: absolute;
   left: 972px;
   top: 10px; 
   padding: 10px;
   border-radius: 20px;
   border: 1px solid#ccc;
   width: 232px;
   background-color: #F0F2F5;
   outline: 0;
  }

  nav .r  i {

    position: absolute;
    top: 20px;
    left: 1157px;
    background-color: #F0F2F5;
    font-size: 23px;
 
 }


 @media(min-width:992px){

      nav .r span{

        display: none;
    }

 }


@media(min-width:768px){
 nav .r>span{

  color: #00f;
  font-size: 20px;
  position: absolute;
  top: 6px;
  left: 603px; }

    }


   @media(max-width:576px){

      nav .r>span{

        color: #00f;
        font-size: 18px;
        position: absolute;
        top: 1px;
        left: 239px;

            }

    }


    @media(max-width:992px){

      nav .r input{
    
        display: block;
        position: absolute;
        left: 743px;
        top: 10px;
        padding: 10px;
        border-radius: 20px;
        border: 1px solid#ccc;
        width: 232px;
        background-color: #F0F2F5;
        outline: 0;
    
      }

      nav .r i{

        position: absolute;
        top: 19px;
        left: 931px;
        background-color: #F0F2F5;
        font-size: 23px; 
      }

    }




    
 @media(max-width:768px){

  nav .r input{

      display: none;
  }

  nav .r  i {

    transform: translate(-891px, 19px);
    height: 0;
    font-size: 33px;
    color: #0505059e;
  
        }
 
}



  @media(max-width:576px){

      nav .r input{

          display: none;
      }

      nav .r  i {

        transform: translate(-858px, -12px);
        height: 0;
        font-size: 22px;
        color: #0505059e;      }
     
  }


 
 /* nav letf  */


 /* start center nav  c */
 


   nav .c{

     font-size: 27px;
     position: absolute;
     left: 337px;
     top: 10px;
     color:#00000059;
     cursor: pointer;
   }
   
   nav .c :not(i:last-child):hover{

     color: blue;

   }


   nav .c i {

     margin-left: 70px;
   }


   
   @media(min-width:992px){

    nav .c i:nth-child(4){
       
      display: none;

       }
   }

   
    @media(max-width:992px){

      nav .c i:nth-of-type(3){

          display: none;
        
            } 
      
     nav .c i:nth-of-type(5){

              display: none;
             }        
       
     nav .c i:last-child{

      position: absolute;
      left: 184px;
      top: 6px;
      font-size: 30px;               }
          
        }


   @media(max-width:768px){


    nav .c i {

      margin-left: -7px;
      color:#0505059e ;
    }

     
  nav .c i:nth-of-type(5){

       display: none;
      }        

  nav .c :first-child{

     display: none;
  }     


 nav .c i:nth-of-type(3){

  position: absolute;
  left: 50px;
  top: 33px;
  font-size: 29px;
  display: block;

} 

   nav .c i:nth-of-type(2){
    position: absolute;
    left: 248px;
    top: 31px;
    font-size: 35px;
      } 


 nav .c i:nth-child(4){

  width: 30px;
  height: 30px;
  transform: translate(150px,32px);
  font-size: 35px; }  

 nav .c i:last-child{

  transform: translate(161px,26px);
  font-size: 35px;     }

}



  @media(max-width:576px){


          nav .c i {

            margin-left: -7px;
            color:#0505059e ;
          }
      
           
        nav .c i:nth-of-type(5){

             display: none;
            }        

        nav .c :first-child{

           display: none;
        }     


       nav .c i:nth-of-type(3){

          position:absolute;
          left:-200px;
          top:31px;
          font-size:23px;
          display: block;
        } 

         nav .c i:nth-of-type(2){
          position: absolute;
          left: -89px;
          top: 31px;
          font-size: 30px;        } 

     
       nav .c i:nth-child(4){

        width: 30px;
        height: 30px;
        position: absolute;
        left: -297px;
        font-size: 31px;
        top: -2px;        
      }  

       nav .c i:last-child{

        transform: translate(-213px,24px);
        font-size: 28px;      
             }

  }

     
   nav .c i:last-child{

       color: blue;
   } 

   nav .c i:last-of-type::after{

    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background-color: #00f;
    margin: 10px 0;
    position: absolute;
    left: 458px;
  }



  @media(max-width:992px){

    nav .c i:last-of-type::after{

      content: '';
      display: block;
      width: 75px;
      height: 3px;
      background-color: #00f;
      margin: 10px 0;
      position: absolute;
      left: -24px;
    
           }    

  }



  @media(max-width:768px){

    nav .c i:last-of-type::after{

      content: '';
      display: block;
      width: 55px;
      height: 3px;
      background-color: #00f;
      margin: 10px 0;
      transform: translate(16px,-3px);      }    

  }

  
  @media(max-width:576px){

    nav .c i:last-of-type::after{

      content: '';
      display: block;
      width: 50px;
      height: 3px;
      background-color: #00f;
      margin: 10px 0;
      transform: translate(10px,-3px);      }    

  }


 /* center nav end  c */


   /* start left nav  */
   
     nav .left{

      font-size: 31px;
      position: absolute;
      left: 15px;
      top: 5px;
      color:#00000059;
      cursor: pointer;
 
     }
   
     
   
    nav .left i {

       margin-left: 15px;    
       border-radius: 50%;
       background-color: #F0F2F5;
       width: 40px;
       height: 35px;
       color: #050505c2;
    }


    @media(max-width:768px){


      nav .left i{

         color: #0505059e;
      }


      nav .left i:first-child{

        display: none;

      }   

      nav .left i:nth-child(2){

        background-color: none;
        position: absolute;
        left: 79px;
        top: 35px;
        background: white;
        font-size: 35px;
      
           }

      nav .left i:nth-child(3){

        position: absolute;
        top: 34px;
        left: 165px;
        height: 0px;
        font-size: 35px;           }


      nav .left i:last-of-type{

        position: absolute;
        top: 37px;
        left: 257px;
        height: 0;
        font-size: 30px;      }

    }



    @media(max-width:576px){


      nav .left i{

         color: #0505059e;
      }


      nav .left i:first-child{

        display: none;

      }   

      nav .left i:nth-child(2){

        background-color: none;
        position: absolute;
        left: 35px;
        top: 33px;
        background: white;
        font-size: 30px;            }

      nav .left i:nth-child(3){

        position: absolute;
        top: -1px;
        left: -12px;
        height: 0px;
        font-size: 30px;
        }


      nav .left i:last-of-type{

        position: absolute;
        top: 36px;
        left: -14px;
        height: 0;
        font-size: 25px;
      }

    }
      

    nav .left i:hover{

       color: #00f;
       cursor: pointer;   
    }


    nav .left img{

      width: 30px;

      height: 30px;
      
      border-radius: 50%;
      
      transform: translate(48px, -1px);
            
    }

    @media(max-width:768px) {
      
      nav .left img{

          display: none;
      }

    }


    nav .left small{

      color: #000;
      font-size: 13px;
      position: absolute;
      top: 13px;left: 254px;
        
    }
   
     @media(max-width:768px){

        nav .left small{

            display: none;
        }
     }   
      

     nav .left .inline::after{

        content:'';
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid white;
        background-color: red;
        position: absolute;
        right: 245px;
         top: 2px;   
     }



   /* end left nav*/



/* لوالشخص فاتح بنقطه  */

/* .inline::after {

  content:'';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:green;
  position: absolute;
  right: 0;
  top: 0;

} */

/* end nav left */



/* start c */

.c .l {
  max-width: 300px;
   max-height: 300px;
   padding: 20px;
   margin-left: 29px;
   margin-top: 22px;
   cursor: pointer;
  }


  .c .l span{

       display: block;
       transform: translate(61px ,-20px)
  }



  .c .l img{

      width: 100px;
      height: 95px;
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 20%;
      transition: all 2s ease-in-out;
      border: 1px solid#ccc;
      box-shadow: -1px -1px #f00,1px 1px 1px #ff0;
      transition: all 2s ease-in-out;
  }


    .c .l img:first-of-type{

      
     position: relative;
     left: 16px;
     top: 20px;
    }

 
      .c .l img:last-of-type{
  
        
       position: relative;
       left: 11px;
       top:9px;
      }
  
  

 @media(max-width:992px){


   .c .l img:last-of-type{

     
    position: relative;
    left: 36px;
    top:9px;
   }

}



  @media(max-width:992px){


     .c .l img:first-of-type{

       
      position: relative;
      left: 36px;
      top: 20px;
     }

  }
  

  @media(max-width:992px){


    .c .l img:last-of-type{

      
     position: relative;
     left: 36px;
     top:9px;
    }

 }




  .c .l h6{

    transform: translate(-102px, -45px)
    
  }


  @media(max-width:992px){

        
    .c .l h6{

      display: block;
      transform: translate(-65px ,-44px)
    }

 }



   .c  .container .l  img:hover{

    transform: rotate(5deg) scale(0) translate(2px ,-2px) skew(5deg,5deg);

   }


   @media(max-width:768px){

    .c .l{
          
          display: none;

        }
 
   }


/* end c */


 /* start cc */
     
   .cc{

    position: relative;
    transform: translate(0px, 45px);      
   }


   @media(max-width:992px){

     
      .cc{

            position: relative ;
            top: -3px ;
      }

   }



   @media(max-width:768px){

    .cc{
         
         position: absolute;
         left: 100px;
         top: 235px;
         z-index: 1;
        
    }

}



   @media(max-width:576px){

       .cc{
            
            position: absolute;
            left: 100px;
            top: 234px;
            z-index: 1;
           
       }

   }


   .cc img{

       width: 135px; height: 230px; 
       transform:translate(218px,-294px);
       cursor: pointer;
       border-radius:15px;                     
       transition: all 1s ease-in-out;
       position: relative;
    }
    
    

   .cc .row  .m .col{

      flex-grow: 0;
   }  

   .cc .m>img:hover {

       background-color: #ccc;
       padding:5px;
   }
    
   .cc .row  .col{

    padding-left:3px;
    padding-right:3px;

  }




  @media(max-width:768px){

    .cc  img{
               
      width: 60px;
      height: 116px;
      position: relative;
      left: -71px;
      top: -5px;
      cursor: pointer;
      border-radius: 5px;
      padding-right: 3px;
        } 

}


  @media(max-width:576px){

    .cc  img{
               
      width: 60px;
      height: 116px;
      position: relative;
      left: -71px;
      top: -5px;
      cursor: pointer;
      border-radius: 5px;
      padding-right: 3px;
        } 

}



@media(max-width:992px){


     .cc img:nth-child(5){

      position: absolute;
      left: 601px;

          } 

     .cc img:nth-child(4){

      position: absolute;
      left: 452px;

        }     

     .cc img:nth-child(3){

      position: absolute;
      left: 326px;
      width: 120px;

       }
       
       
      .cc img:nth-child(2){

        position: absolute;
        left: 202px;
        width: 120px;
           
      } 
      
      
     .cc img:first-child{

      
      position: relative;
      left: 62px;
      width: 110px;
        
         } 

}


@media(max-width:768px){

  .cc  img:first-child{
  
    position: relative;
    top: 301px;
    left: -313px;
    width: 140px;
    height: 200px;
  
          }


  .cc  img:nth-child(2){
  
    position: relative;
    top: 301px;
    left: -306px;
    width: 141px;
    height: 200px;    }

  .cc img:nth-child(3){
  
    position: relative;
    top: 299px;
    left: -300px;
    width: 140px;
    height: 200px;  
  
          }


  .cc  img:nth-child(4){
  
    position: relative;
    top: 298px;
    left: -295px;
    height: 200px;
    width: 140px;  
         }
  
  .cc  img:nth-child(5){
  
    position: relative;
    left: 287px;
    top: 99px;
    height: 200px;
    width: 140px;      } 
  
}



@media(max-width:576px){

  .cc  img:first-child{
  
    position: relative;
    top: 290px;
    left: -244px;
    width: 62px;
    height: 120px;
  
       }


  .cc  img:nth-child(2){
  
    position: relative;
    top: 290px;
    left: -374px;
    width: 62px;
    height: 120px;    }

  .cc img:nth-child(3){
  
    position: relative;
    top: 290px;
    left: -307px;
    width: 62px; 
     height:120px ; 
  
  }


  .cc  img:nth-child(4){
  
    position: relative;
    top: 290px;
    left: -300px;
    width: 62px; 
    height: 120px;
  }
  
  .cc  img:nth-child(5){
  
    position: relative;
    left: -40px;
    top: 170px;
    width: 62px;
    height: 120px;
      } 
  
}



  /* السهم */

  .cc .row  .m img:nth-child(6)  {
      
    width: 40px;
    height: 40px;
    transform: translate(-490px, -285px);
    border-radius: 50%;
    border: 1px solid#ccc;          
    background-color: #fff;

  }


  @media(max-width:768px){

    .cc .row .m img:nth-child(6){

    width: 45px;
    height: 40px;
    position: absolute;
    left: 517px;
    top: 372px;
    border-radius: 50%;
    border: 1px solid#ccc;
    position: absolute;
    z-index: 4;
    background-color: #fff;

               }
 }



   
   @media(max-width:576px){

     .cc .row .m img:nth-child(6){

      width: 30px;
      height: 30px;
      position: absolute;
      left: 396px;
      top: 318px;
      border-radius: 50%;
      border: 1px solid#ccc;
      position: absolute;
      z-index: 4;
      background-color: #fff;
   }

  }

     /* + */

  .cc .row  .m  img:last-of-type  {      
    width: 40px;
    height: 40px;
    transform: translate(76px, -236px);
    border-radius: 50%;
    z-index: 1;

  }


  @media(max-width:992px){

    .cc .row .m img:last-of-type{

      width: 40px;
      height: 40px;
      transform: translate(692px, -237px);
      border-radius: 50%;
      z-index: 1;
    }

  }


  @media(max-width:768px){

    .cc .row .m  img:last-of-type{

      width: 40px;
      height: 40px;
      position: absolute;
      top: 371px;
      left: -139px;
      border-radius: 50%;
      z-index: 1;       }
   }



   @media(max-width:576px){

      .cc .row .m  img:last-of-type{

        width: 25px;
        height: 25px;
        position: absolute;
        top: 308px;
        left: -496px;
        border-radius: 50%;
        z-index: 1;         }
     }

    /* انشاء اسم  */

  .cc .container .row>h6{

    transform: translate(0px, -117px);
    padding: 14px;
    background-color: white;
    width: 129px;
    height: 54px;
    text-align: center;
    font-family: fantasy;
    font-weight: bolder;
    line-height: 35px;
    cursor: pointer;
    
  }


    @media(max-width:992px){

   .cc .container .row>h6{

    transform: translate(610px, -118px);
    padding: 14px;
    background-color: white;
    width: 129px;
    height: 54px;
    text-align: center;
    font-family: fantasy;
    font-weight: bolder;
    line-height: 35px;
    cursor: pointer; 
    
      
      }

  }


  @media(max-width:768px){

    .cc .container .row>h6{

      position: absolute;
      left: -102px;
      top: 285px;
      padding: 2px;
      background-color: white;
      width: 134px;
      height: 38px;
      font-size: 14px;
      line-height: 36px;      } 
 }



   @media(max-width:576px){

      .cc .container .row>h6{

        position: absolute;
        left: -429px;
        top: 208px;
        padding: 2px;
        background-color: white;
        width: 57px;
        height: 26px;
        font-size: 11px;
        line-height: 26px;        } 
   }


  .cc .m span{

    color: #f00;
        
  }


  .cc .m span:first-of-type{
      
    position: absolute;
    top: -105px;
    left: 744px;  }


  @media(max-width:992px){


     .cc .m span:first-of-type{

      position: absolute;
      top: -108px;
      left: 335px;

         }

  }


  @media(max-width:768px){

    .cc .m span:first-of-type{

      position: absolute;
      top: 123px;
      left: -43px;
      font-size: 17px;    }
 }


   @media(max-width:576px){

      .cc .m span:first-of-type{

        position: absolute;
        top: 67px;
        left: -84px;          
      }
   }

  .cc .m span:nth-of-type(2){

       position: absolute;
       top: -106px;
       left: 499px;
  }


  @media(max-width:992px){

     .cc .m span:nth-of-type(2){
 
      position: absolute;
      top: -109px;
      left: 463px; 

         }

  }


  @media(max-width:768px){

    .cc .m span:nth-of-type(2){

      position: absolute;
      top: 122px;
      left: 105px;
      font-size: 17px;   } 

  }


   @media(max-width:576px){

     .cc .m span:nth-of-type(2){

      position: absolute;
      top: 68px;
      left: -12px;
    } 

   }

  .cc .m span:nth-of-type(3){

      position: absolute;
      left: 623px;
      top: -106px;
  }


  @media(max-width:992px){

     
      .cc .m span:nth-of-type(3){

    position: absolute;
    left: 582px;
    top: -107px;
       
            }    

  }


  @media(max-width:768px){

    .cc .m span:nth-of-type(3){

      position: absolute;
      left: 247px;
      top: 124px;
      font-size: 17px;    }
}



   @media(max-width:576px){

        .cc .m span:nth-of-type(3){

          position: absolute;
          left: 54px;
          top: 69px;    
        }
   }


  .cc .m span:last-of-type{

    position: absolute;
    top: -105px;
    left: 336px;
     }


  @media(max-width:992px){


    .cc .m span:last-of-type{

      position: absolute;
      left: 723px;
      top: -106px;
       
          }

  }


  @media(max-width:768px){

    .cc .m span:last-of-type{
 
      position: absolute;
      left: 410px;
      top: 125px;
      font-size: 17px;    }
      
   }
 

  @media(max-width:576px){

   .cc .m span:last-of-type{

    position: absolute;
    left: 135px;
    top: 70px;
   }
     
  }

/* end cc */


/*  strat d */

    .d .container .r {

        position: relative;
        cursor: pointer;
    }

    .d{

         position: relative;
         top:60px;
    }

    @media(max-width:992px){

      .d{

          display:none
      }

    }
  
    .d .r small{

        font-size: 13px;
    }

    .d  .r .one img{

      position: absolute;
      left: 1123px;
      top: -528px;
      width: 40px;
      height: 40px;
      margin: auto;
      background-size: cover;
      border-radius: 50%;
  }

  .d .r .one>small{
    position: absolute;
    left: 1016px;
    top: -515px;
  }
       

  .d  .r .tow img{

    position: absolute;
    left: 1127px;
    top: -465px;
    width: 32px;
    height: 32px;
    background-size: cover;
    border-radius: 50%;
    margin: auto;
}

.d .r .tow>small{
  position: absolute;
  left: 1016px;
  top: -458px;
}


.d  .r .three img{

  position: absolute;
  left: 1127px;
  top: -405px;
  width: 32px;
  height: 32px;
  background-size: cover;
  border-radius: 50%;
  margin: auto;
}

.d .r .three>small{
position: absolute;
left: 1025px;
top: -393px;
}


.d  .r .four img{

  position: absolute;
  left: 1127px;
  top: -341px;
  width: 32px;
  height: 32px;
  background-size: cover;
  border-radius: 50%;
  margin: auto;
}

.d .r .four>small{
position: absolute;
left: 1016px;
top: -332px;

}

.d  .r .fife img{

  position: absolute;
  left: 1127px;
  top: -276px;
  width: 32px;
  height: 32px;
  background-size: cover;
  border-radius: 50%;
  margin: auto;
}

.d .r .fife>small{
position: absolute;
left: 1010px;
top: -262px;
}



.d  .r .s img{

  position: absolute;
  left: 1127px;
  top: -212px;
  width: 32px;
  height: 32px;
  background-size: cover;
  border-radius: 50%;
  margin: auto;
}

.d .r .s>small{
position: absolute;
left: 1016px;
top: -206px;
}

.d  .r .sev img{

  position: absolute;
  left: 1127px;
  top: -150px;
  width: 32px;
  height: 32px;
  background-size: cover;
  border-radius: 50%;
  border: 1px solid#ccc;
  background-color: #ccccccb0;
  margin: auto;
}

.d .r .sev>small{
position: absolute;
left: 1016px;
top: -145px;
}



/*  end d */



/* hr left */
 
  .h{

      width: 244px;
      transform: translate(10px,-262px);
  }
 

  @media(max-width:768px){

      .h{

         display: none;
      }
  }

/* / hr  */

/* start rh */

.rh{

   width: 260px;
   transform: translate(995px,-66px);
}


@media(max-width:992px){
  
   .rh{
        
      display: none;
   }
}

/* end hr */


/* b */

 .name{

    position: relative;
 }

 
 .name .ddd{

  position: absolute;
  left: 287px;
  top: -284px;
  padding: 30px 10px;
  background-color: #fff;
  width: 683px;
  border-radius: 15px;  
  cursor: pointer;
}


@media(max-width:992px){

  .name .ddd{

  position: absolute;
  left: 287px;
  top: -274px;

     }

}


@media(max-width:768px){

  .name .ddd{

    position: absolute;
    top: -208px;
    padding: 20px 10px;
    width: 763px;
    border-radius: 0px;
    transform: translate(-285px, 304px);
      }

      .name .ddd .tt{

        transform: translate(0px, -4px);
      }

 }



 @media(max-width:576px){

  .name .ddd{

    position: absolute;
    top: -208px;
    padding: 20px 10px;
    width: 356px;
    border-radius: 0px;
    transform: translate(-286px, 294px);

      }

      .name .ddd .tt{

        transform: translate(0px, -4px);
      }

 }


 .name .ddd img{

    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-size: cover;
    border: 1px solid#fff;
    position: absolute;
    left: 627px;
    top: 28px;
 }


 @media(max-width:768px){

  .name .ddd img{

    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-size: cover;
    border: 1px solid#fff;
    position: absolute;
    left: 695px;
    top: 13px;
    }

}



 @media(max-width:576px){

   .name .ddd img{

    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-size: cover;
    border: 1px solid#fff;
    position: absolute;
    left: 302px;
    top: 18px;

     }

 }


 .name .ddd input{

    border-radius: 20px ;
    padding: 10px;
    background-color: #F0F2F5;
    width: 608px;
    border: 1px solid#ccc;
    outline: none;
    cursor: pointer;
}

.name .ddd>input::placeholder{

  transform: translateX(445px);
}


@media(max-width:768px){

  .name .ddd input{

    border-radius: 20px;
    padding: 10px;
    background-color: #F0F2F5;
    width: 672px;
    border: 1px solid#ccc;
    outline: none;
    cursor: pointer;
    transform: translate(5px, -2px);     }

     .name .ddd>input::placeholder{

      transform: translateX(470px);
     }
 
}


@media(max-width:576px){

  .name .ddd input{

  border-radius: 20px;
  padding: 10px;
  background-color: #F0F2F5;
  width: 288px;
  border: 1px solid#ccc;
  outline: none;
  cursor: pointer;
  transform: translate(-3px, 0px);

     }

     .name .ddd>input::placeholder{

      transform: translateX(120px);
     }
 
}

.name .ddd .imggg>img:first-of-type {

     width: 30px;
     height: 30px;
     background-size: cover;
     position: absolute;
     left: 579px;
     top: 95px;
     border-radius: 0;
}


@media(max-width:768px){

  .name .ddd .imggg>img:first-of-type{

    width: 50px;
    height: 28px;
    background-size: cover;
    position: absolute;
    left: 618px;
    top: 79px;
    border-radius: 0;
    }

}



@media(max-width:576px){

   .name .ddd .imggg>img:first-of-type{

    width: 25px;
    height: 27px;
    background-size: cover;
    position: absolute;
    left: 322px;
    top: 82px;
    border-radius: 0;

     }

}

.name .ddd .imggg>img:nth-of-type(2){

  position: absolute;
  left: 354px;
  top: 95px;
  width: 30px;
  height: 30px;
  border-radius: 0;

}


@media(max-width:768px){

  .name .ddd .imggg>img:nth-of-type(2){

    position: absolute;
    left: 393px;
    top: 79px;
    width: 50px;
    height: 26px;
    border-radius: 0;  
    }
  
}


@media(max-width:576px){

  .name .ddd .imggg>img:nth-of-type(2){

      position: absolute;
      left: 201px;
      top: 79px;
      width: 26px;
      height: 26px;
      border-radius: 0;  
  
    }
  
}


.name .ddd .imggg>img:last-of-type{

  position: absolute;
  left: 140px;
  top: 95px;
  width: 30px;
  height: 30px;
  border-radius: 0;

}

.name .ddd .imggg>span:first-of-type{

      position: absolute;
      top: 100px;
      left: 449px;
      font-size: small;
}    


@media(max-width:768px){

  .name .ddd .imggg>span:first-of-type{

    position: absolute;
    top: 80px;
    left: 488px;
    font-size: small;
    font-size: 15px;  
  }


}


@media(max-width:576px){

    .name .ddd .imggg>span:first-of-type{

      position: absolute;
      top: 85px;
      left: 232px;
      font-size: small;
      font-size: 12px;
    
    }


}

.name .ddd .imggg>span:nth-of-type(2){

  position: absolute;
  top: 100px;
  left:254px;
  font-size: small;
} 


@media(max-width:768px){

  .name .ddd .imggg>span:nth-of-type(2){
  
    position: absolute;
    top: 80px;
    left: 270px;
    font-size: 15px;  
     }
}


@media(max-width:576px){

  .name .ddd .imggg>span:nth-of-type(2){
  
    position: absolute;
    top: 84px;
    left: 121px;
    font-size: 12px;
  
     }
}

.name .ddd .imggg>span:last-of-type{

  position: absolute;
  top: 100px;
  left: 45px;
  font-size: small;
}    


@media(max-width:768px){

  .name .ddd .imggg>img:last-of-type{
  
    position: absolute;
    left: 203px;
    top: 79px;
    width: 40px;
    height: 30px;
    border-radius: 0;
       }
  }


@media(max-width:576px){

  .name .ddd .imggg>img:last-of-type{
  
        position: absolute;
        left: 87px;
        top: 80px;
        width: 27px;
        height: 27px;
        border-radius: 0;  

       }
  }


  @media(max-width:768px){

    .name .ddd .imggg>span:last-of-type{
    
      position: absolute;
      top: 82px;
      left: 76px;
      font-size: 15px;       }
  }
  

@media(max-width:576px){

  .name .ddd .imggg>span:last-of-type{
  
    position: absolute;
    top: 84px;
    left: 10px;
    font-size: 11px;  
     }
}

/* / b */


/* start u */

  .e{
      padding: 5px;
      background-color: #fff;
      position: relative;
      width: 683px;
      height: 75px;
      transform: translate(287px, -140px);    
      border-radius: 15px;
      cursor: pointer;
  }



  @media(max-width:992px){

    .e{

      padding: 5px;
      background-color: #fff;
      position: relative;
      width: 683px;
      height: 75px;
      transform: translate(287px, -132px);
      border-radius: 15px;
      cursor: pointer;    }

}


  @media(max-width:768px){

    .e{

      transform: translate(4px,216px);
      padding: 5px;
      background-color: #fff;
      position: relative;
      width: 759px;
      height: 60px;
      border-radius: 0px;
      cursor: pointer; 
    }

}



   @media(max-width:576px){

       .e{

          transform: translate(4px,204px);
          padding: 5px;
          background-color: #fff;
          position: relative;
          width: 353px;
          height: 60px;
          border-radius: 0px;
          cursor: pointer;
    
       }

   }


  .e>span{
    font-size: small;
    position: absolute;
    left: 534px;
    top: 19px;
    background-color: #ffff;
    border-radius: 15px;
    border: 1px solid#82D2FF;
    padding: 10px;
    width: 20%;
    outline: none;
  }


  @media(max-width:768px){

    .e>span{

      transform: translate(-9px, -10px);
      font-size: 12px;
      width: 200px;
      text-indent: 30px;    
            }
}


  @media(max-width:576px){

      .e>span{

        transform: translate(-291px, -7px);
        font-size: 10px;
        width: 110px;
        text-indent: -1px;

       }
  }

  .e>img{
    width: 30px;
    transform: translate(618px,21px);
    cursor: pointer;
  }
  

  @media(max-width:768px){

    .e>img{

      transform: translate(656px, 12px);
      width: 35px;    } 

 }


  @media(max-width:576px){

     .e>img{

      transform: translate(309px, 14px);
      width: 28px;     } 

  }


    .e  .ig .ig-1>img {
    width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 50%;
    transform: translate(8px, -10px);
    margin-left: 13px;
    }


    @media(max-width:768px){

      .e .ig .ig-1>img{
 
         display: none;
      }
 
     }
 


    @media(max-width:576px){

     .e .ig .ig-1>img{

        display: none;
     }

    }
      

    .e  .ig .ig-2>img  {
    width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 50%;
    transform: translate(65px, -50px);
    margin-left: 13px;
    }


    @media(max-width:768px){

      .e .ig .ig-2>img{
 
         display: none;
      }
 
     }


    @media(max-width:576px){

      .e .ig .ig-2>img{
 
         display: none;
      }
 
     }
 

    .e  .ig .ig-3>img  {
    width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 50%;
    transform: translate(122px, -88px);
    margin-left: 13px;
    }


    @media(max-width:768px){

      .e .ig .ig-3>img{
 
         display: none;
      }
 
     }


    @media(max-width:576px){

      .e .ig .ig-3>img{
 
         display: none;
      }
 
     }
 

    .e  .ig .ig-4>img  {
    width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 50%;
    transform: translate(182px, -129px);
    margin-left: 13px;
    }


    @media(max-width:768px){

      .e  .ig .ig-4>img  {
        width: 40px;
        height: 40px;
        background-size: cover;
        border-radius: 50%;
        transform: translate(-12px, -20px);
        margin-left: 20px;        }      
    }



    @media(max-width:576px){

      .e  .ig .ig-4>img  {
        width: 30px;
        height: 30px;
        background-size: cover;
        border-radius: 50%;
        transform: translate(-14px, -10px);
        margin-left: 13px;
        }      
    }


    .e  .ig .ig-5>img  {
    width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 50%;
    transform: translate(238px, -170px);
    margin-left: 13px;
    }


    @media(max-width:768px){

      .e  .ig .ig-5>img  {
        width: 40px;
        height: 40px;
        background-size: cover;
        border-radius: 50%;
        transform: translate(104px, -60px);
        margin-left: 13px;               }    

     }


     @media(max-width:576px){

      .e  .ig .ig-5>img  {
        width: 30px;
        height: 30px;
        background-size: cover;
        border-radius: 50%;
        transform: translate(27px, -41px);
        margin-left: 13px;
               }    

     }

    .e  .ig .ig-6>img  {
    width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 50%;
    transform: translate(293px, -208px);
    margin-left: 13px;
    }


    @media(max-width:768px){

      .e  .ig .ig-6>img  {
         
        width: 40px;
        height: 40px;
        background-size: cover;
        border-radius: 50%;
        transform: translate(94px, -98px);
        margin-left: 100px;      
      
      
              }

     } 


     @media(max-width:576px){

      .e  .ig .ig-6>img  {
         
        width: 30px;
        height: 30px;
        background-size: cover;
        border-radius: 50%;
        transform: translate(67px, -68px);
        margin-left: 13px;
         }

     } 


    .e  .ig .ig-7>img  {
    width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 50%;
    transform: translate(350px, -248px);
    margin-left: 13px;
    }


    @media(max-width:768px){

      .e  .ig .ig-7>img  {
        width: 40px;
        height: 40px;
        background-size: cover;
        border-radius: 50%;
        transform: translate(266px, -138px);
        margin-left: 13px;      
      
             }
        
    }



    @media(max-width:576px){

      .e  .ig .ig-7>img  {
        width: 30px;
        height: 30px;
        background-size: cover;
        border-radius: 50%;
        transform: translate(108px, -100px);
        margin-left: 13px;
               }
        
    }

    .e  .ig .ig-8>img  {
    width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 50%;
    transform: translate(401px, -289px);
    margin-left: 13px;
    }


    @media(max-width:768px){

      .e  .ig .ig-8>img  {
        width: 40px;
        height: 40px;
        background-size: cover;
        border-radius: 50%;
        transform: translate(147px, -177px);
        margin-left: 219px;                   }
    
    }



      @media(max-width:576px){

        .e  .ig .ig-8>img  {
          width: 30px;
          height: 30px;
          background-size: cover;
          border-radius: 50%;
          transform: translate(147px, -129px);
          margin-left: 13px;
                  }
      
      }

    .e  .ig .ig-9>img  {
    width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 50%;
    transform: translate(455px, -330px);
    margin-left: 13px;
    }


    @media(max-width:768px){

      .e  .ig .ig-9>img  {
        width: 40px;
        height: 40px;
        background-size: cover;
        border-radius: 50%;
        transform: translate(442px, -216px);
        margin-left: 13px;             
      
              }
    
     }


     @media(max-width:576px){

      .e  .ig .ig-9>img  {
        width: 30px;
        height: 30px;
        background-size: cover;
        border-radius: 50%;
        transform: translate(186px, -159px);
        margin-left: 13px;
               }
    
     }

    .e  .ig .ig-10>img  {
      width: 40px;
      height: 40px;
      transform: translate(43px,-370px);
      border-radius: 50%;
      border: 1px solid#ccc;          
      background-color: #fff;
    }
  

    @media(max-width:768px){

      .e .ig .ig-10>img{

        width: 32px;
        height: 32px;
        transform: translate(68px,-254px);
        border-radius: 50%;
        border: 1px solid#ccc;
        background-color: #fff; 
        } 
    }



     @media(max-width:576px){

       .e .ig .ig-10>img{

          width: 25px;
          height: 28px;
          transform: translate(20px,-189px);
          border-radius: 50%;
          border: 1px solid#ccc;
          background-color: #fff;
  
         } 
     }


      .e .ig .ig-1::after{

      content:'';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
      background-color: green;
      position: absolute;
      right: 646px;
      top: 47px;    
      } 


      @media(max-width:768px){

        .e .ig .ig-1::after{

           display: none;          
           
          } 
      
      }


      @media(max-width:576px){

        .e .ig .ig-1::after{

           display: none;          
           
          } 
      
      }

      .e .ig .ig-2::after{

      content:'';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
      background-color: green;
      position: absolute;
      right: 587px;
      top: 47px;    
      } 


      @media(max-width:768px){

        .e .ig .ig-2::after{

           display: none;          
           
          } 
      
      }


      @media(max-width:576px){

        .e .ig .ig-2::after{

           display: none;          
           
          } 
      
      }


      .e .ig .ig-3::after{

      content:'';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
      background-color: green;
      position: absolute;
      right:532px;
      top: 47px;    
      } 


      @media(max-width:768px){

        .e .ig .ig-3::after{

           display: none;          
           
          } 
      
      }


      @media(max-width:576px){

        .e .ig .ig-3::after{

           display: none;          
           
          } 
      
      }


      .e .ig .ig-4::after{

      content:'';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
      background-color: green;
      position: absolute;
      right: 470px;
      top: 47px;    
      } 


      @media(max-width:768px){

        .e .ig .ig-4::after{

          position: absolute;
          left: 9px;
          top: 33px;
          width: 12px;
          height: 12px;
          } 
      
      }


      @media(max-width:576px){

        .e .ig .ig-4::after{

          position: absolute;
          left: 3px;
          top: 36px;
          width: 12px;
          height: 12px;

          } 
      
      }



      .e .ig .ig-5::after{

      content:'';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
      background-color: green;
      position: absolute;
      right: 413px;
      top: 47px;    
      } 


      @media(max-width:768px){

        .e .ig .ig-5::after{

          position: absolute;
          left: 120px;
          top: 36px;
          width: 12px;
          height: 12px;
          } 
      
      }



      @media(max-width:576px){

        .e .ig .ig-5::after{

          position: absolute;
          left: 47px;
          top: 36px;
          width: 12px;
          height: 12px;    

          } 
      
      }


      .e .ig .ig-6::after{

      content:'';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
      background-color: green;
      position: absolute;
      right: 360px;
      top: 47px;    
      } 


      @media(max-width:768px){

        .e .ig .ig-6::after{

          position: absolute;
          left: 195px;
          top: 36px;
          width: 12px;
          height: 12px;          } 
      
      }


      @media(max-width:576px){

        .e .ig .ig-6::after{

          position: absolute;
          left: 83px;
          top: 36px;
          width: 12px;
          height: 12px;
          } 
      
      }



      .e .ig .ig-7::after{

      content:'';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
      background-color: green;
      position: absolute;
      right:300px;
      top: 47px;    
      } 


      @media(max-width:768px){

        .e .ig .ig-7::after{
          position: absolute;
          left: 281px;
          top: 34px;
          width: 12px;
          height: 12px;          } 
      
      }


      @media(max-width:576px){

        .e .ig .ig-7::after{
          position: absolute;
          left: 124px;
          top: 36px;
          width: 12px;
          height: 12px;
           
          } 
      
      }



      .e .ig .ig-8::after{

      content:'';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
      background-color: green;
      position: absolute;
      right: 250px;
      top: 47px;    
      } 


      @media(max-width:768px){

        .e .ig .ig-8::after{

          position: absolute;
          left: 366px;
          top: 36px;
          width: 12px;
          height: 12px;}
        
        }


      @media(max-width:576px){

        .e .ig .ig-8::after{

          position: absolute;
          left: 167px;
          top: 36px;
          width: 12px;
          height: 12px;
          } 
      
      }




      .e .ig .ig-9::after{

      content:'';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
      background-color: green;
      position: absolute;
      right: 198px;
      top: 47px;    
      } 

    
      @media(max-width:768px){

        .e .ig .ig-9::after{

          position: absolute;
          left: 456px;
          top: 38px;
          width: 12px;
          height: 12px;        
               } 
      
      }



      @media(max-width:576px){

        .e .ig .ig-9::after{

          position: absolute;
          left: 203px;
          top: 36px;
          width: 12px;
          height: 12px;
          } 
      
      }



/* / u */


/*  start q */

    .p{
      position: relative;
      position: absolute;
      left: -15px;
      top: 336px;
      cursor: pointer;
    }


    @media(max-width:992px){

      .p{

        position: absolute;
        top: 328px;

         }
      
    }


    @media(max-width:768px){

      .p{

            display:none
         }
      
    }
    

  .p  img{

      width: 20px;
      height: 16px;
      margin-left:30px;
  }



   .p span{

      margin-left: 53px;
      font-size: small;
   }

   .p i{

    transform: translateX(14px);

   }


/*  end q */


/* start y */
  

 .y .yyy img{
     
     width: 40px;
     height: 40px;
     background-size: cover;
     border-radius: 50%;
     display: block;
     transform: translate(114px,-313px);
     margin-top: 20px;
     cursor: pointer;
 }

 @media(max-width:768px){

    .y{ 
       display:none
     }
 }

 .y .yyy span{

  position: relative;
  top: -345px;
  left:0px;
  font-size: 15px;
  cursor: pointer;

}


.y .yyy  .inline1::after{
  
    content:'';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid white;
    background-color: green;
    position: absolute;
    right: 1071px;
    top: 408px;   
}

.y .yyy .inline2::after{
  
  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 495px;   
}

.y .yyy .inline3::after{
  
  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 578px;   
}


.y .yyy .inline4::after{
  
  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 660px;   
}

.y .yyy .inline5::after{
  
  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 747px;   
}


.y .yyy .inline6::after{
  
  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 830px;   
}


.y .yyy .inline7::after{
  
  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 915px;   
}

.y .yyy .inline8::after{
  
  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 998px;   
}



.y .yyy .inline9::after{
  
  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 1080px;   
}


.y .yyy .inline10::after{
  
  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 1164px;   
}


.y .yyy .inline11::after{
  
  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 1250px;   
}


.y .yyy .inline12::after{
  
  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 1333px;   
}


.y .yyy .inline13::after{

  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 1418px;   
}

.y .yyy .inline14::after{

  content:'';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: green;
  position: absolute;
  right: 1071px;
  top: 1503px;   
}



@media(max-width:992px){

  .y .yyy  .inline1::after{
  
    position: absolute;
    right: 833px;
    top: 395px;}

.y .yyy .inline2::after{
  
  position: absolute;
  top: 477px;
  right: 839px;}

.y .yyy .inline3::after{
  
  position: absolute;
  right: 836px;
  top: 564px;
}


.y .yyy .inline4::after{
  
  position: absolute;
  right: 838px;
  top: 643px;}

.y .yyy .inline5::after{
  
  position: absolute;
  right: 837px;
  top: 729px;}


.y .yyy .inline6::after{
  
  position: absolute;
  right: 839px;
  top: 811px;}


.y .yyy .inline7::after{
  
  position: absolute;
  right: 838px;
  top: 895px;}

.y .yyy .inline8::after{
  
  position: absolute;
  right: 839px;
  top: 979px;}



.y .yyy .inline9::after{
  
  position: absolute;
  right: 839px;
  top: 1060px;}


.y .yyy .inline10::after{
  
  position: absolute;
  right: 835px;
  top: 1151px;}

.y .yyy .inline11::after{
  
    position: absolute;
    right: 839px;
    top: 1233px;}


.y .yyy .inline12::after{
  
  position: absolute;
  right: 836px;
  top: 1319px;}


.y .yyy .inline13::after{

  position: absolute;
  right: 836px;
  top: 1404px;}

.y .yyy .inline14::after{

  position: absolute;
  right: 839px;
  top: 1488px;}

}


/* satart hr */
 .y .yyy .ry{
       
     width: 240px;
     transform: translate(-70px,-322px);
}

@media(max-width:992px){

  .y .yyy .ry{

    width: 269px;
    transform: translate(-26px,-322px);
     
  }
}


@media(max-width:768px){

    .y .yyy .ry{
       
     display:none
    }
}

/* end / hr */

/*  start yut */

.yut{

    position: relative;
}


.yut>img{

  width: 40px;

  height: 40px;
  
  border-radius: 50%;
  
  transform: translate(202px, -290px);
  
}


.yut>span{
  
  position: absolute;
  
  top: -280px;
    
  left: 56px;
    
  font-size: small;
    
}


.yut>small{

  position: absolute;

  left: 146px;
  
  top: -323px;

}
    

@media(max-width:768px){

    .yut{
        
       display: none;
    }
}

/* end yut */


/* start o */

.o .container .r {
  transform: translate(1px,-871px);
  position: relative;
  cursor: pointer;
}


.o{

     position: relative;
     top: 65px;
}

  @media(max-width:992px){

     .o{
         display:none
        }
  }
 
.o .r span{
  
  position: absolute;
  
  left: 1084px;
   
  top: -578px;
  
  font-size: medium;
    
}

.o .r small{

  font-size: 14px;
  text-transform: lowercase;
  
}

.o  .r .one img{

position: absolute;
left: 1115px;
top: -528px;
width: 40px;
height: 40px;
margin: auto;
background-size: cover;
border-radius: 50%;
}

.o .r .one>small{
position: absolute;
left: 1000px;
top: -515px;
}
 

.o  .r .tow img{

position: absolute;
left: 1115px;
top: -465px;
width: 32px;
height: 32px;
background-size: cover;
border-radius: 50%;
margin: auto;
}

.o .r .tow>small{
position: absolute;
left: 1000px;
top: -458px;
}


.o  .r .three img{

position: absolute;
left: 1115px;
top: -405px;
width: 32px;
height: 32px;
background-size: cover;
border-radius: 50%;
margin: auto;
}

.o .r .three>small{
position: absolute;
left: 1000px;
top: -393px;
}


.o  .r .four img{

position: absolute;
left: 1115px;
top: -341px;
width: 32px;
height: 32px;
background-size: cover;
border-radius: 50%;
margin: auto;
}

.o  .r .four>small{
position: absolute;
left: 1000px;
top: -332px;

}

.o  .r .fife img{

position: absolute;
left: 1115px;
top: -276px;
width: 32px;
height: 32px;
background-size: cover;
border-radius: 50%;
margin: auto;
}

.o .r .fife>small{
position: absolute;
left: 1000px;
top: -262px;
}



.o  .r .s img{

position: absolute;
left: 1115px;
top: -212px;
width: 32px;
height: 32px;
background-size: cover;
border-radius: 50%;
margin: auto;
}

.o .r .s>small{
position: absolute;
left: 1000px;
top: -206px;
}

.o  .r .sev img{

position: absolute;
left: 1115px;
top: -150px;
width: 32px;
height: 32px;
background-size: cover;
border-radius: 50%;
border: 1px solid#ccc;
background-color: #ccccccb0;
margin: auto;
}

.o .r .sev>small{
position: absolute;
left: 1000px;
top: -145px;
}



/* end o */

/* start z */

.z{
    
  padding: 20px;
    
  margin: 20px;
      
  background-color: #fff;
      
  width: 676px;
      
  position: relative;
      
  position: absolute;
      
  top: 535px;
      
  left: 267px;
      
  border-radius:15px;
      
  height: 660px;
  cursor: pointer;
}


@media(max-width:992px){

  .z{

    padding: 20px;
    margin: 20px;
    background-color: #fff;
    width: 676px;
    position: relative;
    position: absolute;
    top: 519px;
    left: 267px;
    border-radius: 15px;
    height: 660px;
    cursor: pointer;

        }
}


@media(max-width:768px){

  .z{
    padding: 20px;
    background-color: #fff;
    width: 751px;
    height: 637px;
    transform: translate(-279px, -99px);
    cursor: pointer;
    position: relative;

        }
}


 @media(max-width:576px){

     .z{
      padding: 20px;
      background-color: #fff;
      width: 354px;
      height: 637px;
      transform: translate(-284px, -193px);
      cursor: pointer;
      position: relative;  
           }
 }


.zz{
   
   transform: translate(-17px, 560px);
    width: 640px ;
}

@media(max-width:768px){

  .zz{

    transform: translate(-16px, 538px);
    width: 705px;  }
}


@media(max-width:576px){

   .zz{

    transform: translate(-16px, 538px);
    width: 334px;
   }
}

.z img{

  width: 30px;
  height: 30px;
}

.z img:first-of-type{

position: absolute;

top: 27px;

left: 25px;

width: 25px;

height: 10px;
 }


 @media(max-width:768px){


  .z img:first-of-type{

   position: absolute;
   top: 20px;
   left: 25px;
   width: 20px;
   height: 10px;
  }

}


 @media(max-width:576px){


     .z img:first-of-type{

      position: absolute;
      top: 20px;
      left: 25px;
      width: 20px;
      height: 10px;
     }

 }

.z img:nth-child(2){

  position: absolute;

  top: 11px;
  
  left: 623px;
  
  z-index: 1;
  
  border-radius: 50%;
  
  width: 35px;
  
  height: 35px;
}


@media(max-width:768px){

  .z img:nth-child(2){

    position: absolute;
    top: 9px;
    left: 503px;
    z-index: 1;
    border-radius: 50%;
    left: 700px;
    height: 35px;
  
        }

}


@media(max-width:576px){

   .z img:nth-child(2){

    position: absolute;
    top: 8px;
    left: 503px;
    z-index: 1;
    border-radius: 50%;
    left: 304px;
    height: 35px;
   }

}

.z img:nth-of-type(3){

position: absolute;

top: 42px;

left: 565px;

z-index: 1;

width: 15px;

height: 15px;
 }


 @media(max-width:768px){

  .z img:nth-of-type(3){
     
    position: absolute;
    top: 32px;
    left: 634px;
    z-index: 1;
    width: 12px;
    height: 12px;     }

 }


 @media(max-width:576px){

  .z img:nth-of-type(3){
     
    position: absolute;
    top: 32px;
    left: 250px;
    z-index: 1;
    width: 12px;
    height: 12px;
     }

 }


.z img:nth-of-type(4){

width: 674px;

height: 502px;
  
position: absolute;

left: 0px;

top: 70px;

}


@media(max-width:768px){

  .z img:nth-of-type(4){
    width: 730px;
    height: 502px;
    position: absolute;
    left: 4px;
    top: 46px;
    background-size: cover;     
  }
}


@media(max-width:576px){

    .z img:nth-of-type(4){
      width: 350px;
      height: 502px;
      position: absolute;
      left: 4px;
      top: 46px;
      background-size: cover;
       
    }
}


.z img:nth-of-type(5){

position: absolute;

top: 617px;

left: 342px;

z-index: 1;
}


@media(max-width:768px){

  .z img:nth-of-type(5){

    position: absolute;
    top: 594px;
    left: 411px;
    z-index: 1;
       }
}


@media(max-width:576px){

  .z img:nth-of-type(5){

  position: absolute;
  top: 594px;
  left: 196px;
  z-index: 1;}
}

.z img:nth-of-type(6){

position: absolute;

top: 617px;

left: 130px;

z-index: 1;
}


@media(max-width:768px){

  .z img:nth-of-type(6) {

    position: absolute;
    top: 588px;
    left: 171px;
    z-index: 1;  }

}


@media(max-width:576px){

  .z img:nth-of-type(6) {

    position: absolute;
    top: 588px;
    left: 93px;
    z-index: 1;
  }

}

.z img:last-of-type{

position: absolute;

top: 610px;

left: 580px;

z-index: 1;

}


@media(max-width:768px){

  .z img:last-of-type{

    position: absolute;
    top: 588px;
    z-index: 1;
    left: 665px;
    width: 35px;
    height: 35px;  }
}


@media(max-width:576px){

   .z img:last-of-type{

    position: absolute;
    top: 588px;
    right: -22px;
    left: 681px;
    left: -36px;
    z-index: 1;
    left: 312px;
   }
}


.z small{

z-index: 1;
font-size: 14px;

}

.z small:first-of-type{

position: absolute;

top: 11px;

left: 535px;

}

@media(max-width:768px){

  .z small:first-of-type{

    position: absolute;
    top: 8px;
    left: 609px;
  
         }
}


@media(max-width:576px){

   .z small:first-of-type{

    position: absolute;
    top: 8px;
    left: 220px;
   }
}

.z small:nth-of-type(2){

position: absolute;
top: 617px;
left: 515px;

}

@media(max-width:768px){

  .z small:nth-of-type(2){

    position: absolute;
    top: 596px;
    left: 574px;
    font-size: 15px;
  
          }

}


@media(max-width:576px){

  .z small:nth-of-type(2){

    position: absolute;
    top: 596px;
    left: 254px;
  }

}


.z small:nth-of-type(3){

position: absolute;
top: 617px;
left: 282px;


}


@media(max-width:768px){

  .z small:nth-of-type(3){
 
    position: absolute;
    top: 597px;
    left: 312px;
    font-size: 15px;
  
        }
 
 }
 

@media(max-width:576px){

 .z small:nth-of-type(3){

  position: absolute;
  top: 594px;
  left: 140px;
 }

}


.z small:last-of-type{

position: absolute;
top: 617px;
left: 58px;

}


@media(max-width:768px){

  .z small:last-of-type{

    position: absolute;
    top: 592px;
    left: 53px;
  
        }

}


@media(max-width:576px){

  .z small:last-of-type{

    position: absolute;
    top: 592px;
    left: 26px;
  }

}


.z samp{

 position: absolute;
 top: 36px;
 left: 585px;
 z-index: 1;
 
}

@media(max-width:768px){

  .z samp{

    position: absolute;
    top: 25px;
    left: 656px;
    z-index: 1;  }
}



@media(max-width:576px){

   .z samp{

    position: absolute;
    top: 24px;
    left: 272px;
    z-index: 1;
   }
}

/* end z */



/* start q */

.q{

  padding: 20px;

  background-color: #fff;

  width: 670px;

  height: 432px;

  transform: translate(290px, -690px);

  cursor: pointer;

  position: relative;

  }



  @media(max-width:992px){

    .q{

    padding: 20px;
    background-color: #fff;
    width: 670px;
    height: 432px;
    transform: translate(290px, -697px);
    cursor: pointer;
    position: relative;
  
        }
   }


   @media(max-width:768px){

    .q{

      padding: 20px;
      background-color: #fff;
      width: 748px;
      height: 368px;
      transform: translate(9px, 410px);
      cursor: pointer;
      position: relative;      
       }
   }


   @media(max-width:576px){

    .q{

      padding: 20px;
      background-color: #fff;
      width: 356px;
      height: 368px;
      transform: translate(4px, 313px);
      cursor: pointer;
      position: relative; 
      
       }
   }

  /* one  */


.q .one img:first-of-type{

  position: absolute;

  left: 31px;

  top: 25px;

  width: 25px;
  } 


  @media(max-width:768px){

    .q .one img:first-of-type{
 
      position: absolute;
      left: 28px;
      top: 20px;
      width: 20px;
      height: 10px;
    }

  }


  @media(max-width:576px){

    .q .one img:first-of-type{
 
      position: absolute;
      left: 28px;
      top: 20px;
      width: 20px;
      height: 10px;
    }

  }


.q .one img:nth-of-type(2){

width: 30px;

border-radius: 50px;

border: 1px solid;

padding: 3px;

color: #ccc;

position: absolute;

top: 62px;

left: 68px;

z-index: 1;

}

@media(max-width:768px) {
  
  .q .one img:nth-of-type(2){

    width: 25px;
    border-radius: 50px;
    border: 1px solid;
    padding: 3px;
    color: #ccc;
    position: absolute;
    left: 27px;
    z-index: 1;
    top: 64px;  }

}


@media(max-width:576px) {
  
  .q .one img:nth-of-type(2){

    width: 25px;
    border-radius: 50px;
    border: 1px solid;
    padding: 3px;
    color: #ccc;
    position: absolute;
    left: 11px;
    z-index: 1;
    top: 64px;
  }

}


.q .one img:last-of-type{

width: 180px;

height: 205px;

position: absolute;

top: 52px;

left: 49px;

}

@media(max-width:768px){

   .q .one img:last-of-type{

    width: 169px;
    height: 184px;
    position: absolute;
    top: 51px;
    left: 17px;   }

}


@media(max-width:576px){

   .q .one img:last-of-type{

    width: 110px;
    height: 170px;
    position: absolute;
    top: 55px;
    left: 3px;
   }

}

.q .one small:first-of-type{

  position: relative;

  left: 494px;
  top: -3;

  }

  @media(max-width:768px){
 
     .q .one small:first-of-type{

      position: relative;
      left: 560px;
      top: -9px;
    
            }

  }


  @media(max-width:576px){
 
     .q .one small:first-of-type{

      position: relative;
      left: 181px;
      top: -9px;
     }

  }


.q .one button:first-of-type{

padding:5px ;

z-index: 2;
position: absolute;
top: 330px;
left: 72px ;
width: 115px;

}

@media(max-width:768px){

  .q .one button:first-of-type{

    position: absolute;
    left: 48px;
    top: 283px;
    padding: 6px;
    width: 100px;
    z-index: 2;
    font-size: 12px;  
  
         }   
}



@media(max-width:576px){

  .q .one button:first-of-type{

    position: absolute;
    left: 16px;
    top: 296px;
    padding: 2px;
    width: 84px;
    z-index: 2;
    font-size: 12px;}   
}

.q .one button:last-of-type{

  position: absolute;

  left: 6px;

  top: 383px;

  width: 644px;

  margin: 0 10px;

  color: #00f;

  outline: none;

  border: 1px solid#fff;

  font-weight: bolder;

  transition: all  1s ease-in-out;

  background-color: #fff;

  }


   @media(max-width:768px){

     .q .one button:last-of-type{

      position: absolute;
      left: -5px;
      top: 330px;
      width: 739px;
      margin: 0 10px;
      color: #00f;
      outline: none;
      border: 1px solid#fff;
      font-weight: bolder;
      background-color: #fff;     }

   }


   @media(max-width:576px){

     .q .one button:last-of-type{

      position: absolute;
      left: -11px;
      top: 330px;
      width: 355px;
      margin: 0 10px;
      color: #00f;
      outline: none;
      border: 1px solid#fff;
      font-weight: bolder;
      transition: all  1s ease-in-out;
      background-color: #fff;
     }

   }

.q .one button:last-of-type:hover{

  outline: none;
  background-color: #F0F2F5;
  border: none;
  }

.q .one button:last-of-type:active{

  outline: none;
  border: none;
  background-color: blue;
  color: #fff;
  }



.q  .one span{

position: absolute;

top: 270px;

left: 100px;

}


@media(max-width:768px){

   .q .one span{
    position: absolute;
    top: 239px;
    left: 63px;   }
}


@media(max-width:576px){

   .q .one span{
    position: absolute;
    top: 238px;
    left: 26px;
     
   }
}

.q .one p{

position: relative;

top: 254px;

left: 41px;

color: crimson;

font-size: small;

}


@media(max-width:768px){
   
   .q .one p{

    position: relative;
    top: 217px;
    left: 12px;
    color: crimson;
    font-size: small;
    font-size: 11px;  
      }

}



@media(max-width:576px){
   
   .q .one p{

    position: relative;
    top: 222px;
    left: -26px;
    color: crimson;
    font-size: small;
    font-size: 11px;
   }

}


  /* /  one */


  /* tow */


.q .tow img:first-of-type{

width: 30px;

border-radius: 50px;

border: 1px solid;

padding: 3px;

color: #ccc;

position: absolute;

top: -13px;

left: 237px;

z-index: 1;

}


@media(max-width:768px){
 
   .q .tow img:first-of-type{

    width: 25px;
    border-radius: 50px;
    border: 1px solid;
    padding: 3px;
    color: #ccc;
    position: absolute;
    top: -16px;
    left: 267px;
    z-index: 1;      
   }

}


@media(max-width:576px){
 
   .q .tow img:first-of-type{

    width: 25px;
    border-radius: 50px;
    border: 1px solid;
    padding: 3px;
    color: #ccc;
    position: absolute;
    top: -16px;
    left: 99px;
    z-index: 1;
      
   }

}

.q .tow img:last-of-type{

width: 180px;

height: 205px;

position: absolute;

top: -27px;

left: 219px;

}


@media(max-width:768px){

   .q .tow img:last-of-type{

    width: 169px;
    height: 184px;
    position: absolute;
    top: -27px;
    left: 249px;   }
}


@media(max-width:576px){

   .q .tow img:last-of-type{

    width: 110px;
    height: 170px;
    position: absolute;
    top: -27px;
    left: 85px;
   }
}


.q .tow button{

position: absolute;

left: 255px;

top: 253px;

padding: 5px;

width: 115px;

z-index: 2;

}


@media(max-width:768px){

  .q .tow button{

    position: absolute;
    left: 279px;
    top: 200px;
    padding: 6px;
    width: 100px;
    z-index: 2;
    font-size: 12px;     
  }

}



@media(max-width:576px){

  .q .tow button{

    position: absolute;
    left: 95px;
    top: 218px;
    padding: 2px;
    width: 84px;
    z-index: 2;
    font-size: 12px;
     
  }

}

.q .tow span{

position: absolute;

top: 189px;

left: 279px;

}


@media(max-width:768px){

  .q .tow span{

    position: absolute;
    top: 169px;
    left: 297px;  }

}


@media(max-width:576px){

  .q .tow span{

    position: absolute;
    top: 161px;
    left: 106px;
  }

}


  /* / tow */



  /* three */


.q .three img:first-of-type{

width: 30px;

border-radius: 50px;

border: 1px solid;

padding: 3px;

color: #ccc;

position: absolute;

top: -12px;

left: 447px;

z-index: 1;

}

@media(max-width:768px){

  .q .three img:first-of-type{

    width: 25px;
    border-radius: 50px;
    border: 1px solid;
    padding: 3px;
    color: #ccc;
    position: absolute;
    top: -18px;
    left: 535px;
    z-index: 1;  }

}



@media(max-width:576px){

  .q .three img:first-of-type{

    width: 25px;
    border-radius: 50px;
    border: 1px solid;
    padding: 3px;
    color: #ccc;
    position: absolute;
    top: -18px;
    left: 214px;
    z-index: 1;
  }

}

.q .three img:last-of-type{

width: 180px;

height: 205px;

position: absolute;

top: -27px;

left: 431px;

}


@media(max-width:768px){

  .q .three img:last-of-type{

    width: 170px;
    height: 184px;
    position: absolute;
    top: -27px;
    left: 521px;  }

}


@media(max-width:576px){

  .q .three img:last-of-type{

    width: 110px;
    height: 170px;
    position: absolute;
    top: -27px;
    left: 203px;
  }

}


.q .three button{

position: absolute;

left: 464px;

top: 252px;

padding: 5px;

width: 115px;

z-index: 2;

}


@media(max-width:768px){

 .q .three button{

  position: absolute;
  left: 557px;
  top: 199px;
  padding: 5px;
  width: 100px;
  z-index: 2;
  font-size: 12px; }

}



@media(max-width:576px){

 .q .three button{

  position: absolute;
  left: 210px;
  top: 218px;
  padding: 2px;
  width: 84px;
  z-index: 2;
  font-size: 12px;
 }

}

.q .three span{

position: absolute;

top: 194px;

left: 491px;

}

@media(max-width:768px){

  .q .three span{

    position: absolute;
    top: 166px;
    left: 579px;  }

}


@media(max-width:576px){

  .q .three span{

    position: absolute;
    top: 158px;
    left: 228px;
  }

}

  /* / three */




  /* e img */

  .q .e{

width: 45px;

height: 45px;

transform: translate(-9px,49px);

border-radius: 50%;

border: 1px solid#ccc;

background-color: #fff;

}


@media(max-width:768px){

  .q .e{

    width: 33px;
    height: 38px;
    transform: translate(-29px,40px);
    border-radius: 50%;
    border: 1px solid#ccc;
    background-color: #fff;  }

}



@media(max-width:576px){

  .q .e{

    width: 30px;
    height: 35px;
    transform: translate(-39px,40px);
    border-radius: 50%;
    border: 1px solid#ccc;
    background-color: #fff;
  }

}

/* img e */

/* end q */



/* strat yi */

.yi{

padding: 20px;
    
margin: 20px;
    
background-color: #fff;
    
width: 676px;
    
position: relative;
    
position: absolute;
    
top: 1670px;
    
left: 267px;
    
border-radius:15px;
    
height: 625px;
    
cursor: pointer;

  }
  

  @media(max-width:992px){

    .yi{

      position: absolute;
      top: 1637px;

                  }

  }



  @media(max-width:768px){

    .yi{

      padding: 20px;
      margin: 20px;
      background-color: #fff;
      width: 757px;
      position: relative;
      position: absolute;
      top: 1505px;
      left: -15px;
      border-radius: 15px;
      height: 471px;
      cursor: pointer;    

                  }

  }



  @media(max-width:576px){

    .yi{

      padding: 20px;
      margin: 20px;
      background-color: #fff;
      width: 350px;
      position: relative;
      position: absolute;
      top: 1407px;
      left: -15px;
      border-radius: 15px;
      height: 471px;
      cursor: pointer;
    }

  }
    

  /* yy hr */
  
  .yy{
     
    transform: translate(-17px, 88px);
    width: 640px;
  }
  

   @media(max-width:768px){

      .yy{

        transform: translate(-28px, 375px);
        width: 738px;
      
                }
   }



   @media(max-width:576px){

      .yy{

        transform: translate(-28px, 375px);
        width: 342px;
      }
   }

  /* yy end */
  
  .yi img{
  
    width: 30px;
    height: 30px;
  }


    @media(max-width:768px){

     .yi img{

        width: 25px;
        height: 25px;
     }
  }


  @media(max-width:576px){

     .yi img{

        width: 25px;
        height: 25px;
     }
  }
  
  .yi img:first-of-type{
  
  position: absolute;
  
  top: 27px;
  
  left: 25px;
  
  width: 25px;
  
  height: 10px;
   }
  

   @media(max-width:768px){

     .yi img:first-of-type{

      position: absolute;
      top: 27px;
      left: 25px;
      width: 20px;
      height: 10px;
     }

   }
     


   @media(max-width:576px){

     .yi img:first-of-type{

      position: absolute;
      top: 27px;
      left: 25px;
      width: 20px;
      height: 10px;
     }

   }
     

  .yi img:nth-child(2){
  
    position: absolute;
  
    top: 11px;
    
    left: 623px;
    
    z-index: 1;
    
    border-radius: 50%;
    
    width: 35px;
    
    height: 35px;
  }
  

  @media(max-width:768px){
    
    .yi img:nth-child(2){

      position: absolute;
      top: 7px;
      left: 705px;
      z-index: 1;
      border-radius: 50%;
      width: 30px;
      height: 30px;    }

  }



  @media(max-width:576px){
    
    .yi img:nth-child(2){

      position: absolute;
      top: 7px;
      left: 313px;
      z-index: 1;
      border-radius: 50%;
      width: 30px;
      height: 30px;
    }

  }
  
  .yi img:nth-of-type(3){
  
  position: absolute;
  
  top: 42px;
  
  left: 565px;
  
  z-index: 1;
  
  width: 15px;
  
  height: 15px;
   }
  

   @media(max-width:768px){

    .yi img:nth-of-type(3){
      position: absolute;
      top: 26px;
      left: 644px;
      z-index: 1;
      width: 12px;
      height: 12px;
    }

   }



   @media(max-width:576px){

    .yi img:nth-of-type(3){
      position: absolute;
      top: 26px;
      left: 265px;
      z-index: 1;
      width: 12px;
      height: 12px;

    }

   }

  
  .yi img:nth-of-type(4){
  
position: absolute;
  
top: 585px;
  
left: 342px;
  
z-index: 1;
  }


  @media(max-width:768px){
  
     .yi img:nth-of-type(4){

      position: absolute;
      top: 430px;
      left: 392px;
      z-index: 1;       
     }

  }


  @media(max-width:576px){
  
     .yi img:nth-of-type(4){

      position: absolute;
      top: 430px;
      left: 205px;
      z-index: 1;
       
     }

  }
  
  .yi video{
  
    width: 600px;
    height: 432px;
    position: relative;
    top: 91px;
    left: -1px;
  
  }

   @media(max-width:768px){

    .yi video{

    width: 741px;
    height: 345px;
    position: absolute;
    left: 7px;
    top: 51px;    
  
  
            }
   }


  
   @media(max-width:576px){

    .yi video{

      width: 350px;
      height: 398px;
      position: absolute;
      left: 1px;
      top: -1px;        }
   }
   

  .yi p{

    position: absolute;
    left: 280px;
     top: 73px;
  }
  

   @media(max-width:768px){

     .yi p{

      position: absolute;
      left: 343px;
      top: 23px;
      font-size: 13px;
    
          }

   }


   @media(max-width:576px){

     .yi p{

      position: absolute;
      left: 130px;
      top: 39px;
      font-size: 13px;     }

   }

  .yi img:nth-of-type(5){
  
      position: absolute;
        
      top: 582px;
        
      left: 130px;
        
      z-index: 1;
        }


  @media(max-width:768px){

    .yi img:nth-of-type(5){

      position: absolute;
      top: 425px;
      left: 147px;
      left: 155px;    }
     
  }


  @media(max-width:576px){

    .yi img:nth-of-type(5){

      position: absolute;
      top: 425px;
      left: 96px;
      z-index: 1;
    }
     
  }
  
  .yi img:last-of-type{
  
    position: absolute;
    top: 582px;
    left: 586px;
    z-index: 1;  }
  

     @media(max-width:768px){

    .yi img:last-of-type{
  
      position: absolute;
      top: 424px;
      left: 655px;
      z-index: 1;
      font-size: 15ox;
      width: 30px;
      height: 29px;    
             }
      
   }

  
   @media(max-width:576px){

    .yi img:last-of-type{
  
      position: absolute;
      top: 424px;
      left: 317px;
      z-index: 1;  }
      
   }

  
  .yi small{
  
  z-index: 1;
  font-size: 14px;
  
  }
  
   @media(max-width:768px){

    .yi small{
  
      z-index: 1;
      font-size: 12px;
      
      }
    
   }


   @media(max-width:576px){

    .yi small{
  
      z-index: 1;
      font-size: 12px;
      
      }
    
   }

  .yi small:first-of-type{
  
  position: absolute;
  
  top: 11px;
  
  left: 535px;
  
  }

    @media(max-width:768px){

    .yi small:first-of-type{

      position: absolute;
      top: 5px;
      left: 627px;    }
  }


  @media(max-width:576px){

    .yi small:first-of-type{

      position: absolute;
      top: 5px;
      left: 231px;
    }
  }
  
  .yi small:nth-of-type(2){
  
    position: absolute;
      
    top: 586px;
      
    left: 511px;
  }
  

  @media(max-width:768px){
  
    .yi small:nth-of-type(2){

      position: absolute;
      top: 431px;
      left: 566px;
      font-size: 14px;    } 

  }
  

  @media(max-width:576px){
  
    .yi small:nth-of-type(2){

      position: absolute;
      top: 431px;
      left: 260px;
    } 

  }
  
  .yi small:nth-of-type(3){
  
    position: absolute;
      
    top: 585px;
      
    left: 282px;
  }
  

  @media(max-width:768px){

   .yi small:nth-of-type(3){

    position: absolute;
    top: 430px;
    left: 293px;
    font-size: 14px;
   }

  }


  @media(max-width:576px){

   .yi small:nth-of-type(3){

    position: absolute;
    top: 430px;
    left: 155px;

   }

  }
  
  .yi small:last-of-type{
  
        position: absolute;
          
        top: 585px;
          
        left: 58px;
          }
  

    @media(max-width:768px){

    .yi small:last-of-type{

      position: absolute;
      top: 427px;
      left: 57px;
      font-size: 14px;   
       
             }
     
  }


  @media(max-width:576px){

    .yi small:last-of-type{

      position: absolute;
      top: 427px;
      left: 25px;
    }
     
  }
  
  
  .yi samp{
  
   position: absolute;
   top: 36px;
   left: 585px;
   z-index: 1;
   
  }

    @media(max-width:768px){

      .yi samp{

        position: absolute;
        top: 19px;
        left: 663px;
        z-index: 1;
      
            }

        }

  
  @media(max-width:576px){

.yi samp{

  position: absolute;
  top: 19px;
  left: 286px;
  z-index: 1;
}

  }
  
  /* / yi */


    /* start k */


    .k{
    
      padding: 20px;
      
      margin: 20px;
          
      background-color: #fff;
          
      width: 673px;
          
      position: relative;
          
      position: absolute;
          
      top: 2312px;
          
      left: 267px;
          
      border-radius:15px;
          
      height: 285px;
          
      cursor: pointer;
    }


    @media(max-width:992px){

      .k{
 
       position: absolute;
       top: 2275px;
          
              }
 
        }  

    @media(max-width:768px){

     .k{

      padding: 20px;
      margin: 20px;
      background-color: #fff;
      width: 758px;
      position: relative;
      position: absolute;
      top: 1987px;
      left: -15px;
      border-radius: 15px;
      height: 252px;
      cursor: pointer;    
         }

    }
   

    @media(max-width:576px){

     .k{

      padding: 20px;
      margin: 20px;
      background-color: #fff;
      width: 353px;
      position: relative;
      position: absolute;
      top: 1886px;
      left: -15px;
      border-radius: 15px;
      height: 250px;
      cursor: pointer;
     }

    }
   
  
    .k p:first-of-type{
  
      position: absolute;
  
      top: 76px;
  
      left: 472px;
  
  }


  @media(max-width:768px){
  
    .k p:first-of-type{

      position: absolute;
      top: 59px;
      left: 361px;
      font-size: large;
      font-size: 20px;    
    
         } 

  }



  @media(max-width:576px){
  
    .k p:first-of-type{

      position: absolute;
      top: 62px;
      left: 159px; 
      font-size: inherit; 
      font-size: 15px;
    
    } 

  }

  
  .k p:last-of-type{
  
    position: absolute;
    top: 78px;
    left: 355px;
  
  }


  @media(max-width:768px){
  
    .k p:last-of-type{
      position: absolute;
      top: 65px;
      left: 255px;      }
     
  }


  @media(max-width:576px){
  
    .k p:last-of-type{
      position: absolute;
      top: 63px;
      left: 70px;
     
      }
     
  }
  
  /* hr one */
  
    .kk{
       
  transform: translate(-17px, 112px);
       
  width: 640px;
    }
  

    @media(max-width:768px){
  
      .kk{

        transform: translate(-17px, 89px);
        width: 714px;      } 

    }


    @media(max-width:576px){
  
      .kk{

        transform: translate(-17px, 89px);
        width: 330px;
      } 

    }

    /* one hr end */
  
  /* hr two */
  
    .xx{
  
       position: absolute;
       top: 193px;
       left: 18px;     
       width: 640px;
      
    }

    @media(max-width:768px){

      .xx{
        position: absolute;
        top: 162px;
        left: 18px;
        width: 720px;       }
    }


    @media(max-width:576px){

      .xx{
      position: absolute;
      top: 162px;
      left: 18px;
      width: 327px;
       }
    }
  
    /* hr two end */
  
  
  .k img{
  
      width: 30px;
      height: 30px;
  }


    @media(max-width:768px){

     .k img{
    
       width: 25px;
       height: 25px;
        
     }
  }


  @media(max-width:576px){

     .k img{
    
       width: 25px;
       height: 25px;
        
     }
  }
  
  .k img:first-of-type{
  
    position: absolute;
  
    top: 27px;
    
    left: 25px;
    
    width: 20px;
    
    height: 7px;
     }
  
  .k img:nth-child(2){
  
      position: absolute;
  
      top: 11px;
      
      left: 623px;
      
      z-index: 1;
      
      border-radius: 50%;
      
      width: 35px;
      
      height: 35px;
   }
  

     @media(max-width:768px){
  
     .k img:nth-child(2){

      position: absolute;
      top: 11px;
      left: 704px;
      z-index: 1;
      border-radius: 50%;
      width: 32px;
      height: 32px;  
           }

   }


   @media(max-width:576px){
  
     .k img:nth-child(2){

      position: absolute;
      top: 11px;
      left: 310px;
      z-index: 1;
      border-radius: 50%;
      width: 32px;
      height: 32px;
     }

   }

  
  .k img:nth-of-type(3){
  
    position: absolute;
  
    top: 42px;
    
    left: 565px;
    
    z-index: 1;
    
    width: 15px;
    
    height: 15px;
     }


     @media(max-width:768px){

       .k img:nth-of-type(3){

        position: absolute;
        top: 33px;
        left: 643px;
        z-index: 1;
        width: 12px;
        height: 12px;       }

     }
  


     @media(max-width:576px){

       .k img:nth-of-type(3){

        position: absolute;
        top: 32px;
        left: 265px;
        z-index: 1;
        width: 12px;
        height: 12px;
       }

     }
  
  
  .k img:nth-of-type(4){
  
  position: absolute;
  
  top: 167px;
  
  left: 342px;
  
  z-index: 1;
  }


  @media(max-width:768px){

    .k img:nth-of-type(4){

      position: absolute;
      top: 143px;
      left: 389px;
      z-index: 1;    }

  }
  

  @media(max-width:576px){

    .k img:nth-of-type(4){

      position: absolute;
      top: 143px;
      left: 203px;
      z-index: 1;
    }

  }
  
  
  .k img:nth-of-type(5){
  
  position: absolute;
  
  top: 162px;
  
  left: 130px;
  
  z-index: 1;
  }

  @media(max-width:768px){

     .k img:nth-of-type(5){

      position: absolute;
      top: 140px;
      left: 161px;
      z-index: 1;    
          }
  }



  @media(max-width:576px){

     .k img:nth-of-type(5){

      position: absolute;
      top: 140px;
      left: 101px;
      z-index: 1;     
      }
  }
  
  .k img:last-of-type{
  
  position: absolute;
  
  top: 162px;
  
  left: 580px;
  
  z-index: 1;
  }

    @media(max-width:768px){

     .k img:last-of-type{

      position: absolute;
      top: 137px;
      left: 580px;
      z-index: 1;     }
  }


  
  @media(max-width:576px){

     .k img:last-of-type{

      position: absolute;
      top: 137px;
      left: 273px;
      z-index: 1;
     }
  }

  
  .k img:nth-of-type(6){
  
   position: absolute;
  
  top: 162px;
  
  left: 580px;
  
  z-index: 1;
  
  }


  @media(max-width:768px){

     .k img:nth-of-type(6){

      position: absolute;
      top: 139px;
      left: 642px;
      width: 28px;
      z-index: 1;      
       }
    }


  @media(max-width:576px){

     .k img:nth-of-type(6){

      position: absolute;
      top: 139px;
      left: 306px;
      z-index: 1;
      
       }
    }
  
  .k .u{
  
       width: 17px;
       height: 17px;
       transform: translate(45px,-40px);
  }
  
  .k span{
      
          position: absolute;
          left: 596px;
          top: 120px;
  }


  @media(max-width:768px){

    .k span{

      position: absolute;
      left: 600px;
      top: 99px;
      font-size: 12px;   }  

  }



  @media(max-width:576px){

    .k span{

     position: absolute;
     left: 294px;
     top: 96px;   
     font-size: 12px; 
   }  

  }


  
  .k small{
  
    z-index: 1;
    font-size: 14px;
  
  }
  
  .k small:first-of-type{
  
    position: absolute;
  
    top: 11px;
    
    left: 535px;
    
  }

  
   @media(max-width:768px){

    .k small:first-of-type{

      position: absolute;
      top: 11px;
      left: 616px;    }  
     
   }


   @media(max-width:576px){

    .k small:first-of-type{

      position: absolute;
      top: 11px;
      left: 237px;
    }  
     
   }

  .k small:nth-of-type(2){
  
  position: absolute;
  
  top: 170px;
  
  left: 515px;
  }

  @media(max-width:768px){

    .k small:nth-of-type(2){
      position: absolute;
      top: 143px;
      left: 558px;    }
      
  }


  @media(max-width:576px){

    .k small:nth-of-type(2){
      position: absolute;
      top: 143px;
      left: 247px;       
    }
      
  }
  
  
  .k small:nth-of-type(3){
  
  position: absolute;
  
  top: 170px;
  
  left: 282px;
  }
  

  @media(max-width:768px){

     .k small:nth-of-type(3){

      position: absolute;
      top: 140px;
      left: 302px;     }
  }


  @media(max-width:576px){

     .k small:nth-of-type(3){

      position: absolute;
      top: 140px;
      left: 148px;
     }
  }
  
  .k small:last-of-type{
  
  position: absolute;
  
  top: 170px;
  
  left: 58px;
  }
  
  @media(max-width:768px){

     .k small:last-of-type{

      position: absolute;
      top: 139px;
      left: 36px;
     }
  }


  @media(max-width:576px){

     .k small:last-of-type{

      position: absolute;
      top: 139px;
      left: 36px;
     }
  }
  
  .k samp{
  
     position: absolute;
     top: 36px;
     left: 585px;
     z-index: 1;
     
  }
  
   @media(max-width:768px){

     .k samp{

      position: absolute;
      top: 28px;
      left: 665px;
      z-index: 1;
      font-size: 14px;     }  

   }



   @media(max-width:576px){

     .k samp{

      position: absolute;
      top: 24px;
      left: 284px;
      z-index: 1;
      font-size: 12px;
     }  

   }

  .k img:nth-last-child(1){
  
    width: 35px;
  
    height: 35px;
    
    border-radius: 50%;
    
    background-size: cover;
    
    border: 1px solid#fff;
    
    position: absolute;
    
    left: 620px;
    
    top: 223px;
  
  }

  @media(max-width:768px){

    .k img:nth-last-child(1){

      width: 40px;
      height: 35px;
      border-radius: 50%;
      background-size: cover;
      border: 1px solid#fff;
      position: absolute;
      left: 710px;
      top: 196px;    
          }

  }


  @media(max-width:576px){

    .k img:nth-last-child(1){

      width: 33px;
      height: 32px;
      border-radius: 50%;
      background-size: cover;
      border: 1px solid#fff;
      position: absolute;
      left: 318px;
      top: 198px;    }

  }
  
  /* vc */
  
  .k .vc>input{
  
    border-radius: 20px ;
    padding: 10px;
    background-color: #F0F2F5;
    width: 590px;
    border: 1px solid#ccc;
    outline: none;
    cursor: pointer;
    position:absolute;
    top:224px ;
    left:16px ;
    text-indent: 550px;
   
  }


  @media(max-width:768px){

     .k .vc>input{

      content: '';
      width: 690px;
      height: 50px;
      border: 2px solid white;
      position: absolute;
      right: 43px;
      left: 7px;
      top: 191px;    
           }
  }

  @media(max-width:576px){

     .k .vc>input{
         
      border-radius: 20px;
      padding: 18px;
      background-color: #F0F2F5;
      width: 300px;
      outline: none;
      cursor: pointer;
      position: absolute;
      top: 191px;
      z-index: 0;
      left: 12px;
      height: 45px;
      text-indent: 549px;      }
  
  }
  
  .k .vc>input::placeholder
  
        {
  
     transform: translate(-100px,0px);
     position: absolute;
     z-index: 1;
  }
  

   @media(max-width:768px){

    .k .vc>input::placeholder
  
    {

      transform: translate(-20px,5px);
      position: absolute;
      z-index: 1;
      }

   }


   @media(max-width:576px){

    .k .vc>input::placeholder
  
    {

      transform: translate(-390px,-5px);
      position: absolute;
      z-index: 1;
      }

   }

  /* النقطه الخضرا  */
  
  .k .inline::after{
  
    content: '';
  
    width: 14px;
    
    height: 14px;
    
    border-radius: 50%;
    
    border: 2px solid white;
    
    background-color: green;
    
    position: absolute;
    
    right: 41px;
    
    top: 243px;
    
    z-index: 1;
         
  }


  @media(max-width:768px){

     .k .inline::after{

      content: '';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
      background-color: green;
      position: absolute;
      right: 37px;
      top: 217px;
      z-index: 1;
           }
  }


  @media(max-width:576px){

     .k .inline::after{

      content: '';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
      background-color: green;
      position: absolute;
      right: 24px;
      top: 217px;
      z-index: 1;
     }
  }
  
  .k .vc i:first-of-type{
  
    transform: translate(91px, 181px);
    color:#817a7a ;
  
  }


     @media(max-width:768px){
  
     .k .vc i:first-of-type{

      transform: translate(60px, 150px);
      color: #817a7a;
      font-size: 17px;     } 

   }


   @media(max-width:576px){
  
     .k .vc i:first-of-type{

      transform: translate(60px, 150px);
      color: #817a7a;
      font-size: 17px;     } 

   }

  
  .k .vc i:nth-of-type(2){
  
     transform: translate(32px, 180px);
     color:#817a7a ;
  
  }


     @media(max-width:768px){

     .k .vc i:nth-of-type(2){
      transform: translate(11px, 149px);
      color: #817a7a;
      font-size: 17px;       
     }
   }


   @media(max-width:576px){

     .k .vc i:nth-of-type(2){
      transform: translate(11px, 149px);
      color: #817a7a;
      font-size: 17px;       
     }
   }



  
  .k .vc i:last-of-type{
  
    transform: translate(-27px, 180px);
    color:#817a7a ;
  
  }


    @media(max-width:768px){

   .k .vc i:last-of-type{
    transform: translate(-40px, 151px);
    color: #817a7a;
    font-size: 20px;     
   }

  }


  @media(max-width:576px){

   .k .vc i:last-of-type{
    transform: translate(-40px, 151px);
    color: #817a7a;
    font-size: 20px;     
   }

  }
  
  
  /* end  k */
  

  /* start ku */

.ku{
    
    padding: 20px;
    margin: 20px;
    background-color: #fff;
    width: 676px;
    position: relative;
    position: absolute;
    top: 2615px;
    left: 267px;
    border-radius: 15px;
    height: 660px;
    cursor: pointer;
    
    }


    @media(max-width:992px){

      .ku{

        position: absolute;
        top: 2575px;
      
              }
      }  

 @media(max-width:768px){

     .ku{
      padding: 20px;
      background-color: #fff;
      width: 752px;
      height: 604px;
      transform: translate(-279px, -1430px);
      cursor: pointer;
      position: relative;    
       }
 }


 @media(max-width:576px){

     .ku{
    padding: 20px;
    background-color: #fff;
    width: 354px;
    height: 604px;
    transform: translate(-284px, -1531px);
    cursor: pointer;
    position: relative;
    
       }
 }


.zk{
   
   transform: translate(-17px, 560px);
    width: 640px ;
}


@media(max-width:768px){

   .zk{

    transform: translate(-27px, 510px);
    width: 736px;       }
}



@media(max-width:576px){

   .zk{

    transform: translate(-27px, 510px);
    width: 334px;
       }
}

.ku img{

  width: 30px;
  height: 30px;
}

.ku img:first-of-type{

position: absolute;

top: 27px;

left: 25px;

width: 25px;

height: 10px;
 }


 @media(max-width:768px){


     .ku img:first-of-type{

      position: absolute;
      top: 20px;
      left: 25px;
      width: 20px;
      height: 10px;
     }

 }


 @media(max-width:576px){


     .ku img:first-of-type{

      position: absolute;
      top: 20px;
      left: 25px;
      width: 20px;
      height: 10px;
     }

 }

.ku img:nth-child(2){

  position: absolute;

  top: 11px;
  
  left: 623px;
  
  z-index: 1;
  
  border-radius: 50%;
  
  width: 35px;
  
  height: 35px;
}


@media(max-width:768px){

   .ku img:nth-child(2){

    position: absolute;
    top: 7px;
    left: 503px;
    z-index: 1;
    border-radius: 50%;
    left: 689px;
    height: 35px;   }

}


@media(max-width:576px){

   .ku img:nth-child(2){

    position: absolute;
    top: 8px;
    left: 503px;
    z-index: 1;
    border-radius: 50%;
    left: 304px;
    height: 35px;
   }

}

.ku img:nth-of-type(3){

position: absolute;

top: 42px;

left: 565px;

z-index: 1;

width: 15px;

height: 15px;
 }


 @media(max-width:768px){

  .ku img:nth-of-type(3){
     
    position: absolute;
    top: 32px;
    left: 627px;
    z-index: 1;
    width: 12px;
    height: 12px;     }

 }


 @media(max-width:576px){

  .ku img:nth-of-type(3){
     
    position: absolute;
    top: 32px;
    left: 250px;
    z-index: 1;
    width: 12px;
    height: 12px;
     }

 }


.ku img:nth-of-type(4){

width: 674px;

height: 502px;
  
position: absolute;

left: 0px;

top: 70px;

background-size: cover;

}


@media(max-width:768px){

    .ku img:nth-of-type(4){
      width: 745px;
      height: 461px;
      position: absolute;
      left: 7px;
      top: 60px;
      background-size: cover;    }
}


@media(max-width:576px){

    .ku img:nth-of-type(4){
    width: 350px;
    height: 461px;
    position: absolute;
    left: 4px;
    top: 60px;
    background-size: cover;

    }
}


.ku img:nth-of-type(5){

position: absolute;

top: 617px;

left: 342px;

z-index: 1;
}


@media(max-width:768px){

  .ku img:nth-of-type(5){

    position: absolute;
    top: 566px;
    left: 437px;
    z-index: 1;  
       }
}



@media(max-width:576px){

  .ku img:nth-of-type(5){

    position: absolute;
    top: 562px;
    left: 196px;
    z-index: 1;}
}


.ku img:nth-of-type(6){

position: absolute;

top: 617px;

left: 130px;

z-index: 1;
}


@media(max-width:768px){

  .ku img:nth-of-type(6) {

    position: absolute;
    top: 564px;
    left: 193px;
    z-index: 1;  
  
        }

}


@media(max-width:576px){

  .ku img:nth-of-type(6) {

    position: absolute;
    top: 561px;
    left: 93px;
    z-index: 1;  }

}

.ku img:last-of-type{

position: absolute;

top: 610px;

left: 580px;

z-index: 1;

}

@media(max-width:768px){

   .ku img:last-of-type{

    position: absolute;
    top: 560px;
    right: -27px;
    left: 681px;
    left: -36px;
    z-index: 1;
    left: 662px;  
        }
}


@media(max-width:576px){

   .ku img:last-of-type{

    position: absolute;
    top: 557px;
    right: -22px;
    left: 681px;
    left: -36px;
    z-index: 1;
    left: 312px;
  
         }
}


.ku small{

z-index: 1;
font-size: 14px;

}

.ku small:first-of-type{

position: absolute;

top: 11px;

left: 535px;

}


@media(max-width:768px){

   .ku small:first-of-type{

    position: absolute;
    top: 8px;
    left: 604px;   }
}


@media(max-width:576px){

   .ku small:first-of-type{

    position: absolute;
    top: 8px;
    left: 220px;
   }
}

.ku small:nth-of-type(2){

position: absolute;
top: 617px;
left: 515px;

}

@media(max-width:768px){

  .ku small:nth-of-type(2){

    position: absolute;
    top: 567px;
    left: 574px;  
        }

}


@media(max-width:576px){

  .ku small:nth-of-type(2){

    position: absolute;
    top: 563px;
    left: 254px;  }

}


.ku small:nth-of-type(3){

position: absolute;
top: 617px;
left: 282px;


}


@media(max-width:768px){

 .ku small:nth-of-type(3){

  position: absolute;
  top: 567px;
  left: 340px;

       }

}


@media(max-width:576px){

 .ku small:nth-of-type(3){

  position: absolute;
  top: 565px;
  left: 140px;
        }

}


.ku small:last-of-type{

position: absolute;
top: 617px;
left: 58px;

}


@media(max-width:768px){

  .ku small:last-of-type{

    position: absolute;
    top: 568px;
    left: 90px;      }

}

@media(max-width:576px){

  .ku small:last-of-type{

    position: absolute;
    top: 564px;
    left: 26px;  }

}


.ku samp{

 position: absolute;
 top: 36px;
 left: 585px;
 z-index: 1;
 
}


@media(max-width:768px){

   .ku samp{

    position: absolute;
    top: 24px;
    left: 649px;
    z-index: 1;   }
}

@media(max-width:576px){

   .ku samp{

    position: absolute;
    top: 24px;
    left: 272px;
    z-index: 1;
   }
}



/* end ku */