html, body {
    width: auto!important; overflow-x: hidden!important
  } 

body{
    margin:0;
     font-family: "STIX Two Text", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  
}
 


 
  
/*colours*/
.brown{
    color:#98540B;
}
.green{
    color:#208800;
    opacity:0.69;
}
.black{
    color: rgba(2, 7, 0, 1);
}
.white{
    color:white;
}
.white-op{
   color: rgba(255, 255, 255, 0.8);
}
.brown-bg{
    background-color: rgba(152, 84, 11,1);
}


.green-bg{
    background-color:#208800;
}
.black-bg{
    background-color: rgba(2, 7, 0, 1);
}
.black-bg-opacity{
    background-color: rgba(2, 7, 0, 0.6);
}
.white-bg{
    background-color: white;
}
.brown-bg-opacity{
background-color: rgba(152, 84, 11, 0.6);
}

/*texts*/

h3{
    font-size:22px ;
    line-height: 1.6;
   
}
h4{
font-size:18px ;
    line-height: 1.8;
    max-width: 60%;
    font-weight: 400;
}
.containerh4{
    max-width:80%;
}
p{

max-width: 60%;
}
a{
cursor: pointer;
}
a:hover{
    color: white;
    text-decoration: none;
    font-size: 15px;
}
.left{
    text-align: left;
}
.center{
    text-align: center;
    margin: auto;
}
li{
    padding:10px 0;
    border-bottom: rgba(255, 255, 255, 0.5) 2px solid;
   max-width:55%;
    list-style: none;
}
.bold{
    font-weight: 700;
}
/*boxes*/
section{
    width: 100%;

}
nav{
    max-width:20%;
    background-color: rgba(30, 129, 0, 0.6);
    margin-left:auto;
    margin-right:0;
    padding:60px 0 ;

}

.container{
max-width:80%;
min-height: 100%;


}
/*Hero section*/
#hero{
    background-image: url('img/Hero-bg.jpg '); 
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;

  

}
#hero-textbox{
margin:auto 10%;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
max-width:60%;
  
  
}
#hero-logo{
    margin:0 auto;
   
}
#hero-subtext-box{
    padding:0;
    margin:60px auto 0 ;
}
/*Subtext section*/
#subtext-box{
    Width:100%;
    height:1200px;
    padding:0;
    margin:0;
    display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
#subtext1{
   background-image: url('img/Subtext1.jpg '); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    width:50%;
    height:468px;
}
#subtext2{
   background-image: url('img/Subtext2.jpg '); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    width:50%;
    height:468px;
}
#subtext2-textbox{
    width:60%;
    margin:auto;
   
}
#subtext3{
   background-image: url('img/Subtext3.jpg '); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
   display: flex;
    width:50%;
    height:600px;
}
#subtext3-textbox{
    width:60%;
    margin:132px auto;
   
}
#subtext4{
   background-image: url('img/Subtext4.jpg '); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    width:50%;
    height:600px;
}
/*Our solution section*/
#oursolution{
     background-image: url('img/oursolution-bg.jpg '); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
position: absolute;
    Width:100%;
    padding:0;
    margin:0;
    height:720px;

}

#oursolution-textbox{
    padding:120px 0 160px;
    margin-top: -320px;
    position: relative;
    border-radius: 2px;
     background-color: rgba(255, 254, 254, 0.95);
  
   
}
.box-shadow{
  box-shadow: 12px 9px 30px -2px rgba(35, 35, 35, 0.45);
-webkit-box-shadow: 12px 9px 30px -2px rgba(35, 35, 35, 0.45);
-moz-box-shadow: 12px 9px 30px -2px rgba(35, 35, 35, 0.45);

}
h2.green{
    border-bottom: #208800 solid 2px;
    padding:10px;
    width:max-content;
    margin: 0 auto 60px;
    max-width: 60%;
}
a.sticky{
  position: fixed;
  z-index:60;
 right:0;
 top:auto;
 bottom:15px;
}

a.sticky.arrow{
  padding: 5px;
  text-align: center;
}

/*Key Benefits section*/
#benefits{
   position: relative;
   margin-top: 700px;
   padding:120px 0 ;
   
}
#benefits-textbox{
    width:100%;
display: flex;
flex-wrap: wrap;
justify-content:space-between;

}
.benefit-textbox{
    border-left:green solid 2px;
    border-bottom: #208800 solid 2px;
    padding:15px 0 15px 15px;
    margin:30px;
   max-width:250px;
   position: relative;
}
.benefit-textbox>h4{
max-width:80%;
}
#small-leaf{
margin:-120px 120px ;
}
#big-leaf{
margin:-400px auto auto 40%;

}
/*Tested section*/
#tested{
    padding-bottom:60px;
}
 #tested-textbox{
 padding:120px 0 120px;
