*{
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  box-sizing: border-box;
}
@font-face{
  font-family: 'Lemon Tuesday';
  src: url('../../assets/font/LemonTuesday.otf') format('truetype');
}
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Raleway:wght@300&display=swap');
body {
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

.grid-container{
  margin-top: 5rem;
}
.myid{
  margin-top: 7.1rem;

}
#activedropdown{
	background-color: #0c7451;
	border-radius: 0;
}
.shop{
	background-color: #135c40;
	border: 2px solid rgb(255, 255, 255);
	border-radius: 5px;
  
  }


.highlight{
  color: #0c7451;
  text-shadow: 3px 3px 7px #fff;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: 'Raleway', sans-serif;
}

/*product title*/
.prodtitle{
  position: absolute;
  font-family: 'Lemon Tuesday';
  font-size: 3.8rem;
  margin-top: 3rem;
  margin-left: 5rem;
  color: #0a7350;
}

.prodtitlee{
position: absolute;
font-family: 'Lemon Tuesday';
font-size: 3.8rem;
margin-top: 3rem;
margin-left: 5rem;
color: #0a7350;
}


/*===================BANNER=================*/
.myid h2{
  line-height: 1px;
  background-color: #bdf3bb;
  font-size: 3.8rem;
  color: #0c7451;
  font-family: 'Lemon Tuesday';
  text-shadow: 5px 5px 7px #fff;
}
.myid p{
color: #0c7451;
font-size: 1.2rem;
font-weight: bold;
background-color: #bdf3bb;
 }
 
.container1{
  position: relative;
  background-color: #065e77;
  height: 500px;
  width: 100%;
 }
.clearout{
  height: 90px;
  clear: both;
} 

 /*MY FOOTER*/
.details img{
	width: 90px;
	height: 85px;
}

.details{
  text-align: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

.details p{
font-size: 2rem;
color: #0c7451;
font-weight: bold;
}
  .details a{
  font-size: 2rem;
  color: #0c7451;
  font-weight: bold;
  text-decoration: none;
}
.details a:hover{
  color: #82b585;
  text-decoration: none;
}

.copyright{
  width: 100%;
  height: auto;
  background: linear-gradient(to right,#0a7350, #82b585);
  justify-items: center;
  justify-content: center;
  align-items: center;
  text-align: center;

}
.copyright p{
  font-size: 1.5rem;
  color: white;
}

@media screen and (max-width: 600px) {
.copyright p {
  font-size: 13px;
}
.containerf img{
	margin-top: 95%;
}
}

.copyright a{
color: #0a2e22;
font-weight: bold;
}

.copyright i{
width: 30px;
height: 30px;
color: white;
font-size: 2rem;
}

.copyright i:hover{
color: #0a7350;
}

.copyright a:hover{
color: white;
text-decoration:none;
}

/*navigation*/
/*Nav bar*/
#header a {
  color: #ffffff;
  transition: 0.5s;
  font-family: 'Raleway', sans-serif;

  }
  #header a:hover,
  #header a:active,
  #header a:focus {
  color: #bdf3bb;
  outline: none;
  text-decoration: none;
  }
  
  #header p {
  padding: 0;
  margin: 0 0 30px 0;
  }
  
  #header h1,
  #header h2,
  #header h3,
  #header h4,
  #header h5,
  #header h6 {
  font-weight: 400;
  margin: 0 0 20px 0;
  padding: 0;
  }
  
  /* Back to top button */
  
  .back-to-top {
    position: fixed;
    display: none;
    background: #0c7451;
    color: #fff;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 1;
    font-size: 16px;
    border-radius: 50%;
    right: 15px;
    bottom: 15px;
    transition: background 0.5s;
    z-index: 11;
    }
    
    .back-to-top i {
    padding-top: 12px;
    color: #fff;
    }
  
  /*--------------------------------------------------------------
  # Top Bar
  --------------------------------------------------------------*/
  
 
#topbar {
padding: 0 0 10px 0;
font-size: 14px;
transition: all 0.5s;
}

#topbar .social-links {
text-align: right;
}

#topbar .social-links a {
  margin-top: 5px;
color: #ffffff;
padding: 4px 12px;
display: inline-block;
line-height: 1px;
}

#topbar .social-links a:hover {
color: #0c7451;
}

