
@media only screen and (max-width:575px) {   /* start Extra small screens */

a.navbar-brand {
font-size: 0.6em;
     }

.navbar-brand span {
    display: block;
    font-size: 0.5em;
}

.navbar-light .navbar-nav .nav-link {
margin-right: 0!important;
padding-right: 4px!important;
}


/* Start logo Design */

.top-header {
    padding-right: 70px;
}
.navbar-nav .nav-item {
  font-size: 0.9em!important;
}

  .navbar-nav {
    padding-right: 0!important;
    padding-top: 6px!important;
    margin-right: 0!important;
    margin-left: 0!important;      
  }

.navbar-toggler {
  outline: none!important;
  box-shadow: none;
}
.navbar-toggler button {
  outline: none!important;
  box-shadow: none;
}
.navbar-toggler-icon {
  margin-right: 70px!important;
  outline: none!important;
  box-shadow: none;
}
.navbar-toggler-icon:focus {
  outline: none!important;
  box-shadow: none;
}

.navbar-toggler-icon:focus, .navbar-toggler-icon:active {
  outline: none!important;
  box-shadow: none;
}

.navbar-toggler button:focus {
  outline: none!important;
  box-shadow: none;
}

.social-icons {
display:none;
}

.social-icons-footer {
display:block;
}

.search-and-phone {
display:none;
}

.search-and-phone-in-nav {
display:block;
}

.logodiv {
z-index: 1000;
width:68px;
height: 106px;
position: absolute;
border: none!important;
outline: none;
top:0!important;
right:10px!important;  /* for arabic RTL direction   */
padding:0px!important;
opacity: 0.9;
}

.logodiv:hover {
  opacity: 1;
}

.logodiv img {
  width:100%;
  height: 106px;
  right:0!important; /* for arabic RTL direction   */
  transition: all 3s;
}
.logodiv:hover img {
transform:scale(1.1);
}


/* End logo design */

.navbar-light .navbar-nav .nav-link {
font-size: 1em!important;
}

.search-container {
right:0;  /* for arabic RTL direction   */
top:140px;
      }

.w-100 {
padding-right: 0 !important;
padding-left:  0 !important;
}

.maincarousel .ccp {
  width: 6%;
}

.maincarousel .carousel-inner {
height:250px !important;
}

.maincarousel .carousel-item  {
height:250px !important;
}

.maincarousel .carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    height:250px !important;
}

/* START  ourcompany  */

.ourcompany {
  padding:20px 5px 20px 5px!important;
  }

  .ourcompany .carousel-inner {
  height: 500px!important;
    }
    .ourcompany h2 {
    font-size: 1.2em;
    padding: 4px;
    margin-bottom: 6px;
        }

.ourcompany p {
font-size: 0.9em!important;
text-align: justify;
      }

      /* about */
      .aboutcontainer {
        overflow: hidden!important;
      }

/* End  ourcompany  */

#media #media-flters li {
  font-size: 0.8em!important;
margin: 2px 2px 2px 2px;
font-size:0.8em;
 padding: 4px 10px;
 width:120px;
}

#media .media-item .media-info p {
  font-size:0.7em;
}

/* product table */

#dtBasicExample {

}

#dtBasicExample th {
  font-size: 0.7em!important;
  font-weight: bold;
}

#dtBasicExample td {
  font-size: 0.7em!important;
}

/* products table */

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  position: relative;
  right:0!important;   /* for arabic RTL direction   */
  font-size: 0.8em!important;
  overflow: scroll;
}

 }                           /* end small screens */
/***************************************************************************/

