@font-face {
  font-family: 'Sans';
  src: url('../fonts/IRAN Sans Regular .ttf?#') format('truetype') 
}
body {margin:0;font-family:'Sans' !important;direction: rtl;}




li{
  list-style: none;
}

.row{
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
/*******************************************************header**********************************************************/
#topnav {
  
  background-color: #0b5b7a;
  padding: 0 !important;
  height: 40px;

}
#topnav div{
  padding: 0;
}
.topnav {
  
  background-color: #0b5b7a !important;
  

}






.topnav .icon {
  display: none;
}






.dropdown-content {
  display: none;
  position: absolute;
  background-color: #e3f3f3;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
}

.dropdown-content a {
  float: none;
  color: black !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: right;
}
.dropdown-content ul{
  padding: 0;
}



.dropdown-content a:hover {
  background-color: #ddd !important;
  
}

.dropdown:hover .dropdown-content {
  display: block;
}
 #logo{
  width: 110px;
  

}

@media screen and (max-width: 600px) {

  .topnav .icon {
   
    color: #ffffff !important;
  }
  .topnav button {
  font-size: 17px;    
  border: none;
  outline: none;
  color: #ffffff;
  padding-top: 14px;
  padding-bottom: 14px;
    padding-right: 23px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

 .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  
  .topnav a.icon {
    float: right;
    display: block ;
  }
 
#myTopnav{
 /* width: 80%;*/

    z-index: 10;
  
  
     
}
#logodiv{
  width: 20%;
  
     
}
.topnav > a{
  float: right;
  display: block;
  color: #ffffff !important;
  text-align: center;
  padding: 14px 23px;
  text-decoration: none;
  font-size: 17px;
  text-decoration: none !important;

}
 }
 @media screen and (min-width: 600px) {
  .topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #e3f3f3;
  color: #3e4191;
}
  .topnav > a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 23px;
  text-decoration: none;
  font-size: 17px;
  text-decoration: none !important;

}

.topnav button {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding-top: 14px;
  padding-bottom: 14px;

  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
 }

@media screen and (max-width: 600px) {
  
  .topnav.responsive {position: relative;}
  
  .topnav.responsive .icon{
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
  }
  .topnav.responsive{
  background-color: #0b5b7a;
  }
  

 
  .topnav.responsive a {
    float: none;
    display: block !important;
    text-align: right;
  }


  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: right;
  }
}
@media screen and (max-width: 991px) {
  #call{
  
  margin-bottom: 20px;
}
}
@media screen and (min-width: 991px) {
#call{
  padding-right: 155px;
  margin-bottom: 20px;
}
  }
#call p{
  margin-top: 12px !important;
    margin-bottom: 0;
    text-align: right;
}
#call p i{
  margin-left: 10px;
  color: #17a2b8;
}
/*#circle{
 width: 68px;
    height: 71px;
   
    background-color: #fff;
    position: absolute;
    left: -30px;
    border-radius: 52%;
    }*/
    
 

/*******************************************************header**********************************************************/

/*******************************************************footer*********************************************************/
footer{
   width: 100%;
   background: #0b5b7a  none repeat 0 0;
        margin-top: 40px;
   
}
  footer .container {
        
        
       
        
        color: #32375b;
       
           
   
    }
    
    footer div{
      text-align: right;
      padding:40px 15px;
    }
    footer div p{
      padding: 0 20px;
      margin-bottom: 2rem !important;
    }
    footer div p:last-child{
      margin-bottom:0 !important;
    }
    footer div p a{
      color: #fff !important;
      text-decoration: none !important;
      font-size: 14pt !important;
    }
    footer div p a:hover{
     color: #444 !important;
    
  
    }
    footer #right{
      padding: 0;
      margin-bottom: 15px;
      color: white;
    }
    footer #left{/*left*/
      text-align: left;
      padding: 0;
    }
     footer #right img{/*left*/
      width: 40px;
      height: 40px;
      
    }
   
    footer #right h5{/*center*/
      margin-bottom: 40px;
    }
    footer #right p{/*center*/
      padding: 0 !important;
      margin-bottom: 20px !important;
    }
    footer #right i{/*center*/
      margin-left: 5px;
      font-size: 1.3rem;
    }
     footer #right span{/*center*/
      
      font-size: 1.1rem;
    }
   