#topbar .social-links a:first-child {
border-left: 0;
}

  /*--------------------------------------------------------------
  # Header
  --------------------------------------------------------------*/
  
  #header {
    height: 95px;
    transition: all 0.5s;
    z-index: 997;
    transition: all 0.5s;
    padding: -8px 0;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    transition: all 0.5s;
    z-index: 997;
  border:none;
    background: linear-gradient(to right,#0a7350, #82b585);
    font-family: 'Raleway', sans-serif;
    
    }
    
    #header.header-scrolled,
    #header.header-pages {
    height: 70px;
    padding: 15px 0;
    background-color: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3);
    }
    
    #header.header-scrolled #topbar,
    #header.header-pages #topbar {
    display: none;
    }
    
    #header .logo h1 {
    font-size: 36px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    }
    
    #header .logo h1 a,
    #header .logo h1 a:hover {
    color: #413e66;
    text-decoration: none;
    }
   #header .logo img {
    padding: 0;
    margin: -25px 0;
    max-height: 80px;
    
    }
  
    
    .main-pages {
    margin-top: 60px;
    }
    
  
  /*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
  
  /* Desktop Navigation */

  #activedropdown{
    background-color: #0c7451;
    border-radius: 0;
  }

  .shop{
    background-color: #135c40;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 5px;
    
    }
  
  .main-nav,
  .main-nav * {
  margin: 0;
  padding: 0;
  list-style: none;
  }
  
  .main-nav > ul > li {
  position: relative;
  white-space: nowrap;
  float: left;
  font-family: 'Raleway', sans-serif;
  }
  
  .main-nav a {
  display: block;
  position: relative;
  color: #413e66;
  padding: 10px 15px;
  transition: 0.3s;
  font-size: 14px;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  text-decoration: none;


  }
  
  .main-nav a:hover,
  .main-nav .active > a,
  .main-nav li:hover > a {
  color: #9ffa8d;;
  text-decoration: none;
  }
  
  .main-nav .drop-down ul {
  display: block;
  position: absolute;
  left: 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: linear-gradient(to right,#0a7350, #82b585);
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: ease all 0.3s;
  font-family: 'Raleway', sans-serif;
  }
  
  .main-nav .drop-down:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
  
  }
  
  .main-nav .drop-down li {
  min-width: 180px;
  position: relative;
  font-family: 'Raleway', sans-serif;

  }
  
  .main-nav .drop-down ul a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #065e77;
  font-family: 'Raleway', sans-serif;

  }
  
  .main-nav .drop-down ul a:hover,
  .main-nav .drop-down ul .active > a,
  .main-nav .drop-down ul li:hover > a {
  color: #1bb1dc;
  }
  
  .main-nav .drop-down > a:after {
  content: "\f107";
  font-family: FontAwesome;
  padding-left: 10px;
  }
  
  .main-nav .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
  }
  
  .main-nav .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  }
  
  .main-nav .drop-down .drop-down > a {
  padding-right: 35px;
  }
  
  .main-nav .drop-down .drop-down > a:after {
  content: "\f105";
  position: absolute;
  right: 15px;
  }
  
  /* Mobile Navigation */
  
  .mobile-nav {
  position: fixed;
  top:90px;
  bottom: 0;
  z-index: 9999;
  overflow-y: auto;
  left: -260px;
  width: 260px;
  padding-top: 25px;
  background: rgba(47, 88, 59, 0.582);
  transition: 0.4s;
text-align: center;
  }
  
  .mobile-nav * {
  margin: 0;
  padding: 0;
  list-style: none;

  }
  
  .mobile-nav a {
  display: block;
  position: relative;
  color: #fff;
  padding: 10px 40px;
  font-weight: 600;
  font-size: 1.5rem;

  }

  .mobile-nav a:hover,
  .mobile-nav .active > a,
  .mobile-nav li:hover > a {
  color: #9ffa8d;
  text-decoration: none;
  }
  
  .mobile-nav .drop-down > a:after {
  content: "\f078";
  font-family: FontAwesome;
  padding-left: 10px;
  position: absolute;
  right: 15px;
  text-decoration: none;

  }
  
  .mobile-nav .active.drop-down > a:after {
  content: "\f077";
  }
  
  .mobile-nav .drop-down > a {
  padding-right: 35px;
  }
  
  .mobile-nav .drop-down ul {
  display: none;
  overflow: hidden;
  text-decoration: none;

  }
  
  .mobile-nav .drop-down li {
  padding-left: 20px;
  }
  
  .mobile-nav-toggle {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9998;
  border: 0;
  background: none;
  font-size: 24px;
  transition: all 0.4s;
  outline: none !important;
  line-height: 1;
  cursor: pointer;
  text-align: right;
  }
  
  .mobile-nav-toggle i {
  margin: 30px 18px 0 0;
  color: white;
  }
  
  .mobile-nav-overly {
  width: 100%;
  height: 100%;
  z-index: 9997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(47, 70, 38, 0.8);
  overflow: hidden;
  display: none;
  margin-top: 90px;

  }
  
  .mobile-nav-active {
  overflow: hidden;
  }
  
  .mobile-nav-active .mobile-nav {
  left: 0;
  }
  
  .mobile-nav-active .mobile-nav-toggle i {
  color: #fff;
  }

   /*--------------------------------------------------------------
   # Responsive Media Queries
   --------------------------------------------------------------*/
 
   @media (min-width: 991px) {
    #call-to-action .cta-btn-container {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: end;
      -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
      justify-content: flex-end;
    }
    }
  
    
    @media (max-width: 991px) {
    #topbar {
      display: none;
    }
    
    #header {
      height: 90px;
      padding: 30px 0;
    }
    #header .logo img{
      height: 80px;
    
      }
    #header .logo h1 {
      font-size: 28px;
      padding: 8px 0;
    }
    
  
    }
    
    @media (max-width: 768px) {
    .back-to-top {
      bottom: 15px;
    }
    
    #faq #faq-list a {
      font-size: 18px;
    }
    
    #faq #faq-list i {
      top: 13px;
    }
    }
    
    @media (max-width: 767px) {
    
    .section-header p {
      width: 100%;
    }
    
    }
