#agriculture
{
  min-height: 820px;
  text-align: left;
  position: relative;
}

#agriculture .container
{
  padding-top: 2.5%;
  padding-bottom: 2.5%;
}

#agriculture h2
{
  font-size: 42px;
}

#agriculture .top_image
{
  background-image: url("../res/images/img11.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  background-position: 0;
  min-height: 280px;
  width: 100%;
}

#agriculture .display
{
  text-align: left;
}

#agriculture .data
{
  height: 280px;
  display: flex;
  flex-direction:row;
  justify-content: center;
  background-color: var(--green_light-color);
}

#agriculture .data .box
{
  background: white;
  margin-left: 2%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 10%;
  border: solid white 2px;
  border-radius: 20px;
}

#agriculture .data .box p
{
  color: var(--green_light-color);
}

#agriculture .info
{
  text-align: left;
}

#agriculture .products
{
  height: 280px;
  padding-top: 0%;
  display: flex;
  flex-direction:row;
  justify-content: center;
}

#agriculture .products .box
{
  background: white;
  margin-left: 2%;
  width: 15%;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: solid #00000020 2px;
  border-radius: 8px;
}

#agriculture .img_1
{
  background-image: url("../res/images/oil_seeds.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  background-position: -20;
  height: 80%;
}

#agriculture .img_2
{
  background-image: url("../res/images/gumarabic.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  background-position: -20;
  height: 80%;
}

#agriculture .img_3
{
  background-image: url("../res/images/baobab.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  background-position: -20;
  height: 80%;
}
#agriculture .img_4
{
  background-image: url("../res/images/hibiscus.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  background-position: -20;
  height: 80%;
}
#agriculture .img_5
{
  background-image: url("../res/images/dried_fruit.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  background-position: -20;
  height: 80%;
}
#agriculture .img_6
{
  background-image: url("../res/images/peanut_butter.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  background-position: 0;
  height: 80%;
}
#agriculture .img_7
{
  background-image: url("../res/images/nuts.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  background-position: -20;
  height: 80%;
}

#animal_products
{
  height: 420px;
  z-index: 3;
  position: relative;
  width: 100%;
  padding-bottom: 3%;
  color: var(--light-color);
  overflow: hidden;
  background-image: url("../res/images/back5.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0;
  background-attachment: fixed;
}

#animal_products p
{
  color: var(--light-color);
}

#animal_products h2
{
  color: var(--light-color);
}

#animal_products a
{
  background-color: var(--yellow_light-color);
  width: 20%;
}

#animal_products .container
{
  width: 90%;
  height: 80%;
  position: absolute;
  overflow: hidden;
  padding-top: 3%;
  padding-bottom: 3%;
  background: #00000090;
  text-align: left;
}

#animal_products .container .text
{
  width: 40%;
  float: left;
}

#animal_products .container .text h2
{
  font-size: 48px;
}

#animal_products .container .data
{
  width: 40%;
  padding-top: 2.5%;
  float: right;
}

#animal_products .container .data h2
{
  font-size: 32px;
}

#consulting
{
  height: 520px;
  text-align: left;
  display: flex;
  position: relative;
}

#consulting .display_consulting
{
  width: 50%;
  background-image: url("../res/images/back6.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100%;
  background-position: 0;
}

#consulting .container
{
  width: 40%;
  height: 100%;
}

#consulting .container .text
{
  width: 90%;
  text-align: left;
  color: var(--dark-color);
}

#consulting .container .text h2
{
  font-size: 48px;
  color: var(--dark-color);

}

#consulting .container .data
{
  width: 90%;
  text-align: left;
}

#tourism
{
  height: 520px;
  text-align: left;
  display: flex;
  flex-direction: row-reverse;
  position: relative;
}

#tourism .display_tourism
{
  width: 50%;
  background-image: url("../res/images/img9.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100%;
  background-position: 0;
}

#tourism .container
{
  width: 40%;
  float: left;
  text-align: left;
}

#tourism .container .text
{
  width: 90%;
  color: var(--dark-color);
  text-align: left;
}

#tourism .container .text h2
{
  font-size: 48px;
  color: var(--dark-color);
}

#tourism .container .data
{
  width: 100%;
  text-align: left;
}

#other
{
  height: 820px;
  background: var(--light-color);
}

#other .container
{
  text-align: left
}

#other h2
{
  font-size: 48px;
  color: var(--dark-color);
  border-bottom: solid var(--dark-color) 1px;
}

#other ul
{
  padding: 0;
}

#other ul a ul
{
  padding: 5%;;
}

#other ul h2
{
  font-size: 32px;
  color:var(--light-color);
  border: 0;
}

#other ul a
{
  width: 46%;
  border-radius: 10px;
  margin: 2%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  color: var(--light-color);
  height: 30%;
  float: left;
}

#other ul a .container
{
  height: 100%;
  background: #00000070;
  border-radius: 10px;
  z-index: 4;
}

a i
{
  color: rgba(255, 255, 255, 0.6);
  position: absolute;
  border: 2px solid var(--green_light-color);
  border-radius: 10px;
  padding: 1%;
  height: 10%;
  color: var(--light-color);
  width: 10%;
  top: 43%;
  font-family: medium;
  font-style: normal;
  left: 43%;
  background: var(--green_light-color);
  text-align: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s;
}

#other ul a::before
{
  position: absolute;
  border-radius: 10px;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0.35;
  transition: opacity 0.5s;
}
#other a:hover i,
#other ul a:hover::before
{
  opacity: 1;
}


#other #energy
{
  background-image: url("../res/images/energy.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0;
}

#other #mining
{
  background-image: url("../res/images/mining.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0;
}

#other #engineering
{
  background-image: url("../res/images/engineering.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0;
}

#other #medical
{
  background-image: url("../res/images/medical.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0;
}

#other ul a ul
{
  list-style: disc;
}

#other ul a ul li
{
  background: none;
  float: left;
  height: 15%;
  width: 40%;
}

#other ul a ul li p
{
  margin: 0;
  color:var(--light-color)
}

@media(max-width: 1600px)
{
  #animal_products .container{height: 90%;}
}

@media(max-width: 1366px)
{
  #animal_products .container{height: 90%;}
}

@media(max-width: 1024px)
{
  #animal_products{height: 520px;}
  #animal_products .container .text{width: 60%}
  #animal_products .container .data{width: 30%}

  #tourism{height: auto; display: grid;}
  #tourism .container{width: 100%; height: 100%;}
  #consulting{height: auto; display: grid;}
  #consulting .container{width: 100%; height: 100%;}
  #consulting .display_consulting{width: 100%; height: 512px;}
  #tourism .display_tourism{width: 100%; height: 512px;}
}

@media(max-width: 800px)
{
  #animal_products .container{height: 100%;}
  #other ul h2{font-size: 24px;}
  #other ul a ul li p{font-size: 12px;}
  a i{width: 15%;}
}

@media(max-width: 740px)
{
  #agriculture .data .box{width: 90%; margin-top: 2.5%;}
  #agriculture .data{height: auto; display: grid;}
  #agriculture .data .box img{height: 64px; width: 64px; }
  #agriculture .products{height: auto; display: grid;}
  #agriculture .products .box{width: 256px; margin-top: 2.5%;height: 256px;}

  #animal_products{height: 820px;}
  #animal_products .container .text{width: 90%; padding-bottom: 2.5%;}
  #animal_products .container .data{width: 90%}

  #other ul a{width: 100%;}
  #other{height: auto; padding-bottom: 5%;}
}

@media(max-width: 480px)
{
  #animal_products{height: 660px;}
}