/**************************************footer******************************************/
/**************************************first_item**************************************/
#first #aboutus{
 padding: 15px;

}
#first #slider{
  padding-top: 10px;
    padding-bottom: 10px;
}

#first #slider .carousel-indicators {
  margin-right: 0;
}



#first{
  background-color: #eee;
  margin-top:20px;
}
@media screen and (min-width: 991px) {

     #circle {
      
  width: 56px;
  height: 56px;
  overflow: hidden;
  position: relative;
 
    right: 29%;
    background-color: #000;
}
   #circle:before {
      content: "";
  display: block;
  width: 200%;
  height: 200%;
  position: absolute;
  border-radius: 50%;
  top: 0;
  right: 100%;
  box-shadow: 50px -50px 0 0 #0b5b7a ;
}
#first #slider{
  position: relative;
  right: 50%;
  text-align: right;
 

}

#first #aboutus{
  position: relative;
  left: 50%;
  text-align: right;

}
#first #slideshow{
  margin-top: -130px;
 /* height: 500px;*/
  
}

}
#first #slideshow .carousel-item{
  height: 100%;
  width: 100%;
}
#third .carousel-inner img {
    width: 170px;
    height: 180px;
    margin: auto;
    padding-top: 10px;

    
  }
 #first .carousel-inner img {
    width: 100%;
    height: 100%;
  

    
  }
  
@media screen and (max-width: 991px) {
  #first #slideshow{
     /* height: 500px;*/

  }
#circle {
  display: none;
}
#first #slider{
  max-width: 75% !important;
  margin:auto;
}
}

/**************************************first_item*************************************/
/**************************************second_item*************************************/
#second{
  background-color: #f7f8f7;
}
#second h3{
  text-align: center;
  color: #0b5b7a;
  padding: 18px 0;
  font-weight: 700;
}
#second #down{
  text-align: center;

}
#second #down p{
font-weight: bold;
font-size: 1.2rem;
margin-top: 15px;
}


#second ul li img{
  width: 100%;
  height: 100%;
  border-radius: 15%;

}

#second #top{
padding: 10px;
}

#second ul {
      /* Remove bullet points; allow greater control of positioning */
    padding: 0;      /* Override defaults for lists */
    margin: auto;
        /* Override defaults for lists */
  
     /* Get the row full width */
}


#second ul li {
    /* Get all images to show in a row */
            /* Show 4 logos per row */
    text-align: center; 
   
  
 
   margin-bottom: 20px;
      padding: 0;
      border-radius: 5%;
      overflow: hidden;

  color: #3e4191; /* Centre align the images */
}
#second ul li:hover{
  
 
}
#second ul li:hover img{
  transform: scale(1.1);
}
@media (max-width: 991px)  {
    #second ul li { width: 41%;margin-right: 4%;
    margin-left: 5%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}

@media (min-width: 991px) {
    #second ul li { width: 22%;margin-right: 2%; } /* On small screens, show one logo per row */
}
/**************************************second_item*************************************/
/**************************************third_item*************************************/
#third .clearfix{
  background-color: #fff !important;
}
#third .carousel-item .col-md-4{
  background-color: #fff !important;

}
#third .card-body{
  text-align: right;
}
#third .card-body h4{
  text-align: center;
}
#third .card-body p{
  text-align: center;
    font-size: 1.2rem;
}
#third .btn-floating{
background: #4285f4;
    box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
    width: 47px;
    height: 47px;
    position: relative;
    z-index: 1;
    display: inline-block;
    overflow: hidden;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin: 10px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 0;
  }
