.section1{
    padding:50px;
}

.section2{
    background-color:#e5e9ec;text-align:right;right:0px;padding:50px;
}

.section3{
    right:0px;padding-bottom:30px;padding-right:10%;
}

.section4{
     background-color:#e5e9ec;text-align:right;right:0px;padding:50px;
}

.iconCRM {
   padding-top:10px;
}

    p{
        line-height:1.8;
        font-size:larger;
        padding-right:30px;
    }

    .trTable{
        display:none;
        /*border:groove;*/
        height: 20px;
         /*border-width:1px;*/
    }

    .tdTable{
        border:groove;
        border-width:1px;
    }

    .fehrest{
        border:groove;
        margin-bottom:10px;
        padding:5px;
        border-radius:5px;
    }

    .fehrest:hover{
         /*color: #85c525;*/
        /*background-color:azure;*/
         box-shadow: 0 0 0 1px #aaa, 2px 1px 6px 4px #ddd;
       transition: transform .2s;
        transform: scale(1.02);
        border-radius:5px;
        background-color:#eff0f1
        /*background-color:#b7efca;*/
    }

    h1{
        color:black;
         font-size:26px;
    }

    ul li{
        /*background-image:none;*/
    }

    .matn{
        text-align:right;color:black; list-style:inside circle;
    }

    .matn li{
 background-image:none;
    }

    .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

    .blue_section {
  width: 100% !important;
  margin: 0px -50% 0px -50% !important;
  padding: 0px 0px 0px 0px !important;
  background-color: #0088CC;
}

 .xc{
        /*width: 300px;*/
        height: 380px;
        /*position:absolute;*/
        /*float:right;*/
        direction:rtl;
        background: #ffffff;
        font-weight:normal;
        padding: 10px;
        margin: 25px 30px 0px 30px;
        /*border-radius: 10px;*/
        line-height: 30px;
        box-shadow: 0 0 0 4px #f5f5f5, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
          transition: transform .20s;
  padding:0px;
        }
    
 .cadrd{
     background-color:#e5e9ec;width:100%;padding-top: 15px; height: 120px;padding-right: 2px;
 }

 .cadrdh{
     color:black;float:right;width: inherit;margin: 5px;padding-bottom: 8px;
 }

 .liRozi{
     background-image:url(../../Content/Image/picLanding/Picture1.png);background-size:25px 26px;
 }

  .btn-cadr{
            width: 200px;
    height: 50px;
    background: darkorange;
    padding: 15px 60px;
    border-radius: 5px;
        /*margin: 10px 50px 20px 10px;*/
            margin: 25px 20px 20px 20px;

 }
     

  .numberCircle {
    border-radius: 50%;
    /*width: 36px;
    height: 36px;*/
    padding: 15px;

    background: #fff;
    /*border: 2px solid #666;*/
    border:3px solid #dfdcdc;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;

      box-shadow: 0 0 0 3px #f5f5f5, 1px 1px 1px 1px rgba(10, 10, 0, 0.5);
        transition: transform .20s;
}

  .numberCircle:hover{
      border-radius:25px;
      border-color:darkorange;
      cursor:pointer;
      box-shadow:  0 0 0 3px #ffffa4, 3px 2px 2px 2px rgba(10, 10, 0, 0.5);
          /*box-shadow: 0 0 0 4px #ffffa4, 2px 1px 6px 4px #ddd;*/
        transition: transform .2s;
        transform: scale(1.05);
  }

  .selectCircle{
       border-radius:25px;
      border-color:darkorange;
       /*box-shadow: 0 0 0 3px #ffffa4, 1px 1px 1px 1px rgba(10, 10, 0, 0.5);*/
     box-shadow:  0 0 0 3px #ffffa4, 3px 2px 2px 2px rgba(10, 10, 0, 0.5);
  }

  .imgicon{
      float:left;
     width:65px;
     height:65px;
  }

.cadrMatm{
    padding:20px;
    height:420px;
}

.heder{
     text-shadow: 1px 1px 1px #6af8a1;
     font-size:22px;
     padding-bottom:10px;
}

