h4 , h3 , p  , h5 , h1 , h2{
  color: #615f60;
}

.media-bar1 a {
  color: #ffffff !important;
}

/* Initial state for the animation */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform s ease-out;
}

/* State when element is in view */
.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}





.img-container {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* animation: pulse 2s infinite; Continuous pulse effect to catch attention */
}

/* Image Styles */
.img-container-img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease-in-out;
}

/* Overlay Box Styles */
.white-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9); /* Start scaled down */
  opacity: 0; /* Hidden by default */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Animation when container is in view */
.img-container.in-view .white-box {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1); /* Scale up to normal size */
  animation: bounce 1s ease-in-out; /* Bounce effect to attract attention */
}

/* Pulse animation to draw initial attention */
@keyframes pulse {
  0% {
      transform: scale(1);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
      transform: scale(1.05);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
  100% {
      transform: scale(1);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* Bounce animation for white box */
@keyframes bounce {
  0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
  }
  50% {
      transform: translate(-50%, -50%) scale(1.05);
      opacity: 1;
  }
  100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
  }
}










.youtube-box-small {
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  transform: scale(0.9);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.youtube-box-small.aos-animate {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.white-button {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.white-button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.bg-danger-button {
  background-color: #dc3545; /* Adjust to match your design */
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
}

.bg-danger-button:hover {
  background-color: #c82333; /* Slightly darker shade for hover effect */
}




.img-ceo-background {
  position: relative;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-ceo-background img {
  width: 100%;
  transition: transform 0.3s ease;
}

.img-ceo-background:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.img-ceo-background:hover img {
  transform: scale(1.1);
}

.team-text {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}

.With {
  font-size: 1.2rem;
  color: #666;
}



.btn-hover {
  transition: background-color 0.3s, transform 0.3s;
}

.btn-hover:hover {
  background-color: #c82333; /* Darker shade for hover effect */
  transform: scale(1.1); /* Slightly enlarges the button */
}
 
 
 .mySlides {
            display: none;
        }
        .overlay {
            position: absolute;
          
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
        }
        .button-white {
            transition: transform 0.2s ease;
        }
        .button-white:hover {
            transform: scale(1.1);
        }





.form-class label ,.form-class input  {
width: 250px;

}
.white-box {
    opacity: 60%;
}
.img-container {

    
position: relative;
text-align: center;
color: rgb(24, 1, 1);
}


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

width: 100%;
height: 400px;
}
.whatsapp_float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.whatsapp-icon {
    margin-top: 16px;
}

/* for mobile */
@media screen and (max-width: 767px) {
    .whatsapp-icon {
        margin-top: 10px;
    }

    .whatsapp_float {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 10px;
        font-size: 22px;
    }
}


.log-img-2 {
width: 140px;
height: 31px;
}

.contacts {

margin-right: 15px;
}
.green-two-box  , .footer-end , .footer h4 , .footer p   {

color: white;
}

.footer p:hover{
color: #000000 !important;
border: 2px solid black;
border-radius: 5px;
padding: 5px;
opacity: 60%;



/* display: none; */
}

.what-we-do h4 {
font-size:larger;
background-color: #ffffff;
padding-top: 5px ;
padding-bottom: 5px;
border-radius: 5px;

font-weight: 500;

/* width: 200px !important; */

}

.what-we-do  h4 {
border: 1px solid rgb(93, 91, 91);

}
.what-we-do h4:hover{

color: #fa475f;

}

.what-we-do  p {

font-size:medium;
padding-top: 5px;
}

.what-we-do img:hover {


opacity: 50%;
}


.what-we-do button:hover {

background-color: #7EA975!important;
border: 1px solid rgb(79, 79, 79) !important;

}


* {
box-sizing: border-box;
}

body {
margin: 0px !important;
padding: 0px !important;
}

.navbar1    {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
color: rgb(60, 192, 111);
}

.brand-title {
font-size: 1.5rem;
margin: .5rem;
}

.navbar-links {
height: 100%;


}

.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}

.navbar-links li {
list-style: none;
}

.navbar-links li a {
display: block;
text-decoration: none;
color: rgb(0, 0, 0);
padding: 1rem;
}

.navbar-links li:hover {
background-color: #d74141;
}

.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}

.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}


@media (min-width: 500px) and (max-width: 1000px)  {




.youtube-box-l iframe {
height: 150px;
width: 200px;


} 

.box img {
  /* width: 288px !important;   */
width: calc( 100vw - 68vw) !important;

  height: 223px !important;
 

}
.green-two-box {

  margin-right: 20px !important;
  margin-left: 20px !important;
}
.green-two-box br {
display: none !important;
}



.overlay {

left:  calc(100% - 66% ) !important;
top:  calc(100vh -  55vh)  !important;
border-radius: 15px !important;


}


}



@media (max-width: 500px) {





.what-we-do h4:hover{

color: #fa475f !important;
border: 0px solid rgb(93, 91, 91 ) !important;

}







.top-button-box {
display: flex;
justify-content: space-around;
padding-bottom: 10px;

}

.navbar1 {
  flex-direction: column;
  align-items: flex-start;
}

.toggle-button {
  display: flex;
}

.navbar-links {
  display: none;
  width: 100%;
}

.navbar-links ul {
  width: 100%;
  flex-direction: column;
}

.navbar-links ul li {
  text-align: center;
}

.navbar-links ul li a {
  padding: .5rem 1rem;
}

.navbar-links.active {
  display: flex;
}
}














/* Background Styles Only */





html {
background-color: #DFDFDF;
}

.side-links {
position: absolute;
bottom: 15px;
right: 15px;
}

.side-link {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin-bottom: 10px;
color: white;
width: 180px;
padding: 10px 0;
border-radius: 10px;
}

.side-link-youtube {
background-color: red;
}

.side-link-twitter {
background-color: #1DA1F2;
}

.side-link-github {
background-color: #6e5494;
}

.side-link-text {
margin-left: 10px;
font-size: 18px;
}

.side-link-icon {
color: white;
font-size: 30px;
}














h1,h2,h3 ,p {

  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/* hr {
  text-align: center;
  width: 150px;
  align-items: center;
} */
.social-media i {

  font-size: 25px;
  padding-top: 3px;
}
.social-media {
padding-bottom: 5px;
} 
.social-media img {
width :35px;

height: 35px;


}
body {
  margin: 0;
}
.img-ceo-background ,  .img-ceo-background img {
width: 250px;
height : 350px

}
hr {
border: 2px solid black;




}
.fa-brands {
font-size: 30px;
} 
.fa-brandss {
height: 35px;
  width: 35px;
}
/* .video-thumbnail img {

width: 400px;
height: 250px;
border-radius: 7%;

}
.video-thumbnail {
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;

&:before {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
content: "\f01d";
font-family: FontAwesome;
font-size: 100px;
color: #fff;
opacity: .8;
text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
&:hover:before {
color: #eee;
}
}


.img-ceo-background {

  width: 250px;
  height: 200px;
 position: relative;
  
}
.img-ceo img {
width: 300px;
height: 350px;
position: absolute;
bottom:15%;
} */
/* .overlay-box {
  position: absolute;
  top: 248%; 
left: 7%; 
} */
.grid {
  display: grid;
  grid-template-columns: auto ;

}
.small-red-box {
  width: 60px;height: 15px;

}
.image-box img {
width: 160px;
height: 160px;
margin: 10px;
}  
.box img {

  width: 600px;
  height: 400px;
}
.overlay {
border-radius: 14%;
  position: absolute;
top: 70%; /* Adjust this value to vertically center the text */
left: 20%; /* Adjust this value to horizontally center the text */
transform: translate(-50%, -50%); /* Center the text precisely */
background-color: #E64155; /* Set the background color with some transparency */
color: #fff; /* Set the text color */
font-size: 20px; /* Adjust the font size */
opacity: 85%;

}

.white-button {
  height: 49px;
  border-radius: 30px;
}
.navbar {
height: 40px;
} 
.logo-img {
width: 95px !important;
height: 65px !important;
padding-left: 30px !important;
}
.bg-danger-button {
background-color: #7EA975;
border-radius: 30px;
border-style: none;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
height: 40px;
line-height: 20px;
list-style: none;
margin: 0;
outline: none;
padding: 10px 16px;
position: relative;
text-align: center;
text-decoration: none;
transition: color 100ms;
vertical-align: baseline;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.bg-danger-button:hover,
.bg-danger-button:focus {
background-color: #d3152e;
}

.bg-danger-button2 {
opacity: 100% ;
background-color: #7EA975;
border-radius: 30px;
border-style: none;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
height: 40px;
line-height: 20px;
list-style: none;
margin: 0;
outline: none;
padding: 10px 16px;
position: relative;
text-align: center;
text-decoration: none;
transition: color 100ms;
vertical-align: baseline;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.bg-danger-button2:hover,
.bg-danger-button2:focus {
background-color: #d3152e;
}
.form-label {
    padding-top: 10px;
}
.centered {

    padding-top: 10% !important;
}
.button-white {

width: 113px !important ;
height: 46px !important;
padding: 15px !important;
font-size: 13px;
font-weight: 300;
}
.button-white1 {

width: 126px !important ;
height: 59px !important;
padding: 7px !important;
font-size: 16px;
background-color: #7EA975 !important;


}
body {
margin: auto !important;

}

.whatsapp_float {

  color: rgb(255, 255, 255) !important;
}
a{
  color: #000000 !important;
  text-decoration: none !important;
}


@media only screen and (max-width: 500px) {
  .contacts {

    margin-right: 0px !important;
    }

  .button-text {

    font-size: 8px !important;
  
  }
  .whatsapp_float .fa-brands {
    font-size: 22px !important;
    
  }
.block .fa-solid {
display: none !important;

}
.block  {
display: block !important;
  
}

.form-class {

    padding: 1em  !important;
    margin-left: 3em  !important;
}

.message_text_area {
height: 100px !important;


}



.p-center   {

text-align: center !important;
align-items: center  !important;

}
    
    .simpple-box h5  {
text-align: center !important;


    }
    .contact-div {

        display: block !important;
    }
    .small-text{

        font-size:larger !important;
    }
.white-box {
    padding-top: 40% !important;

 width: 50% !important; 
 height: 100% !important ;  
}

/* .img-container-img  {

    height:50% !important;
} */


.log-img-2 {

  width: 112px;
  height: 26px;
}
.logo-img {

  width: 67px !important;
  height: 46px !important;

  padding-left: 20px !important;
}
.youtube-box-l {
display: block !important;
margin-left: 50px !important;


} 
.youtube-box-small
{
margin-left:calc(100vw - 90%) !important;


}

div .pe-3 {
padding-right: 2px !important;  
font-size: 12px;
margin: 3px;

}
.main-nav button , .main-nav .bg-danger {
width: 25px;
height: 10px;
font-size: 3px !important;
} 
.main-nav img {
width: 60px !important;
height: 60px !important;
}
.mySlides  {
width: calc(100% ) !important;
height: calc(200px) !important;

}

.overlay {
width: 150px;
height: 115px;
left:  calc(100% - 70% ) !important;
top:  calc(100vh -  66vh)  !important;
border-radius: 15px !important;


}
.overlay p,h3 {
font-size: 6px ;
}
.green-box  img  {
width: 60px !important;
height: 60px  !important;
}
.green-box  {

padding: 10px !important;
}
/* .two-image-box {
width: calc(100%  - 3rem);
display: none;
} */
.two-image-box img {
width: calc(100% - 2rem) !important; 
height: 200px !important
;
padding: 0px;
}
.two-image-box div {
padding: 0px !important;

}
.two-image-box  {
display: block !important;
padding-bottom: 15px !important;

}
.two-image-box img {

margin-bottom: 15px;
}
.green-two-box {
width: 90vw - 10px;

display: block !important;
}
.green-two-box div {

margin: 0px !important;
padding-top: 10px;
padding-left: 10px;
}
.green-two-box  br {
display: none;
}
h3-container {
font-size: medium !important;
}

.col {
flex: none ;
margin: 0px !important;
padding: 0px !important;
padding-bottom: 10px !important;

}


.col  img ,.col  h4  , .col p , .col div {
width: auto !important;

}
.col p {
margin: 15px !important;
margin-bottom: 5px !important;
}

.col img {

width: 75% !important;
height: 50% !important; 
margin-right: calc(100% - 88%);
margin-left: calc(100% - 88%);
}
.img-ceo {
padding-bottom: 5px !important;
display: block !important
;

}
.img-ceo-background {
margin-left: calc(100vw - 82vw  ) !important;
margin-right: calc(100vw - 82vw ) !important ; 
margin-bottom: 75px !important;



}

.recent-videos-box {

display: block !important;

}
.youtube-box {

width: 250px !important;
height: 175px !important;
margin-left: calc(100% - 87%) !important;
margin-right: calc(100% - 87%) !important;
margin-bottom: 10px;
}
.footer {

display: block !important;
}
.footer p {
font-size: 12px;
text-align: center;
}
.footer div {
padding: 0px !important;
padding-bottom: 10px !important;
}
.footer h4  {
font-size: 14px;
text-align: center;

}
.footer br  {
display: none;
}
.locate-circle {

display: flex;
justify-content: space-around;
}

.social-media-box {

justify-content:space-around !important;
margin-right: 10px !important ;
margin-left: 10px !important;
}

.read-more-button  {

width: 74px !important ;
height: 34px !important;
font-size: 10px !important;

}
.team-text {
font-size: medium;
text-decoration: solid;
}
.With {

font-size: small;
}
.button-white {

width: 64px !important ;
height: 23px !important;
padding: 5px !important;
font-size: 5px;
font-weight: 300;
}

.button-white1 {

width: 71px !important ;
height: 29px !important;
padding: 3px !important;
font-size: 5px !important;
background-color: #7EA975 !important;


}

.order-enquiry-button {
width: 17px !important ;
height: 6px !important;
font-size:3px!important;
text-align: center !important;


}
.overlay  br {
display: none;
}
.farm-p {
margin-bottom: 10px !important;
}
.overlay {
padding: 20px !important;
}


.nav-bar p {
font-size: x-small;
}
.p-order {

font-size: 9px !important;
font-weight: 400 !important;

}

.media-bar  {
font-size: 10px;
padding:  5px !important;
padding-right: 2px !important;

margin-bottom: 15px;

}
.media-bar1 {

margin-top: 5px;

font-size: 11px ;
}


.social-media i {

font-size: 18px !important;

padding-top: 3px !important;

}

.social-media img {
width: 28px !important;
height: 28px !important;
}



}
.bg-success {
background-color: #7EA975 !important ;
}