position: relative;
}
#tested-iconbox{
width:100%;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
align-items: center;
margin-bottom:60px;
 
}
.iconbox{
   padding:15px 0 15px 15px;
    margin:30px;
   max-width:250px;
text-align: center;

}
h3.tested{
    margin:90px auto 120px;
}
.iconbox>img{
    width:100%;
}
/*Application section*/

#application-maintextbox{
 padding:120px 0 120px;
position: relative;
}
h2.white.withline{
    border-bottom: white solid 2px;
    padding:10px;
    width:max-content;
    margin: 0 auto 60px;
    max-width: 60%;
}
#application-box{
    Width:100%;
    padding:0;
    margin:0;
    display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}   
#application1{
 background-image: url('img/application1.jpg '); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;

    
}
#application2{
 background-image: url('img/application2.jpg '); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
width: 50%;

}
#application3{
 background-image: url('img/application3.jpg '); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
 width: 50%;
    
}
#application4{
 background-image: url('img/application4.jpg '); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
   width: 50%;


    
}
.application-textbox1, .application-textbox2{
    max-width:60%;
    height:360px;
    margin: 120px auto 120px;
    text-align: center;
    padding:25px;
    background-color: rgba(255, 254, 254, 0.95);
}
.application-textbox1{
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;

}
 .application-textbox2{
  border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;  
    
 }
h4.green.bold.application, p.brown.application{
    
    margin:30px auto;
    text-align: left;
   
}
/*Why Us Section*/
#whyus, #testimonials{
position: relative;
padding:120px 0 ;
}

#whyus-textbox{
    width:100%;
display: flex;
flex-wrap: wrap;
justify-content:center;

}
.margintop{
    margin-top:60px;
}
.marginbottom{
    margin-bottom:60px;
}
.whyus-textbox{
    border-left:#98540B solid 2px;
    border-bottom: #98540B solid 2px;
    padding:15px 0 15px 15px;
    margin:30px;
   max-width:250px;
   position: relative;
}
.whyus-textbox>h4{
max-width:80%;
}

/*Testimonials Section*/
#testimonials{
    padding-bottom:0;
}
#testimonials>.container{
margin-bottom: 120px;
}
#testimonial1{
 background-image: url('img/testimonial1.jpg'); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding:120px;
   
}
.testimonial-textbox{
    padding:120px 0;
    border-radius: 2px;
    background-color: rgba(255, 254, 254, 0.9);
    max-width: 80%;
  
}

#testimonial2{
 background-image: url('img/testimonal2.jpg'); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding:120px;
   
}
#testimonial3{
 background-image: url('img/testimonial3.jpg'); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding:120px;
   
}
#testimonial4{
 background-image: url('img/testimonial4.jpg'); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding:120px;
   
}
/*Gallery*/
#gallery{
padding:60px 0 0;

}
.carousel-indicators>li{
    padding: 0 !important;
}

/*Meet Our Team*/
#ourteam{
padding:60px 0 0;
}
#ourteam-container{
     display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
  padding:0;
  overflow: hidden;
 max-width: 100%;
}
#ourteam-bg{
    width:100%;
     background-image: url('img/ourteam-bg.jpg'); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding:120px 
}
.ourteam-textbox{
     border-radius: 2px;
    background-color: rgba(255, 254, 254, 0.9);
    max-width: 300px;
    padding:60px 15px;
    margin: 0;
    
}

