/* CSS reset */
*{
  margin: 0px;
  padding: 0px;  
}

/* CSS variables */
:root{
    --navbar-height:59px;
}
/* Navigtaion bar */
#navbar{
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
}

#navbar::before{
  content: "";
  background-color:#E21B70;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 1;
}
 
/* #navbar{
position: relative;
} */

/* Logo and Image */
#logo{
margin: 10px;
}

#logo img{
  position:fixed;
  top: 20px;
  left: 10;
  height: 80px;
margin: 5px 5px;
}

/* Navigation bar:Listing style */
#navbar ul{
  display: flex;
  font-family: 'Abril Fatface', cursive;
}

#navbar ul li{
  width: auto;
  top: auto;
  padding-left:100px;
  margin: 50px;
  list-style: none;
  font-size: 1.3rem;
}

#navbar ul li a{
text-align: center;
color: white;
display: block;
padding: 1px 10px;
border-radius: 200px;
text-decoration: none;
}

#navbar ul li a:hover{
  color: black;
  background-color:white;
}

/* Home section */
#home{
  top: 100px;
  height: 500px;
  display: flex;
  flex-direction: column;
  padding: 0px 300px;
  justify-content: center;
  align-items: center;
}

#home::before{
  top: 0%;
  content: "";
  background-image: url(vegetables-arrangement-with-copy-space_23-2148949685.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 1;
}

#home h1{
  color:#E21B70;
  text-align: center;
  font-family: 'Abril Fatface', cursive;
}
#home{
  color:#E21B70;
  text-align: center;
  font-size: 1.5rem;
  font-family: 'Abril Fatface', cursive;
  /* <link rel="preconnect" href="https://fonts.googleapis.com"> */
}
/* Services Section */
#services{
margin: 34px;
display: flex;
}
#services .box{
  border: 2px solid #E21B70;
  padding: 34px;
  margin: 2px 55px;
  border-radius: 28px;
  background:white;
  margin-bottom: 20px; 
  opacity:1;
  box-shadow: 10px 11px #E21B70;
}
#services .box img{
  height: 100px;
  margin: auto;
  display: block;
}
#services .box p{
  font-size: 1.3rem;
  color: #E21B70;
}

/* Client section */
#client-section{
height: 344px;
}


#client-section::before{

content: "";
position: absolute;
background:white;
width: 100%;
height: 54%;
z-index: -1;
opacity: 0.1;
}

#clients{
  display: flex;
  justify-content: center;
  align-items: center;
}

.client-item{
  padding: 34px; 
}

#clients img{
  height: 124px;
}
/* Contact section */
#contact{
position: relative;
}

#contact::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.7;
  background: white;
}

#contact-box{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom:34px;
}

#contact-box input,
#contact-box textarea{
  width: 100%;
  padding: 0.5rem;
}

#contact-box form{
  color: #E21B70;
  width: 40%;
}

#contact-box label{
  color: #E21B70;
  font-size: 1.3rem;
  font-family:'Abril Fatface', cursive ;
}

footer{
  background:#E21B70;
  color: white;

}




/* Utility classes */

.h-primary{
  color: #E21B70;
  font-family: 'Abril Fatface', cursive;
  font-size: 3rem;
  padding: 12px;
}

.h-secondary{
  color: #E21B70;
  font-family:'Abril Fatface', cursive;
  font-size: 1.9rem;
  padding: 12px;
}

.btn{
  padding: 6px 20px;
  border:2px solid #E21B70;
  background-color: white;
  color:#E21B70;
  margin: 17px;
  font-size: 1.5rem;
  border-radius: 10px;
  box-shadow: 10px 11px #E21B70; 
  cursor: pointer;
}

.center{
  text-align: center;
}