/* Product item hover */

.product-item:hover{
  color: #000;
}
.product-item-title h2{
  color: #0a7350;
  font-size: 2.5rem;
  font-weight: bolder; 
}
.product-item-category p{
  color: #0a7350;
  font-size: 2rem;
  text-align: justify;
 }
.grid { display: grid; }

   /*div class for Divider, Trays, Totebox and Monoblocks*/
.grid-x-wrapperfourbyfour{
  max-width:95%; 
  align-items: right;
  justify-content: center;
  text-align: center;
  margin: 0  auto;
  display: flex;
  padding: 2px;
  margin-top: 5rem;
}
    
/*Div class for crate covers*/
.grid-x-wrapper-cratecovers {
  max-width: 55%; 
  align-items: right;
  justify-content: center;
  text-align: center;
  margin: 0  auto;
  display: flex;
  padding: 2px;
  margin-top: -3rem;
}

/*Div class for Pallet, Tumblers, Hangers, Trashbins, Crates and Covers and School Furniture*/
  .grid-x-wrapper {
  max-width: 83%; 
  align-items: right;
  justify-content: center;
  text-align: center;
  margin: 0  auto;
  display: flex;
  padding: 2px;
  margin-top: 5rem;
}
     
@media screen and (max-width: 600px) {
.grid-x-wrapper {
   display: block;
   margin-top: 3rem;
}
.grid-x-wrapperfourbyfour{
  max-width:80%; 
  display: block;
  margin-top: 3rem;
}

.grid-x-wrapper-cratecovers {
max-width: 80%; 
display: block;
margin-top: 3rem;
}
}
 



@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;700&display=swap');