#third .btn-floating i{
  font-size: 1.25rem;
    line-height: 49px;
    display: inline-block;
    width: inherit;
    text-align: center;
    color: #fff;
}
#third .controls-top{
  text-align: center;
}
@media screen and (max-width: 1110px) {

#third .controls-top #prev{
  position: absolute;
    right: 50%;
}
#third .controls-top #next{
  
    left: 32px;
}
}
@media screen and (min-width:1110px) {

#third .controls-top #prev {
    position: absolute;
    right: 100%;
    top: 50%;
    }
    #third .controls-top #next {
    left: 100%;
    top: 50%;
    position: absolute;
  }
}
/**************************************third_item*************************************/

/**************************************fourth_item*************************************/
#fourth{
  background-color: #f4f3f3;
  margin-bottom: 20px !important;
  margin-top: 20px !important;
}

#fourth #image{
 position: relative;
  
  text-align: right;
 
 

}


#fourth #experiment{
 
  text-align: right;

}
#fourth #image img{
  width: 100%;
  padding: 10px;
 

}
@media screen and (max-width: 991px) {
   #fourth #image{

}
#fourth #experiment{  

  }
}
@media screen and (min-width: 991px) {
  #fourth #image{

}
#fourth #experiment{  
  
  }
}

/**************************************fourth_item*************************************/
/**************************************fifth_item*************************************/
#fifth .slick-slide,#slides .slick-slide{
 float: right !important;
 
}
@media screen and (max-width: 650px) {
 #fifth .slick-prev,#slides .slick-prev{
display: none !important;
}
#fifth .slick-next,#slides .slick-next{
display: none !important;
}
}
@media screen and (min-width: 650px) {
 #fifth .slick-prev,#slides .slick-prev{
position: absolute;
top: 52%;
border-radius: 50%;
background-color: #d8d8f0;
font-weight: bold;
border:none;
font-size: 20px;
width: 30px;
height: 30px;
left: 100%;
}
#fifth .slick-next,#slides .slick-next{
position: absolute;
top:52%;
right: 100%;
border-radius: 50%;
background-color: #d8d8f0;
font-weight: bold;
border:none;
font-size: 20px;
width: 30px;
height: 30px;
}
}


#fifth .slick-slide,#slides .slick-slide{
      margin: 45px 15px 0 15px;
    text-align: center;
    
}
#fifth .slick-slide div,#slides .slick-slide div{
  margin-bottom:10px;
  padding-top: 10px;
}
#fifth .slick-slide a,#slides .slick-slide a{

    margin: auto;
    display: inline-block;

}
#fifth .slick-slide  img,#slides .slick-slide  img{
  width: 100%;
  height: 100%;
}
#fifth h3,#slides h3{
  text-align: right;
}
#fifth div p,#slides div p{
  font-size: 1.2rem;
  font-weight: bold;

}
/**************************************fifth_item*************************************/
/**************************************add_option*************************************/

#add_option span{
  width: 124px;
}
/**************************************add_option*************************************/
/*#first .rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 20%;
  }

#first .rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

#first .rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

#first .rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }*/
  /************************************************************contact_us*********************************************************/
  #contact_us{
    margin-top: 40px !important;
  }
  #contact{
    text-align: right;
  }
  #contact h3{
    margin-bottom: 30px;
    color: #52527e;
  }
  /********************************************************contact_us*************************************************************/
  /*********************************************************about_us*************************************************************/

  #about_us{
    margin-top: 40px !important;
  }
  #about{
    text-align: justify;
  }
  #about p{
    font-size: 1.2rem;
  }
  #about h5{
    color: #6969a5;
  }
  /***********************************************************about_us************************************************************/
.sidebar .msg::before{
  content: 'new';
  border-radius: 50%;
  background-color: red; 
  
  width: 30px;
  height: 30px;
  text-align: center;

}
  .sidebar .msg.hidden::before {
        display: none;
    }