@media (min-width:576px) {       /* start small screens */

  .navbar-nav .nav-item {
    font-size: 0.9em!important;
  }

  a.navbar-brand {
  font-size: 0.6em;
       }
  .navbar-brand span {
      display: block;
      font-size: 0.5em;
  }

  
    /* start logo design */
  
    .navbar-nav {
      padding-right: 0!important;
      padding-top: 6px!important;
      margin-right: 0!important;
      margin-left: 0!important;      
    }
  
    .top-header {
        padding-right: 90px;
    }
  
    .social-icons {
        display:block;
    }
  
    .social-icons-footer {
        display:none;
    }
    
    .search-and-phone {
      display:block;
    }
    
    .search-and-phone-in-nav {
      display:none;
    }
    
    .navbar-toggler-icon {
      margin-right:90px!important;   /* for arabic RTL direction   */
      outline: none!important;
      box-shadow: none;
    }
    
    .logodiv {
    z-index: 1000;
    width:78px;
    height: 126px;
    position: absolute;
    border: none!important;
    outline: none;
    top:0!important;
    right:16px!important;   /* for arabic RTL direction   */
    padding:0 !important;
    opacity: 0.9;
    }
    
    .logodiv:hover {
      opacity: 1;
    }
  
    .logodiv img {
      width:100%;
      height: 126px;
      right:0!important;  /* for arabic RTL direction   */
      transition: all 2s;
    }
  
    .logodiv:hover img {
      transform:scale(1.1);
    }
  
    /* End logo design */


  .search-container {
  right:0;   /* for arabic RTL direction   */
  top:140px;
        }

  .w-100 {
  padding-right: 0 !important;
  padding-left:  0 !important;
  }

  .maincarousel .ccp {
    width: 6%;
  }

  .maincarousel .carousel-inner {
  height:250px !important;
  }

  .maincarousel .carousel-item  {
  height:250px !important;
  }

  .maincarousel .carousel-item img {
      position: absolute;
      top: 0;
      left: 0;
      height:250px !important;
  }

  #media #media-flters li {
  margin: 2px 2px 2px 2px;
  font-size:0.8em;
   padding: 4px 12px;
   width:120px;
  }

  #media .media-item .media-info p {
    font-size:0.8em;
  }

  /* START  ourcompany  */

  .ourcompany {
    padding:20px 5px 20px 5px!important;
    }

    .ourcompany .carousel-inner {
    height: 500px!important;
      }
      .ourcompany h2 {
      font-size: 1.2em;
      padding: 4px;
      margin-bottom: 6px;
          }

  .ourcompany p {
  font-size: 0.9em!important;
  text-align: justify;
        }

  /* End  ourcompany  */

  #media #media-flters {

  }

  /* product table */

  #dtBasicExample {

  }

  #dtBasicExample th {
    font-size: 0.7em!important;
    font-weight: bold;
  }

  #dtBasicExample td {
    font-size: 0.7em!important;
  }

  /* products table */

  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    position: relative;
    right:0!important;    /* for arabic RTL direction   */
    font-size: 0.8em!important;
  }


}
/*****************************************************************************/

@media only screen and (min-width: 768px) {       /* start medium screens */

  .navbar-light .navbar-nav .nav-link {
  font-size:0.8em!important;
  font-style:normal;
    padding: 1rem 0.4rem;  /* for arabic RTL direction   */
  }
  .dropdown-menu  .col-12 .img-fluid {
 height: 300px!important;
    }

  /* start logo design */

  .navbar-nav {
    padding-right: 100px!important;  /* for arabic RTL direction   */
  }

  .top-header {
      padding-right: 100px;   /* for arabic RTL direction   */
  }


  .social-icons {
      display:block;
  }

  .social-icons-footer {
  display:none;
  }
  .search-and-phone {
    display:block;
  }
  .search-and-phone-in-nav {
    display:none;
  }
  
  .logodiv {
  z-index: 1000;
  width:88px;
  height: 142px;
  position: absolute;
  border: none!important;
  outline: none;
  top:0!important;
  right:16px!important;   /* for arabic RTL direction   */
  padding:0 !important;
  opacity: 0.9;
  }

  .logodiv img {
    width:100%;
    height: 142px;
    right:0!important;   /* for arabic RTL direction   */
    transition: all 2s;
  }
  .logodiv:hover {
    opacity: 1;
  }
  .logodiv:hover img {
    transform:scale(1.1);
  }

  /* End logo design */

  .search-container {
  right:100px;    /* for arabic RTL direction   */
  width:80%;
        }

.w-100 {
padding-right: 0 !important;
padding-left:  0 !important;
}

.maincarousel .ccp {
  width: 8%;
}

.maincarousel .carousel-inner {
height:450px !important;
}

.maincarousel .carousel-item  {
height:450px !important;
}

.maincarousel .carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    height:450px !important;
}

#media .media-item .media-info p {
  font-size:0.8em;
}

/* product table */

#dtBasicExample {

}
#dtBasicExample th {
  font-size: 0.8em!important;
  font-weight: bold;
}
#dtBasicExample td {
  font-size: 0.8em!important;
}


/* products table */
#products {
text-align: right!important;    /* for arabic RTL direction   */
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  position: relative;
  right:0!important;    /* for arabic RTL direction   */
  font-size: 0.8em!important;
}


              }

                          /* end medium screens */
/***************************************************************************/

@media only screen and (min-width: 992px) { /* start large screens */

  .navbar-light .navbar-nav .nav-link {
  font-size:1em!important;
  font-style:normal;
  padding: 1rem 0.6rem;  /* for arabic RTL direction   */
  }
  
  

.w-100 {
padding-right: 7.5% !important;
padding-left:  7.5% !important;
}

.maincarousel .ccp {
  width: 12%;
}

.aboutcontainer .structureimg {
right: 20%;    /* for arabic RTL direction   */
  }

 }                          /* end large screens */
/***************************************************************************/

@media only screen and (min-width: 1200px) { /* start Extra large screens */


 }                           /* End Extra large screens */