.ulMatn{
   text-align:right;
}

.divIcon{
    padding-bottom:10px;
}

.divBorder{
    border:groove;direction:rtl;border-radius:10px;box-shadow:0 0 0 1px #f5f5f5, 1px 1px 4px 2px rgba(10, 10, 0, 0.5);
}
.matnIcon{
    /*font-size:10px;*/
}
.imgdashbord{

}
.h4cadr{
    font-size:17px;padding-right:10px;
}
.ulcadr{
    color: black;text-align: right;
}
.pcadr{
    padding:0px 5px 0px 0px;font-weight: bold;
}
@media screen and (max-width:768px) {
    .cadrMatm {
         height:690px;
    }
      .numberCircle{
        padding:5px;
    }
}

@media screen and (min-width:620px) and (max-width:768px){
    .cadrMatm {
         height:550px;
    }
    .numberCircle{
        padding:25px;
    }
}

@media screen and (min-width:768px) and (max-width:876px){
    
    .numberCircle{
        padding:10px;
    }
}

@media screen and (min-width:768px) and (max-width:770px){
    .cadrMatm {
         height:920px;
    }
    
}
@media screen and (min-width:770px) and (max-width:850px){
    .cadrMatm {
         height:810px;
    }
    
}

@media screen and (min-width:850px) and (max-width:888px){
    .cadrMatm {
         height:700px;
    }
    
}
@media screen and (min-width:888px) and (max-width:993px){
    .cadrMatm {
         height:680px;
    }
    
}

@media screen and (min-width:993px) and (max-width:1050px){
    .cadrMatm {
         height:530px;
    }
    
}
@media screen and (min-width:1050px) and (max-width:1185px){
    .cadrMatm {
         height:450px;
    }
    
}

@media screen and (min-width:1185px){
    .cadrMatm {
         height:420px;
    }
    
}
@media screen and (min-width:992px) and (max-width:1300px){
    
    .numberCircle{
        padding:7px;
    }
}


@media screen and (max-width:365px){
    /*.col-xs-12{
        width:290px;
    }*/
    /*.selectCircle{
        border-radius:10px;
    }*/
   .imgicon{
       width:40px;
       height:50px;
       display:none;
   }
   .heder{
       font-size:18px;
       padding-bottom:5px;
   }
    
   .liRozi{
       background-size:20px 20px;
   }
   .cadrMatm{
       height:100%;
   }
   .btn-cadr{
       width:150px;
       padding:15px 6px;
   }
   .ulMatn{
       padding-right:0px;
   }
    .numberCircle{
       padding:2px;
   }

     h1{
      font-size:18px;
  }
      p{
     font-size: 14px;
    padding-right: 15px;
    }
      .matn{
          font-size:13px;
      }
      .matn li{
          padding-right:0px;
          text-align:right;
      }
      .cadrdh{
          font-size:21px;
      }

      .cadrd{
          padding-top:10px;
          height:100px;
      }
      .xc{
          height:350px;
      }
      .h4cadr{
          font-size:14px;
      }
      .ulcadr{
          font-size:13px;
          padding-right:18px;
      }
      .pcadr{
          font-size:13px;
      }
}
@media screen and (min-width:501px) and (max-width:551px) {
    h1{
        font-size:24px;
    }
     p{
     font-size: 20px;
    padding-right: 18px;
    }
}

@media screen and (min-width:365px) and  (max-width:500px){
    /*.col-xs-12{
        width:300px;
    }*/
    .imgicon{
       width:55px;
       height:55px;
       display:none;
   }
    
   .heder{
       font-size:20px;
   }
    
   .cadrMatm{
       height:100%;
   }
  
   .ulMatn{
       padding-right:0px;
   }
   /*.numberCircle{
           border-radius: 50%;
   }*/
    h1{
      font-size:18px;
  }
      p{
     font-size: 14px;
    padding-right: 15px;
    }
      .matn{
          font-size:13px;
      }
      .matn li{
          padding-right:0px;
          text-align:right;
      }
      .cadrdh{
          font-size:21px;
      }

      .cadrd{
          padding-top:10px;
          height:100px;
      }
      .xc{
          height:350px;
      }
      .h4cadr{
          font-size:14px;
      }
      .ulcadr{
          font-size:13px;
          padding-right:18px;
      }
      .pcadr{
          font-size:13px;
      }
}

