*{
  font-family: sans-serif;
}
body, html {
   height: 100%;
   margin: 0;
   overflow-x: hidden;
   scroll-behavior: smooth;
 }
 :target {
  scroll-margin-top: 60px; 
 }

.header-background {
   position: relative;
   min-height: 100vh;
   padding-bottom: 100px;
 }
 
 .header-background::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('images/baner.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   filter: blur(5px);
   z-index: 1;
 }

.header-background {
   position: relative;
   min-height: 100vh;
   padding-bottom: 100px;
 }
 
 .logo{
   height: 300px;
   width: 300px;
   border-radius: 50%;
   position: relative;
    z-index: 3;
 }
.title{ 
   color: rgb(255, 255, 255);
   font-size: 60px;
   position: absolute;
   z-index: 3;
   left: 15%;
   right: 15%;
}
   

#about{
 background-color: #d3ded6;
  /*background-color:rgb(242 247 199);
  background-image: url();*/
 }
 .about_section{
   width: 100%;
   height:800px;
   text-align: justify;
   padding-bottom: 10px;
   padding-top: 20px;
  
 }
 .about_text{
   padding: 20px; 
   color: #254921;  
 }
 .global{
   padding-top: 20px;
   display: flex;
   height: 300px;
 }
 .global-title h5{
   padding-top: 20px;
 }
 .global-image{
   width:50px;
   flex: 1;
   align-items: center;
 }
 .global-image img{
   width:500px;
   height:400px;
 }

 .flags-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
;
 }
 
 .flag {
   width: 80px;
   margin: 10px;
   border-radius: 10px;
 }

 .flags img{
   width:20px;
   height: 20px;
 }
 #products{
   background-color:#7c9f87;
 }
 .products-section{
   width: 100%;
   height: 400px;
   padding-top: 0px;
 }
 
 div.gallery {
   width: 100%;
   height: 100%;
 }
 
 div.responsive:hover {
   border: 1px solid #7c9f87;
 }
 
 div.gallery img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 /* div.desc {
   height: 0;
   width: 100%;
   font-size: 14px;
   position: absolute;
   overflow: hidden;
   bottom: 0;
   transition: height 0.3s ease;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #d3ded6;
   color: #7c9f87;
   font-weight: 700;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
 }
 div.responsive:hover .desc {
   height: 80px;
 }
  */
 * {
   box-sizing: border-box;
 }
 
 .responsive {
   border: 1px solid #ccc;
   width: 20%;
   flex: 1;
   /* background-color: white; */
   position: relative;
 }
 .products_wrapper{
   display: flex;
   gap: 20px;
   /* background-color: #ffffff; */
   margin: 10px 0;
 }

#vision_mission{
   background-color:rgb(255, 255, 255);
   /* display: flex; */
   /* padding-top: 30px; */
}
section {
 padding: 60px 0;
}
.vision_section{
   flex: 1;
   width: 100%;
   height: 400px;
   text-align: justify;
   padding-bottom: 10px;
   padding-top: 20px;
   color: #487c15;
   background-repeat:no-repeat;
   margin: 0px;
}
.vision-image{
   flex: 1;
   flex-direction: left;
   height: auto;
   width: auto;
 }
 .vision-image img{
   height: 200px;   
   width: 200px;
 }
 /*.vision_text{
   flex-direction: right;
   padding-left: 40px;
 */

 .vision_text {
   font-family: Arial, sans-serif;
   color: #333;
 }
 
 .title {
   font-weight: bold;
   margin-bottom: 10px;
 }
 
 .heading {
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 5px;
 }
 
 .vision {
   font-size: 16px;
   margin-bottom: 20px;
   color: #254921;
 }
 .mission {
   font-size: 16px;
   margin-bottom: 10px;
   color: #254921;
 }
 
 ul {
   list-style: none;
   padding: 0;
   margin: 0;
   color: #254921;
 }
 
 li {
   font-size: 16px;
   margin-bottom: 10px;
 }
 
