@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');

  	 h1, h2, h3, h4, h5, p , td , tr  ,li{font-family: 'Montserrat', sans-serif!important;color: #000000}
  	span {font-family: 'Montserrat'!important;color:#000000!important; }
   	a {text-decoration: none!important;}
  	p{font-size: 18px}
      h1,h2,h3,h4,h5,h6 ,p{color: #D50018!important;}
  	.p-top-100{padding-top: 100px;}
  	.p-top-50{padding-top: 50px;}
  	.p-top-25{padding-top: 25px;}
  	.p-top-35{padding-top: 35px;}
  	.p-top-75{padding-top: 75px;}


  .font {font-family: 'Pacifico', cursive!important;font-weight: 200px!important;}
  .fontno {font-family: 'Montserrat', sans-serif!important;}

  	.p-bot-100{padding-bottom: 100px;}
  	.p-bot-50{padding-bottom: 50px;}
  	.p-bot-25{padding-bottom: 25px;}
  	.p-bot-35{padding-bottom: 35px;}
  	.p-bot-75{padding-bottom: 75px;}
  .navbar-default {background-color: #fff!important;border-color: #fff!important;padding-bottom: 5px;padding-top: 20px;}
  .navbar-nav li {font-family: 'Tajawal', sans-serif!important;font-size:16px;padding-right:5px;}
  .navbar-nav a {color: #D50018!important;font-size: 14px;font-family: 'Montserrat'}
  .navbar-brand {padding-right:0px;padding: 0px 0px;margin-top: 5px;margin-bottom: 5px; margin-left: 15px; }
  .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
      background-color:#D50018!important;
      color:#FFF!important;
      font-weight: 600!important;
      border-radius: 10px;
      transition: all 0.2s ease-in-out;
  }

  .brandlogo{width: 160px;padding-left: 10px;
      transition: all 0.2s ease-in-out;}
  .brandsmall{width: 180px;padding-left: 0px;
      transition: all 0.2s ease-in-out;}
  .navbar-nav a:hover {
      background-color:#D50018!important;
      color:#FFF!important;
      font-weight: 600!important;
      border-radius: 10px;
  }


  #footer {background-color: #D50018;padding-top: 15px;padding-bottom: 15px;}
  #footer a {color: #FFF;text-decoration: none;cursor: pointer;}
  #footer p {color: #FFF!important;text-decoration: none;cursor: pointer; font-size: 16px;font-weight:400!important;}

  .line {position: relative;top: -15px;font-size: 28px!important;font-family: arial!important}
  .btn-slide{position: relative;float: center;background-color: #fff;border-color: #fff;color: #D50018!important;font-weight: bold;font-size: 16px!important;}
  .btn-slide:hover{position: relative;float: center;line-height: 2em;background-color: #D50018;border-color: #D50018;color: #fff!important;font-weight: bold;font-size: 16px!important; width: 140px;}
  .btn-like{width: 160px;line-height: 1em;background-color: #FFC51E;border-color: #FFC51E;color: #404041;font-weight: bold;font-size: 18px;}
  .btn-send{position: relative;float: center;background-color: #fff;border-color: #fff;color: #D50018!important;font-size: 16px!important;}
  .btn-send:hover{position: relative;float: center;background-color: #D50018;border-color: #fff;color: #fff!important;font-size: 16px!important;}
  .btn-like:hover{width: 160px;background-color: #404041;border-color: #404041;color: #FFC51E!important;font-size: 18px;float: right;cursor: pointer;}
  #contact p{font-size: 16px;color: #000!important}

  .btn-send2{position: relative;float: center;background-color: #D50018;border-color: #D50018;color: #fff!important;font-size: 16px!important;}

  .btn-send2:hover{position: relative;float: center;background-color: #fff;border-color: #D50018;color: #D50018!important;font-size: 16px!important;}

  .sty-input{width: 100%;
    border: 1.5px solid #000;
    height: 40px;
    font-size:18px;}

  .sty-input-footer{width: 100%;
    border-color: transparent;
    background-color: #FCFAE8; 
  -moz-box-shadow: 0px 2px 0px #FFC51E;
  -webkit-box-shadow: 0px 2px 0px #FFC51E;
  box-shadow: 0px 2px 0px #FFC51E;
  height: 40px;
  font-size: 18px;
  }

  .navbar-toggle .icon-bar {background-color: #fff!important;}


  .navbar-default .navbar-toggle {background-color:#D50018 ;border-color:#D50018 ;}
  .navbar-default .navbar-toggle:hover {background-color:#000000!important;border-color:#000000!important;}

  /*.hover-sty{position: absolute;background-color: red;height: 215px;width: 90%;opacity: .5;margin-top: 35px}*/



   /*Brands*/
  h2{
    text-align:center;
    padding: 20px;
  }
  /* Slider */
  .slick-slide {
      margin: 0px 20px;
  }

  .slick-slide img {
      width: 100%;
  }

  .slick-slider
  {
      position: relative;
      display: block;
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
              user-select: none;
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }

  .slick-list
  {
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  .slick-list:focus
  {
      outline: none;
  }
  .slick-list.dragging
  {
      cursor: pointer;
      cursor: hand;
  }

  .slick-slider .slick-track,
  .slick-slider .slick-list
  {
      -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }

  .slick-track
  {
      position: relative;
      top: 0;
      left: 0;
      display: block;
  }
  .slick-track:before,
  .slick-track:after
  {
      display: table;
      content: '';
  }
  .slick-track:after
  {
      clear: both;
  }
  .slick-loading .slick-track
  {
      visibility: hidden;
  }

  .slick-slide
  {
      display: none;
      float: left;
      min-height: 1px;
  }
  [dir='rtl'] .slick-slide
  {
      float: right;
  }
  .slick-slide img
  {
      display: block;
  }
  .slick-slide.slick-loading img
  {
      display: none;
  }
  .slick-slide.dragging img
  {
      pointer-events: none;
  }
  .slick-initialized .slick-slide
  {
      display: block;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
      height: auto;
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  } 

  /*End Brands*/


  .hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, .3)), url("../../img/about.jpg");

    /* Set a specific height */
    height: 50%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .hero-image-farms {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, .3)), url("../../img/farms.jpg");
    /* Set a specific height */
  min-height: 500px;


    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }


  .hero-image-aboutt {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    /* Set a specific height */

  min-height: 600px;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }


  .hero-image-about {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),url("../../img/b1.jpg");
    /* Set a specific height */

  min-height: 1250px;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }



  .hero-image-packing_facilities {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),url("../../img/b2.jpg");

    /* Set a specific height */
    min-height: 450px;


    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }

  .hero-image-packing_facilitiess {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),url("../../img/b2.jpg");

    /* Set a specific height */
    min-height: 650px;
    

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }

  .hero-image-certificates {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(000, 000, 000, .5), rgba(000, 000, 000, .5)), url("../../img/@/welcome.jpg");
    /* Set a specific height */
    /*height: 50%;*/
    min-height: 700px;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }


  .hero-image-contact {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */

    /* Set a specific height */
    /*height: 50%;*/

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }


  .hero-image-pro {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */


    min-height: 500px;
    /* Set a specific height */
    /*height: 100%;*/

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }

  .hero-image-quality {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../img/quality.jpg");

    /* Set a specific height */
    min-height: 500px;


    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  /* Place text in the middle of the image */
  .hero-text{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white!important;
    line-height: 2em!important;
  }

  .hero-text h1 , .hero-text p{
    text-align: center;
    color: white!important;
  }


  .fa {
    padding: 10px 5px 10px 10px;
    font-size: 22px!important;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
  }

  .logoo{padding: 10px 10px 10px 10px;}

    #wowslider-container1 .ws-title div, #wowslider-container1 .ws-title span {font-size: 3.6em;color:#fff!important;line-height: 1.3em;background-color:transparent;border-radius: 15px;font-weight: bold;}


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

    #wowslider-container1 .ws-title div, #wowslider-container1 .ws-title span {font-size: 2.2em;}



    .fa {
    padding: 10px 2px 2px 2px;
    font-size: 22px!important;
    text-align: center;
    text-decoration: none;
    margin: 2px 2px;
  }


  .hero-text{
    text-align: center;
    position: absolute;
    top: 20%;
    left: 20%;
    transform: translate(-15%, -15%);
    color: white!important;
  }

  .logoo{padding: 5px 5px 5px 5px;}


  .hero-text h1 , .hero-text h2 , .hero-text h4{
    text-align: center;
    color: white!important;
  }

  .h1, .h2, .h3, h1, h2, h3 {
      margin-top: 10px!important;
      margin-bottom: 20px!important;
      /*padding: 5px!important;*/
  }

  }



  .white h1{color: #D50018!important;}



    /*Soical Media*/


  /* Style all font awesome icons */


  .fa:hover {
      opacity: 0.7;

  }

  .fa-facebook {
    color: #3B5998!important;

  }

  .fa-twitter {
    color: #55ACEE!important;
  }

  .fa-google {
    color: #dd4b39!important;
  }

  .fa-linkedin {
    color: #007bb5!important;
  }

  .fa-youtube {
    color: #bb0000!important;
  }

  .fa-instagram {
   color: rgb(205, 72, 107)!important;
    /*color: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); */
  }

  .instagram {
    display: inline-block;
    width: 250px;
    height: 250px;
    text-align: center;
    border-radius: 40px;
    color: #fff;
    font-size: 220px;
    line-height: 250px;
    vertical-align: middle;
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    box-shadow: 0px 3px 10px rgba(0,0,0,.25);
  }

  .fa-pinterest {
    color: #cb2027;
  }

  .fa-snapchat-ghost {
    color: #fffc00;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  }

  .fa-skype {
    color: #00aff0;
  }



  .fa-android {
    color: #a4c639;
  }

  .fa-dribbble {
    color: #ea4c89;
  }

  .fa-vimeo {
    color: #45bbff;
  }

  .fa-tumblr {
    color: #2c4762;
  }

  .fa-vine {
    color: #00b489;
  }

  .fa-foursquare {
    color: #45bbff;
  }

  .fa-stumbleupon {
    color: #eb4924;
  }

  .fa-flickr {
    color: #f50083;
  }

  .fa-yahoo {
    color: #430297;
  }

  .fa-soundcloud {
    color: #ff5500;
  }

  .fa-reddit {
    color: #ff5700;
  }

  .fa-rss {
    color: #ff6600;
  }


  textarea:focus, input:focus{
      outline: none;
  }


  .carousel-inner .active.left { left: -33%; }
  .carousel-inner .next        { left:  33%; }
  .carousel-inner .prev        { left: -33%; }
  .carousel-control.left,.carousel-control.right {background-image:none;}

  .carousel-multi{
    .carousel-inner{
      > .item{
        transition: 500ms ease-in-out left;
        
        > .media-card{
          background: #333;
          border-right: 10px solid #fff;
          display: table-cell;
          width: 1%;

          &:last-of-type{
            border-right: none;
          }
        }
      }
      .active{
        display: table;
        &.left{
          left:-33%;
        }
        &.right{
          left:33%;
        }
      }
      .next{
        left: 33%;
      }
      .prev{
        left: -33%;
      }
      @media all and (transform-3d), (-webkit-transform-3d) {
        > .item{
          // use your favourite prefixer here
          transition: 500ms ease-in-out all;
          backface-visibility: visible;
          transform: none!important;
        }
      }
    }
  }

  .navbar-default .navbar-collapse, .navbar-default .navbar-form{border-color: transparent!important;}


  .sty-abo { background-image: linear-gradient(rgba(333, 333, 333, .6), rgba(333, 333, 333, .6)), url("../../img/b6.jpg");background-size:100% 100%;}

  /*.ws_controls {background-color:rgba(147, 192, 34, 0.3);}*/
  .ws_title span {background-color:rgba(147, 192, 34, 0.2)!important}



  .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {max-height: 100%;}


@media (max-width: 768px) {
#wowslider-container1 .ws_playpause {display: none;}
#footer p { font-size: 14px; }
.navbar-default {padding-top: 10px; padding-bottom: 0px;}
}

#wowslider-container1 .ws_bullets a {padding: 12px;}
#wowslider-container1 .ws_playpause {right: 53%;padding: 12px;}
#wowslider-container1 .ws_pause > span:before {font: 2.2em "ws-ctrl-boundary"}
#wowslider-container1 .ws_playpause > span:before {font: 2.2em "ws-ctrl-boundary"}
#wowslider-container1 .ws_bullets {margin-right: 0px;right: 45%;}

#wowslider-container1 .ws_bullets a.ws_overbull > span:after, #wowslider-container1 .ws_bullets a.ws_selbull > span:after {top: 10px;left: 10px}

.navbar-default .navbar-nav > li > a {font-weight: bold;}

.navbar-toggle {margin-top: 5px;margin-bottom: 5px;}

#banner {
  position: relative;
  width: auto;
}
#banner_wrap img {
  position: absolute;
  top: 150px;

}


.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.jumbotron{background-color: transparent!important;padding: 10px!important}

  .navbar{margin-bottom: 5px!important;}


.success tr{background-color: #d9d9d9!important}





/* NEW 2nd-Level Dropdown CSS START */
.dropdown-submenu{position: relative;}
.dropdown-submenu .caret{-webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
.dropdown-submenu > .dropdown-menu {top:0; left:100%; margin-top:-6px; margin-left:-1px;}
.dropdown-submenu.open > a:after{border-left-color:#fff;}
.dropdown-submenu.open > .dropdown-menu, .dropdown-submenu.open > .dropdown-menu {display: block;}
.dropdown-submenu .dropdown-menu{margin-bottom: 8px;}
.navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color: #f6f6f6;}
.navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#333;}
.navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a{padding-left: 30px;}
@media screen and (min-width:992px){
    .dropdown-submenu .dropdown-menu{margin-bottom: 2px;}
    .navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a{padding-left: 25px;}
    .navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#fff;}
    .navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#fff;}
}
/* NEW 2nd-Level Dropdown CSS END */


  .points {
  height: 15px;
  width: 15px;
  background-color: #D50018;
  border-radius: 50%;
  display: inline-block;
}

.nav>li>a { padding: 10px 20px; }

.dropdown-menu li>a{color: #000!important;}