body { background: #f4f6f9; }
a:focus,
a:hover {color: #000;}

/* Products */

.product-item .product-item-content { 
  display: block; 
  position: relative; 
  transition: all .3s cubic-bezier(.785,.135,.15,.86); }
.product-item {
  display: block;
  text-align: center;
  color: #000;
  padding: 2rem;
  overflow: hidden;
  margin-bottom: 1rem;
  margin: 20px 0;
  border-radius: 7px;
  transform:scale(0.97,0.97);
  transition: all .17s cubic-bezier(0.24, 0.71, 0.58, 0.57);
}
.product-item:hover {
  box-shadow: 0 0px 50px -10px rgba(0,0,0,0.3); 
  transform:scale(1,1);
}

.product-item:hover .product-item-image { 
    transition-delay: .2s; 
    -ms-transform: scale(.8) translateY(-15%); 
    transform: scale(.8) translateY(-15%); }

.product-item .product-item-image { 
  display: block; position: relative; 
  margin-bottom: 2rem; transform: translate3d(0,0,0); 
  transition: all .1s cubic-bezier(.68,-.55,.265,1.55);  
}
.product-item .product-item-image img { 
  border-radius:1px; 
  position: relative; z-index: 3;  
}

.product-item:hover .product-item-image-hover { 
  transition-delay: .1s;
  -ms-transform: translate(-50%,-42%) scale(.85);
  transform: translate(-50%,-42%) scale(.85); 
}

.product-item .product-item-image-hover { 
  position: relative; z-index: 2; width: 100%; 
  height: 100%;
   background: #0a7350; background: -moz-linear-gradient(135deg,  #bdf3bb 0%,#0a7350   100%); 
  background: -webkit-linear-gradient(135deg,  #bdf3bb 0%,#0a7350   100%); 
  background: linear-gradient(135deg,  #bdf3bb 0%,#0a7350    100%); 
  border-top-left-radius: 50% 25%;
  border-top-right-radius: 1em 3em;
  border-bottom-right-radius: 50% 25%;
  border-bottom-left-radius: 1em 3em;
  -ms-transform: translate(-50%,-120%) scale(0); 
  transform: translate(-50%,-120%) scale(0); position: absolute; 
  top: 50%; left: 50%;
   transition: all .6s cubic-bezier(.68,-.55,.265,1.55); opacity: 0;
   visibility: hidden;}
.product-item:hover .product-item-image-hover { 
  opacity: 1; visibility: visible;
}
    
.product-item:hover .product-item-category { 
  transition-delay: .3s; 
}
    
.product-item:hover .product-item-category, .product-item:hover .product-item-price, .product-item:hover .product-item-title { -ms-transform: translateY(-50px); transform: translateY(-50px); }
.product-item .product-item-category, .product-item .product-item-price, .product-item .product-item-title { 
  transition: all .3s cubic-bezier(.785,.135,.15,.86); 
}

.product-item .product-item-category { 
  font-size: .875rem; 
}
.product-item:hover .product-item-title { 
  transition-delay: .4s; 
}
.product-item:hover .product-item-category,
.product-item:hover .product-item-price,
.product-item:hover .product-item-title { 
  -ms-transform: translateY(-50px);
   transform: translateY(-50px); 
  }

.product-item .product-item-category,
.product-item .product-item-price,
.product-item .product-item-title { 
  transition: all .3s cubic-bezier(.785,.135,.15,.86); 
}
.product-item .product-item-title { 
  font-size: 1.125rem; font-weight: 600; 
}

.product-item:hover .product-item-price { 
  transition-delay: .5s; 
}
.product-item:hover .product-item-category,
.product-item:hover .product-item-price,
.product-item:hover .product-item-title { 
  -ms-transform: translateY(-50px);
   transform: translateY(-50px); 
  }
.product-item .product-item-category,
.product-item .product-item-price,
.product-item .product-item-title { 
  transition: all .3s cubic-bezier(.785,.135,.15,.86);
 }
.product-item .product-item-price { 
  font-size: 8rem; 
}
.product-item:hover .button-pill { 
  transition-delay: .12s; 
}
.product-item:hover .button-pill {
  opacity: 1;-ms-transform: translateY(5px) translateX(-50%);
  transform: translateY(5px) translateX(-50%);}
.product-item .button-pill { position: relative;
  bottom: 0; font-family: 'Raleway', sans-serif;
  left:50%; -ms-transform: translateY(30px) translateX(-50%);
  transform: translateY(30px) translateX(-50%); opacity: 0;
  transition: all .5s cubic-bezier(.785,.135,.15,.86); }

.button-pill span {
  display: inline-block;position: relative;
  font-size: 1.3rem;letter-spacing: .09em; 
  background: #0c7451; background: -moz-linear-gradient(to right,135deg,  #0c7451 0%,#81b585     100%); 
  background: -webkit-linear-gradient(135deg,  #0c7451 0%,#81b585   100%); 
  background: linear-gradient(135deg, #0c7451 0%,#81b585     100%); 
  color: #fff; font-weight: bold;
  border-radius: 6px;padding-top: .6rem;padding-bottom: .6rem;padding-left: 2.1rem;
  padding-right: 2.1rem;
  box-shadow: 0 14px 25px 0px rgba(75,204,140,0.1); transition: all .37s ease;
}

.button-pill:hover span {display: inline-block;position: relative;font-size: 1.3rem;letter-spacing: .09em;
   background: #0c7451; background: #81b585;
    background: -webkit-linear-gradient(to right,#0c7451 0%,#81b585 135deg,  #0c7451 0%,#81b585    100%);
     background: linear-gradient(135deg, #0c7451 0%,#81b585     100%); color: #fff;
     border-radius: 6px;
     padding-top: .6rem;
     padding-bottom: .6rem;padding-left: 2.1rem;
     padding-right: 2.1rem; 
     box-shadow: 0 14px 25px 0px rgba(0,0,0,0.1);
    }
/* BUTTON FOR FEATURE
    .product-item:hover .button-pill2 { transition-delay: .9s; }
    .product-item:hover .button-pill2 {opacity: 1;  position: absolute; -ms-transform:  translateX(-50%);transform: translateY(6px) translateX(-50%);}
    .product-item .button-pill2 { position: absolute; bottom: 0; right: 5%; -ms-transform: translateY(30px) translateX(-50%); transform: translateY(40px) translateX(-50%); opacity: 0; transition: all .3s cubic-bezier(.785,.135,.15,.86); }
    .button-pill2 .spann {display: inline-block;position: relative;font-size: 1.3rem;font-weight: 600;letter-spacing: .09em;text-transform: uppercase;  background: #0a7350; background: -moz-linear-gradient(135deg,  #0a7350 0%,#eddc97    100%); background: -webkit-linear-gradient(135deg,  #0a7350 0%,#0f772e    100%); background: linear-gradient(135deg,  #0a7350 0%,#eddc97    100%); color: #fff; font-weight: bold;border-radius: 1.5rem;padding-top: .6rem;padding-bottom: .6rem;padding-left: 2.1rem;padding-right: 2.1rem;box-shadow: 0 14px 25px 0px rgba(75,204,140,0.1); transition: all .37 ease; }
    .button-pill2:hover .spann {display: inline-block;position: relative;font-size: 1.3rem;font-weight: bold;letter-spacing: .09em;text-transform: uppercase;  background: #5f5f5f; background: #0a7350; background: -webkit-linear-gradient(135deg,  #5f5f5f 0%,#0a7350    100%); background: linear-gradient(135deg,  #5f5f5f 0%,#0a7350    100%); color: #fff;border-radius: 1.5rem;padding-top: .6rem;padding-bottom: .6rem;padding-left: 2.1rem;padding-right: 2.1rem; box-shadow: 0 14px 25px 0px rgba(0,0,0,0.1);}
   
*/   
    @media(min-width:1200px) and (max-width:1366px) {
     .button-pill {width: 100%;}
     .button-pill2 {width: 100%;}
        .product-box {padding: 0 10px;}
        
    }
    @media(min-width:1024px) and (max-width:1200px) {
        .product-item .product-item-title {font-size: 0.888rem;}
        .product-item .product-item-price {font-size: 0.788rem; padding: 7px 0 0;}
        .product-box {padding: 0 7px;}
    }
    
 
    /*Carousel*/
    *{
      box-sizing: border-box;
    }
    body {
      font-family: 'Raleway', sans-serif;
    }
    .mySlides {display: none; margin-top: 3rem;}
    .mySlides img {vertical-align: middle; height: auto;}
    
    /* Slideshow container */
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
    }
    
    /* Caption text */
    .text {
      color: #0c7451;
      font-size: 2rem;
      font-weight: bolder;
      padding: 8px 12px;
      position: absolute;
  
      width: 100%;
      text-align: center;
    
      opacity: 3px;
    }
    
    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    
    /* The dots/bullets/indicators */
    .dot {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: transparent;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
  
    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 5s;
    }
    
    @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }
    
    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
      .text {font-size: 11px}
    }

    @media only screen and (max-width:700px)
    {
      .mySlides img{
        height: 130px;
        width: auto;
      }
      .text{
        font-size: 2rem;
      }
    }

  /*=================*hr================================*/
  .hr-theme-slash-2 {
    display: flex;
    
    
    }
    .hr-theme-slash-2 .hr-line {
      width: 100%;
      position: relative;
      margin: 20px;
      height: 2px;
      background-image: linear-gradient(to right, transparent, rgb(7, 128, 88), transparent);
    
    }
    .hr-theme-slash-2 .hr-icon {
      position: relative;
    
      color: #0a7350;
      font-size: 3rem;
    }
  
  
  
    
    .wrapper2
    {
      padding-top: 20px;
    justify-content: center;
    align-items: center;
    
    }
    .wrapper2 h3{
      color:#0a7350 ;
      font-size: 3rem;
    }
    
    .divider2
    {
      position: relative;
      margin-top: 5px;
      height: 1px;
    }
    
    .div-transparent2:before
    {
      content: "";
      position: absolute;
      top: 0;
      left: 5%;
      right: 5%;
      width: 90%;
      height: 1px;
      background-image: linear-gradient(to right, transparent, rgb(22, 122, 27), transparent);
    }
    
    .div-arrow-down2:after
    {
      content: "";
      position: absolute;
      z-index: 1;
      top: -7px;
      left: calc(50% - 7px);
      width: 14px;
      height: 14px;
      transform: rotate(45deg);
      background-color: white;
      border-bottom: 1px solid rgb(25, 66, 9);
      border-right: 1px solid rgb(11, 71, 38);
    }