#core_values{
 background-color:#7c9f87;
   display: flex;
   /* padding-top: 20px; */
   /* padding-bottom: 20px; */
   height: auto;
   column-gap: 10px;
}
.core_section{
   flex: 1;
   width: 100%;
   height: 400px;
   text-align: justify;
   /* padding-bottom: 10px; */
   /* padding-top: 20px; */
   color: #487c15;
   background-repeat:no-repeat;
   margin: 0px;
 }
 .core-image{
   flex: 1;
   flex-direction: left;
   height: auto;
   width: auto;
 }
 .core-image img{
   height: 200px;
   width: 200px;
 }
 /*.core_text{
   flex-direction: right;
   padding-left: 40px;
 }*/
 .core_text {
   font-family: Arial, sans-serif;
   color: #040404;
   /*padding: 20px;
   background-color: #f9f9f9;
   border: 1px solid #ddd;
   box-shadow: 0 0 10px rgba(0,0,0,0.1);
   width: 100%;*/
 }
 
 .core_title {
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 10px;
 }
 
 .core_list {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .core_value {
   margin-bottom: 20px;
 }
 
 .core_label {
   font-size: 18px;
   font-weight: bold;
   color: #333;
   margin-bottom: 5px;
 }
 .core_description {
   font-size: 16px;
   color: #254921;
 }
 
 #connect{
   background-color: #d3ded6;
   color: #254921;
 }
 .location{
   width: 50px;
   height: 50px;
   background-color: #ccc;
 
 }
 .social-buttons .btn {
   transition: all 0.3s ease;
   border-radius: 30px;
   padding: 10px 20px;
 }
 
 .social-buttons .btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 }
 
 .social-buttons .btn i {
   font-size: 1.2em;
 }
 
 .social-buttons .btn {
   transition: all 0.3s ease;
   border-radius: 30px;
   padding: 10px 20px;
 }
 
 .social-buttons .btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 }
 
 .social-buttons .btn i {
   font-size: 1.2em;
 }



 #vision_mission-wrapper,
 #core_values-wrapper {
   display: flex;
   gap: 40px;
   align-items: center;
 }
 h2.section-title {
   text-align: center;
   font-size: 40px;
   font-weight: 700;
   color: #000000;
 }
 h2.content-heading {
   margin-bottom: 20px;
 }
 .location-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .header-logo {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   position: absolute;
   top: 20px;
   opacity: 0;
 }
 .header-logo img {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 5px solid #7c9f87;
 }
 header nav {
   padding: 20px;
   background: #7c9f87;
   color: white;
 }
 
 header .navbar-light .navbar-nav .nav-link {
   color: white;
 }

 header .navbar-light .navbar-nav .nav-link {
   color: white;
 }
 header .navbar-light .navbar-nav .nav-item.active .nav-link,
 header .navbar-light .navbar-nav .nav-item:hover .nav-link {
   color: white;
   position: relative;
   z-index: 4;
 }
 header nav.navbar {
   padding: 0;
   position: fixed;
   width: 100%;
   z-index: 4;
 }
 header nav.navbar .nav-item {
   padding: 20px;
   position: relative;
 }
 header nav.navbar .nav-item::after {
   content: '';
   position: absolute;
   height: 0;
   width: 100%;
   background: #50874a;
   overflow: hidden;
   transition: height 0.3s ease;
   bottom: 0;
   left: 0;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
 }
 header nav.navbar .nav-item:hover::after {
   height: 100%;
 }
 header .bg-body-tertiary {
   padding-top: 120px !important;
 }
 header .navbar-collapse {
   justify-content: center;
 }
 #vision_mission {
   background-color: #d3ded6;
 }

 .copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  clear: both;
  background-color: #444;
  color: #fff;
  clear: both;
}

.copy {
  width: 500px;
  text-align: center;
  margin: 10px 0px;
  padding: 10px;
}

.docs-container {
  margin-left: auto;
  width: 200px;
}

.docs-container a {
  margin-right: 20px;
  color: #fff;
  
}

.docs-container a:last-child {
  margin-right: 0;
}
 
 
#products .show-more {
 text-align: center;
 margin-top: 30px;

}
#products .show-more a {
 color: #487c15;
 font-size: 18px;
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
 --bs-offcanvas-zindex: 1045;
 --bs-offcanvas-width: 249px;
}

