body{
  font-family: sans-serif;
}
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
  }

  li a {
    display: block;
    color:white ;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

   
  }
  .nav-active{
    background-color:rgb(238, 89, 34);
  }

  li a:hover {
    background-color:  rgb(238, 89, 34);
  }

  .header-section{
      height:670px;
      background-image:url('../images/nihal-karkala-zA2AHvJFM_E-unsplash.jpg');
      background-repeat: no-repeat;
     
  }

  .header-info{
    text-align: left;
    margin: 100px 200px;
    width:40%;
   
  }

  .header-info h6{
    color: rgb(238, 89, 34);
    /* font-size: 30px; */
    font-size: larger;

  }

  .header-info h3{
    font-size: larger;
    color:white;
  }

  .header-info h3 span{
    color: rgb(238, 89, 34);
  }

  .header-info p{
    color: white;
  }

  .header-info button{
  font:inherit;
  font-weight: 600;
  padding: 0.6rem 2rem;
  background: transparent;
  color:  rgb(238, 89, 34);
  border:1px solid;
  position: relative;
}


#services-section{
  text-align: center;
  justify-content: center;

}
.services-heading,.petfood-heading{
  font-size: 20px;
}

.services-heading span,.petfood-heading span{
  color:rgb(238, 89, 34);
}



.services-img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-right:5px solid rgb(238, 89, 34);

}

.services-box{
 padding: 10px;
 width:50%;
}

#petfood-section{
  text-align: center;
  margin-left:5%;
  margin-right:5%;
}

.petfood-img{
  width: 300px;
  height: 300px;
}



.petfood-box{
  padding: 10px;
  margin: 10px;
 width:30%;
 justify-content: center;
 background-color: white;
  display: flex;
  flex-direction: column;
  /* border: 2px solid black; */

}

.petfood-box button{
  font:inherit;
  font-weight: 600;
  padding: 0.6rem 2rem;
  background:rgb(238, 89, 34) ;
  color:  white;
  border:1px solid;
  transition: 100ms ease;
  position: static;
  width: 40%;
  margin: 2rem;

}
.petfood-box button:hover{
  background-color: black;
}



@media(min-width:768px){
  #services-list{
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .petfood-list{
    display: flex;
    justify-content: space-around;

  }
  
}

@media(max-width:768px){
  .header-section{
    height:50%;
    width:auto;
    font-size:10px;
  }
  .header-info{
    width:30%;
  }
  .petfood-box{
    margin: 20%;
  }
  .services-box{
    margin:20%;
  }
  .petfood-box button{
    width:auto;
    margin: 20%;
  }
  .header-info button{
    width:100%;
    font-size: 7px;
  }
}