.ourteam-textbox>h4{
    max-width: 100%;
}
.ourteam-img>img{
    width:90%;
    margin:auto;
    text-align: center;
}
.phonenumber-box{
    padding:5px;
}
.phonenumber-box>p{
    max-width:100%;
}
/*Footer*/
#footer{
    padding-bottom:120px;

}
#footer-logo{
    width:150px;
}
#footer-logo>img{
    width:100%;
    margin:60px 0;
}
#contact{
 display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  padding:0;
  overflow: hidden;
 max-width: 100%;   
}
.contact-textbox{
    border-left:green solid 2px;
    padding:15px 0 15px 15px;
    margin:30px 0;
  width:300px;


}
.contact-textbox>p.white.left{
    max-width:100%;
}
.email-button{
    padding:6px 10px;
    border-radius: 10px;
    border: none;

}
.email-button:hover{
    margin-left:2px;
}
.email-arrow{
    width:25px;
}
li.footer{
    border:none;
}
.footer-ul{
    padding-inline-start:15px !important;
    
}
/*Animal Health*/
/*Animal Hero*/
#animalhero{
  background-image: url('img/animalhero-bg.jpg '); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
   position: relative;
  

}
#animalhero-logo{
    position: absolute;
    width:100px;
    margin:30px 0 90px 7%;
}
#animalhero-textbox{

    width: 70%;
    padding:60px 0;
   position: absolute;
   top:30%;
}
#animalhero-h1{
    font-size:62px;
    margin-left:10%;
}
#animalhero-h2{
   margin-left:10%; 
}
/*Animal About*/
#animalabout{
background-image: url('img/animalabout-bg.jpg'); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding:120px 0;
    height:600px;
}
#animalabout-textbox{
  width: 63%;
    padding:60px 0 ;
   position: absolute;
   margin-left:7%;
}
h4.white.fullwidth{
   width:100%;
    padding-bottom:15px;

}
.gradient-line{
    background: #5B7CA0;
background: linear-gradient(90deg,rgba(91, 124, 160, 1) 0%, rgba(44, 112, 1, 1) 28%, rgba(139, 52, 5, 1) 59%, rgba(152, 84, 11, 1) 81%, rgba(91, 124, 160, 1) 99%);
width:100%;
height:5px;
}
/*Animal Key Benefits*/
#animalkeybenefits{
background-image: url('img/animalkeybenefits-bg.jpg'); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding:120px 0;
 
}
#animalkeybenefits>.container{
padding:60px 0;
}
#animalbenefit-textbox{
    padding:60px;
    display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;

  overflow: hidden;

}
.animalbenefit-h4{
width:30%;
    margin:0 30px 60px;
}

/*Horses*/
#horses{
    padding:60px 0 0;
}
#horses-bg{
 background-image: url('img/horses-bg.jpg'); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding:90px 0;   
}
#horses-bg>.container{
    padding:60px;
    display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-between;

  overflow: hidden; 
}
.horses-textbox{
    padding: 0;
    margin:90px 0;
    width:29%;
    height:600px;
    
}
.horses-h4textbox{
    margin:45% auto;
}
h4.withline{
    border-bottom: rgba(255, 254, 254, 0.9) solid 2px ;
    padding-bottom: 15px;

}
.middle{
    margin-top:-130px;

}
.middle>.horses-h4textbox{
    margin: 60% auto;
}
h3.white.center.horses-h3{
    margin-top:180px;
}
.line{
    width:100%;
    margin-top:-15px;
}

/*All Animal Types*/
#allanimal{
    padding:90px 0 0;
}
#allanimal-bg{
  background-image: url('img/allanimal-bg.jpg'); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding:90px 0; 
    margin-top: 0;   
}
#animalbox-container{
       padding:60px;
    display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-between;
  align-items: flex-end;

  overflow: hidden; 
}
.animal-box{
    width:197px;
}
.animal-box.first{
    margin-top:-26px;
}
.animal-box>img{
    width:100%;
}
.animal-box>h4, .productdetails-box>h4{
    max-width:100%;
}
/*Sustainable*/

#sustainable, #productdetails{
    padding:90px 0 0;
}
#sustainable-bg{
  background-image: url('img/sustainable-bg.jpg'); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding:90px 0; 
    margin-top: 0;   
}
#sustainable-container{
      padding:60px;
    display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-between;
  align-items: flex-start;

  overflow: hidden; 
}   

img.animalicon{
    width:150px;
    height:150px;

}
.animalicon-box{
    text-align: center;
    width:160px;
}

/*Product Details*/
#productdetails-container{
      padding:60px;
    display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-between;
  align-items: flex-start;

  overflow: hidden;   
}
#productdetails-bg{
  background-image: url('img/productdetails-bg.jpg'); 
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding:90px 0; 
    margin-top: 0;   
}
.productdetails-box{
    width:160px;
    border-bottom: 1px white solid;
    border-left:1px white solid;
    padding:15px;
    height:240px;
}
.contact-textbox.animal{
    border-left:#98540B solid 2px;
}
@media only screen and (max-width: 1250px){
    #application1,  #application2,  #application3,  #application4{
        width:100%;
   
    }
   @media only screen and (max-width: 1024px) {
#hero-textbox{
    max-width: 65%;
    margin:auto 5%;
   } 
 nav{
    padding:20px 0;
}
nav>ul{
    padding-left:20px;
}
a.white-op{
    font-size: smaller;
}
h1{
    font-size:30px;
}
h2{
font-size: 22px;
}
h3{
 font-size: 20px;
}
h4{
    max-width:80%;
}
p{
    max-width:80%;
}
#subtext2-textbox, #subtext3-textbox{
width:80%;
}
#benefits-textbox{
    justify-content: center;}

#oursolution-textbox{
    padding:90px 0;
   }
   #tested-iconbox{
    justify-content: center;
    align-content: center;