.offcanvas .offcanvas-header {
 width: 100%;
}
.offcanvas .offcanvas-header img {
 display: block;
 margin: auto;
 width: 150px;
}
.offcanvas .offcanvas-body .nav-link {
 font-size: 17px;
 font-weight: 700;
 color: black;
}
.offcanvas .offcanvas-body .nav-link:hover {
 color: #02A695;
}

.nav-list {
 display: none;
}

.active-btn {
 display: flex !important;
}

.navbar .nav-list .nav-link {
 font-size: 17px;
 font-weight: 700;
 color: #000000;
}
.navbar .nav-list .nav-link:hover {
 color: #02A695;
}
.icon{
  width: 60px;
}
@media screen and (max-width: 800px) {
 .navbar .nav-list .nav-link {
   font-size: 15px;
   font-weight: 500;
 }
}
@media screen and (max-width: 686px) {
 .navbar .nav-list .nav-link {
   font-size: 13px;
   font-weight: 500;
 }

 header .ham-menu {
   padding: 30px;
   transform: scale(50%);
 }
 header .ham-menu .bar {
   width: 20px;
 }
}
@media screen and (max-width: 520px) {
 .navbar .nav-list .nav-link {
   font-size: 9px;
   font-weight: 500;
 }

 header .ham-menu {
   padding: 10px;
   transform: scale(50%);
 }
 header .ham-menu .bar {
   width: 20px;
 }
}
header .logo {
 padding: 40px;
}
header .ham-menu {
 padding: 5px;
}
header .ham-menu .menu-social {
 position: absolute;
 display: block;
 margin: auto;
}
header .ham-menu .menu-social .menu-instagram {
 margin: 23px 8px 0 2px;
 transition: 200ms;
 filter: grayscale(0.9);
 opacity: 0.5;
}
header .ham-menu .menu-social .menu-instagram:hover {
 transform: scale(105%);
 filter: grayscale(0);
 opacity: 1;
}
header .ham-menu .menu-social .menu-linkedin {
 margin: 19px 8px 0 2px;
 transition: 200ms;
 filter: grayscale(0.9);
 opacity: 0.5;
}
header .ham-menu .menu-social .menu-linkedin:hover {
 transform: scale(105%);
 filter: grayscale(0);
 opacity: 1;
}
header .ham-menu input {
 -webkit-appearance: none;
 display: none;
 visibility: hidden;
}
header .ham-menu .bar {
 display: block;
 position: relative;
 cursor: pointer;
 width: 50px;
 height: 40px;
}

header .ham-menu .bar span {
 position: absolute;
 width: 45px;
 height: 7px;
 background: white;
 border-radius: 100px;
 display: inline-block;
 transition: 0.3s ease;
 left: 0;
}
header .ham-menu .bar span.top {
 top: 0;
}
header .ham-menu .bar span.middle {
 top: 17px;
}
header .ham-menu .bar span.bottom {
 bottom: 0;
}
header .ham-menu input[type]:checked ~ span.top {
 transform: rotate(45deg);
 transform-origin: top left;
 width: 48px;
 left: 5px;
}
header .ham-menu input[type]:checked ~ span.bottom {
 transform: rotate(-45deg);
 transform-origin: top left;
 width: 48px;
 bottom: -1px;
}
header .ham-menu input[type]:checked ~ span.middle {
 transform: translateX(-20px);
 opacity: 0;
}
header .ham-active {
 position: relative;
 width: 400px;
}
header .ham-active ul {
 position: absolute;
 list-style: none;
}
header .ham-active ul li {
 display: inline-block;
}

.navbar-toggler {
 border: none !important;
}
.navbar-toggler span {
 color: black !important;
}

.mobile-menu-social .mobile-social-icon img {
 margin: 23px 8px 0 2px;
 transition: 200ms;
 filter: grayscale(0.9);
 opacity: 0.5;
}
.mobile-menu-social .mobile-social-icon img:hover {
 transform: scale(105%);
 filter: grayscale(0);
 opacity: 1;
}