body{
    background-image: url(../images/bg.jpg);
    width: 100%;
    background-repeat: no-repeat;
    font-size: 18px;
    font-weight: bold;
    background-size: cover;
    background-position: top;
    font-family: 'Tajawal' !important;

}

/* Section number One (1) */

.dropdown-menu>li>a{
    padding: 3px 5px !important;
    text-align:right !important;
}

.Sec_1{
    background-color: #fff;
    width: 70%;
    margin-top: 50px;
    box-shadow: -30px 0 20px rgba(1, 3, 9, .5);
   
    border-radius: 20px;
}

/* Start Nav Bar Edit*/
.dropdown-menu{
       min-width: 15rem !important;
}

.navbar-default{
    background-color: transparent;
    border-color: transparent;
    margin-bottom: 55px;
}
.lang{
    float: right !important;
    border: none;
}
.lang:hover{
       background-color:#3ae374 !important;   
    border-radius: 50px !important;
    color: #FFF !important;
    text-align: center;
     -webkit-transition: 0.7s; 
     border: none;
}


.left > li a{
    color: black;
}

.navbar-default .navbar-nav>li>a {
    color: #483601;
    font-size: 16px;
    font-weight: 600;
}

.navbar-default .navbar-nav>li>a:hover{
    background-color:#3ae374;
     -webkit-transition: 0.7s;    
    border-radius: 50px;
    color: #FFF;
}


.navbar-default .navbar-nav>li>a:active{
    background-color:#3ae374 !important;   
    border-radius: 50px !important;
    color: #FFF !important;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
    background-color:#3ae374 !important;   
    border-radius: 50px !important;
    color: #FFF !important;
    text-align: center;
     -webkit-transition: 0.7s; 

}

.navbar-default .navbar-nav>li>a:focus{
    background-color:#3ae374 !important;   
    border-radius: 50px;
    color: #FFF !important;
}

.navbar-brand {
    padding: 0px 15px;
    margin-top: 15px !important;
}

.navbar-right{
    margin-top: 15px;
}


.dropdown-menu>li>a:hover{
     background-color:#3ae374 !important;
     color: #FFF !important;
}
/* End nav bar Edit*/
.slide_1{
    background-image: url(../images/slide_number2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: sticky;
    height: 400px;
    width: 100%;
}

.slide_2{
    background-image: url(../images/urgo_prod.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: sticky;
    height: 400px;
    width: 100%;
}

.title{
    text-align: center;
    background-color: #4cd137;
    font-size: 25px;
    height: 60px;
    padding-top: 20px;
    color: #FFF;
}

@media only screen and (min-width: 479px) {
   .sliding_2{ display: none !important; }
}
@media only screen and (max-width: 479px) {
   .sliding{ display: none !important; }
}
@media only screen and (max-width: 479px) {
   .Top{ display: none !important; }
}

.sliding_2{
    margin-top: 10px;
}

.introduction{
   color: #008000;;
    font-size: 15px;
    padding: 25px 40px;
    text-align: -webkit-right;
    line-height: 40px; 
    direction: rtl !important;
    font-family: 'Tajawal' !important;

}

.partment{
    margin-top: 15px; 
    margin-bottom: 10px;
    text-align: center;
    color: #008000;
    font-size: 35px;
    font-weight: 800;
}


.last-img{
     width: 100%;   
}



/* footer */
.footer{
    margin-top: 80px;
    padding: 20px;
    color: black !important;
}


* {
  margin: 0;
  padding: 0;
}



/* Let's style the wrapper in such away that, 
it should always be at the center of the browser */
.wrapper {
    margin-top: 120px;
        width: 210px;
}

/* Style the Un-order list by setting its list-style to none */
.wrapper ul {
  list-style: none;
}

/* Style the list items inside the UL list, by setting its width, height and line-height 
  and float them to left and set its border and border-radius.
 */
.wrapper ul li {
    transition: all 0.5s ease;
    margin: 0px !important;
    text-align: center;
    padding: -2px;
    
}
.ashkr{
    text-align: right;
}
/* Style the icons by setting its color and margin-top value to 20px 
to align it properly */
.wrapper ul li .fa {
  color: #D8E2DC;
  margin-top: 20px;
  transition: all 0.5s ease;
  font-size: 25px !important;
}

/* Now target the specific li classes for styling and use box-shadow effect to border and text-shadow effect
  to icons for glowing effect and use transition property for smooth transition effect. */
/*facebook*/
.wrapper ul li:hover.facebook {
      transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-facebook {
  color: #3b5998;
  text-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}

/*twitter*/
.wrapper ul li:hover.twitter {

  transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-twitter {
  color: #00aced;
  text-shadow: 0 0 15px #00aced;
  transition: all 0.5s ease;
}

/* instagram */
.wrapper ul li:hover.instagram {
 
  transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-instagram {
  color: #bc2a8d;
  text-shadow: 0 0 15px #bc2a8d;
  transition: all 0.5s ease;
}

/* google */
.wrapper ul li:hover.google {
  
  transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-google {
  color: #dd4b39;
  text-shadow: 0 0 15px #dd4b39;
  transition: all 0.5s ease;
}

/* whatsapp */
.wrapper ul li:hover.whatsapp {
  transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-whatsapp {
  color: #4dc247;
  text-shadow: 0 0 15px #4dc247;
  transition: all 0.5s ease;
}

/* DropDown Work*/


.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: -100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;

    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

/* call us section */
.contact{
    background-image: url(../images/contact-us.jpg);
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    position: sticky;
}

/*Back To Top*/
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    width: 70px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: #f5f5f5;
    color: #444;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: chartreuse;
}
#back-to-top.show {
    opacity: 1;
}
#content {
    height: 2000px;
}

/**/
.introduction-2{
    color: #008000;
    font-size: 25px;
    padding: 25px 40px;
    text-align: center;
    line-height: 40px;
    margin-top: 17px;
    
}

.drop:hover .drp{
    display: block !important;
}

.prod{
    height: 150px;
    margin-bottom: 20px;
    margin-top: 40px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.img_1{
    background-image: url(../images/orgo2.jpg);
}

.img_2{
    background-image: url(../images/atrafeart1.jpg);
}
.img_3{
    background-image: url(../images/atramax1.jpg);
}
.img_4{
    background-image: url(../images/Atraphosphoric1.jpg);
}
.img_5{
    background-image: url(../images/AtraHumat1.jpg);
}
.img_6{
    background-image: url(../images/Atragelbric1.jpg);
}
.img_7{
    background-image: url(../images/Atramaktein1.jpg);
}

/* slider*/
.packet{
    
    float:right !important;
}

.table{
    width: 65% !important;

}
.table>tbody>tr:first-child{
    background: #4cd137;
    color : white;
}

.partion{
    margin-top:60px;
}

.dlow{
    float: left;
    
}

.pic{
    height: 300px;
}