*{
   box-sizing: border-box;
   font-family: Poppins, Sans-serif;
}



 .container-utama{
 width: 100%;    
display: flex;
flex-direction: row;
flex-wrap :wrap;
}
.container-judul,.container-testi{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap :wrap;
}
.content-mid{
	width: 100%;
	text-align: center;
	color: #559fe0;
	font-size: 20px;
	padding: 20px;
    margin: 0;
    text-shadow: 2px 1px black;
}

.image-produk{
	width: 100%;
	padding: 0;
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.image-produk img{
		margin: 0;
		padding: 0;
		width: 100%;
	}
	
.back-img {
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), url("ayam.png");
 	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap :wrap;
	align-items: center;
	justify-content: center;
	}
	
.back-img img{
        
		margin: 20px;
		width: 500px;
		box-shadow:2px 2px 10px;
	}
	
.content{
	width: 100%;
    text-align: center;
	color: #ffffff;
	font-size: 20px;
    padding: 5px;
    text-shadow: 2px 1px black;
    font-size: 30px;
    background-color: red;
}


.content-ayam,.content-bebek,.content-burung{
	width: 100%;
	text-align: center;
	color: #559fe0;
	font-size: 30px;
    margin: 0;
	padding: 5px;
    text-shadow: 1px 1px black;
}




.hq{
	  width: 100%;
    text-align: center;
    color: orangered;
    text-shadow: 1px 1px black;
}
  .buttons{
       font-size: 7px;
	   width: 100%;
   }
  .peta{
     
	   width: 100%;
   } 
 
@media screen and (max-width: 768px){


.back-img img{
      

		width: 300px;
	}
	
	#btnHero{
		max-width: 500px;
		min-width: 100px;
	}
   /* Untuk menampilkan / menyembunyikan menu */
   nav { display: none; }
   header input:checked ~ nav { 
     display: flex; 
   } 
}



#btnHero{
	display: inline-block;
	padding: 0.7em 1.2em;
	background-color: orangered;
    color: white;
    box-shadow: 5px 5px black;
    font-size: 2em;
	border-radius: 20px;
	cursor: pointer;
}


.buttons{
	display :flex;
	align-items: center;
	justify-content:center;
	 border-radius: 20px;
}




















.produk{
	width:100%;
	padding: 20px;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background-color: red;
}
.produk-logo{
	margin: 0;
	padding: 10px;
}



.decs{
	font-size: 10px;
	color: black; 
	padding:0.5em 0em 0em 1em;
    margin: 0;
}
.desc h3{
    padding:0;
     margin: 0;
   
}
.desc p{
    padding:0;
     margin: 0em 0em 0.5em 1em;
}

.button-pd{	
	margin: 1em;
	height: auto;
	grid-column-start: 1;
	grid-column-end: 3;
	display: grid;
	justify-items: center;
	align-items: center;
}
.produk img{
	padding: 0;
	margin: 0;
	width: 100%;
}

.produk-at50,.produk-at100,.produk-at200 ,.produk-at20{
	max-width: 500px;
	min-width: 300px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: white;
	color: white;
	margin: 20px;
	margin-top: 10px;
	border :5px solid grey;
}



#btn{
	text-decoration: none;
	max-width: 300px;
    display: inline-block;
    margin-top: 0.5em; 
	padding: 0.7em 1.2em;
    background-color: orangered;
    color: white;
    box-shadow: 5px 5px black;
    font-size: 1.1em;
	border-radius: 20px;
	cursor: pointer;
}

 #btn:hover, #btnHero:hover{
      background-color: #ff6933;
    }