margin-bottom:0;
   }
   .iconbox>img{
    max-width: 60%;
   }
   h3.brown.center.tested{
    margin:30px auto 30px;
   }
   .application-textbox1, .application-textbox2{
    max-width:50%;
    height:300px;
   }
   #ourteam-container{
    justify-content: center;
   }
   .ourteam-textbox{
    max-width:80%;
    margin-bottom:60px;
   }
   #contact{
    justify-content: space-between;
   }
   a.white{
    font-size: 15px;
}
ul.footer-ul{
    display:flex;
    flex-wrap: wrap;
    width:100%;
    padding-left: 0!important;
}
.ul-textbox{
    width:100%;
    border-left:none;
    padding-left: 0;
}
li.footer{
    margin:5px;
    border-left:#208800 solid 1px;
    padding: 0 0 0 5px;
    margin-bottom: 10px;

}
li.footer.brown{
    border-left:#98540B solid 1px;
}
  .benefit-textbox, .whyus-textbox{
            max-width:360px;
        }
        #horses-bg>.container{
            justify-content: center;
        }
 .horses-textbox{
    width:80%;
    height:fit-content;
   
 }
 .horses-textbox>h4.white.fullwidth{
    margin:30px auto;
 }
 .middle{
    margin-top:90px;
 }
 #animalbox-container{
    justify-content: space-evenly;
    align-items: center;
 }
 .animal-box{
    margin-bottom:90px;
 }
 .productdetails-box{
    width:240px;
    margin-bottom:90px;
 }
#sustainable-container{
    padding:30px;
    justify-content: center;
}
img.animalicon{
    width:100px;
    height:100px;
   
}
#animalabout{
    height:800px;
}
#animalhero, nav.brown-bg-opacity{
    height:800px;
}
   }
@media only screen and (max-width: 769px) {
  
#animalhero{
  background-image: url('img/animalhero-mobil-bg.jpg '); 

}
.benefit-textbox{
            max-width:360px;
        }
.application-textbox1, .application-textbox2{
  max-width: 80%;
  
}
nav{
    max-width: 27%;

}
nav>ul{
    padding-left:8px;
}
li{
    max-width: 70%;
}
#hero-textbox{
    max-width: 63%;
}
#animalhero-h1{
    font-size: 50px;
    margin-top: -90px;
}
#animalabout{
    height: 860px;
    padding:30px 0 0;
}
.animalbenefit-h4{
width:100%;
}
#horses-bg{
    background-image: url(img/horses-mobile-bg.jpg);
}
.horses-textbox{
    width:100%;
    margin:30px auto;
    height:fit-content;
    padding:60px 15px;
}
.animal-box{
    text-align: center;
    width:100%;
}
.animal-box>h3{
    font-size: 22px;
}
.animal-box>h4.white.fullwidth{
    margin: 60px auto 0 ;
    width:100%;
}
.animalicon-box{
    margin-bottom:60px;
}

#animalbox-container, #sustainable-container

 {
    justify-content: space-between;
    align-items: center;
    padding:25px;
 }
 .animalicon-box{
    height:290px;
 }
 #productdetails-bg{
    background-image: url(img/productdetails-mobile-bg.jpg);
 }
.productdetails-box{
    width:220px;
    height:260px;
}
#allanimal-bg {
    background-image: url(img/allanimal-mobil-bg.jpg);
}
#animalabout {
    background-image: url(img/animalabout-mobil-bg.jpg);
}
    }
    @media only screen and (max-width: 480px) {
        #subtext1, #subtext4{
           width:25%;

        }
         #subtext2, #subtext3{
           width:75%;

        }
        #oursolution-textbox{
            margin-top: -240px;
            padding:90px 15px 90px;
           
        }
        #benefits{
            margin-top:1200px;
            padding-bottom:0;
        }
        #oursolution{
            height:1220px;
        
        }
        #big-leaf{
            margin: -200px auto auto 0;
        }
        #tested-textbox, #application-maintextbox, #whyus{
            padding:90px 0;
        }   
        .application-textbox1, .application-textbox2{
            height:max-content;
        } 
        h2.white.withline{
            max-width: 100%;
            line-height: 1.6;
        }
     #testimonials{
            padding:90px 0 0;
        }
#testimonial1, #testimonial2, #testimonial3, #testimonial4{
    padding: 90px 0;
}
#gallery, #ourteam{
    padding:30px 0 0;
}
#ourteam-bg{
    padding:90px 0;
}
#big-leaf{
    width:120%;
}
.container, #horses-bg>.container{
    padding:0;
}
#productdetails-container, #animalbenefit-textbox{
    padding:0;

}
.animalicon-box{
    margin:auto;
}
#animalhero, nav.brown-bg-opacity{
    height:760px;
}
#animalhero-h1{
    font-size: 38px;
    }
}
#animalabout-textbox{
width:80%;
}  
  }