@media screen and (max-width:280px){
    /*.col-xs-12 {
    width: 280px;
}*/
   .divIcon{
       width:120px;
   }
   .divBorder{
       width:200px;

   }
   .imgicon{
       width:30px;
       height:30px;
   }
   .heder{
       font-size:15px;
       padding-bottom:0px;
   }
   .cadrMatm{
       height:100%;
   }
   .iconCRM{
       padding-top:0px;
   }
   
}
@media screen and (max-width:320px){
  
   /*.divicons{
      width:250px;
   }
   .divBorder{
      width: 245px;
   }*/
    h1{
      font-size:18px;
  }
      p{
     font-size: 14px;
    padding-right: 15px;
    }
    
      .cadrdh{
          font-size:20px;
      }

      .cadrd{
          padding-top:5px;
          height:90px;
      }
     
     
      .pcadr{
          font-size:12px;
      }
}

@media screen and (min-width:1300px){
  
   .imgdashbord{
       width:770px;
       height:360px;
   }
}

@media screen and (max-width:417px){
    .section1{
        padding:10px;
    }
    .section2{
          padding: 10px 10px 5px 10px;
    }
    
    .section4{
          padding: 10px 10px 5px 10px;
    }
    .matn{
        padding-right:5px;
    }
    h1{
        font-size:18px;
    }
    .heder{
        font-size:16px;
    }
    p{
        font-size:14px;

    }
    .ulMatn{
        font-size:14px;
    }

    .col-xs-12{
        padding:0px;
    }
    .cadrMatm{
        padding:12px;
    }
}




.divselect{
    color:orange;
 animation-name: text;
  animation-duration: 1s;
   animation-delay: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
/* The element to apply the animation to */
.divIcone1 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 2s;
    animation-direction: alternate;
    animation-timing-function: out;
  /*animation-iteration-count: 3;*/
}

.divIcone2 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 4s;
    animation-direction: alternate;
    animation-timing-function: out;
  /*animation-iteration-count: 3;*/
}
.divIcone3 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 6s;
    animation-direction: alternate;
  /*animation-iteration-count: 3;*/
}
.divIcone4 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 8s;
    animation-direction: alternate;
  /*animation-iteration-count: 3;*/
}
.divIcone5 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 10s;
    animation-direction: alternate;
  /*animation-iteration-count: 3;*/
}
.divIcone6 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 12s;
    animation-direction: alternate;
  /*animation-iteration-count: 3;*/
}

.divIcone7 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 14s;
    animation-direction: alternate;
  /*animation-iteration-count: 3;*/
}

.divIcone8 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 16s;
    animation-direction: alternate;
  /*animation-iteration-count: 3;*/
}

.divIcone9 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 18s;
    animation-direction: alternate;
  /*animation-iteration-count: 3;*/
}

.divIcone10 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 20s;
    animation-direction: alternate;
  /*animation-iteration-count: 3;*/
}

.divIcone11 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 22s;
    animation-direction: alternate;
  /*animation-iteration-count: 3;*/
}

.divIcone12 {
  /*border-color: orange;*/
  animation-name: example;
  animation-duration: 1s;
   animation-delay: 24s;
    animation-direction: alternate;
  /*animation-iteration-count: 3;*/
}

@keyframes example {
  /*0%   {border-color:orange;}
  25%  {border-color:yellow;}
  50%  {border-color:blue; }
  75%  {border-color:green;}
  100% {border-color:red;}*/
   /*from {border-color: #dfdcdc;border-radius:50%;}
  to {border-color: orange;border-radius:25px;}*/
}


@keyframes text {
  /*0%   {color:orange;}
  /*25%  {color:yellow;}*/
  /*50%  {color:blue; }*/
  /*75%  {color:green;}*/
  /*100% {color:red;}*/*/
   /*from {color: orange;}
  to {color:#bc1e1e;}*/
}