:root{
--navy:#001F54;
--grey:6C757D;
--light-grey:#F1F3F5;
--white:FFFFFF;
--WhatsApp:#25D366;
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family:'Poppins', sans-serif;
background-color:#D9B49D;
color:#333;
line-height:1.7;
}
.hero{
background-image:url("goats2.jpg");
width:100%;
height:100vh;
display:flex;
flex-direction:column;
color:#fff;
position:relative;
}

.hero-content{
position:relative;
z-index:2;
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
padding:0 8%;
max-width:700px;
}
.hero-content h1{
font-size:60px;
line-height:1.1;
margin-bottom:20px;
}
.hero-content p{
font-size:20px;
line-height:1.8;
margin-bottom:35px;
}

.container{
width:100%;
max-width:1100px;
margin:0 auto;

}
.section{padding:60px 0;}
.bg-light{
background-color:brown;
padding:20px;
margin:10px;
border-radius:10px;
align-items:center;
}
.center{ text-align: center;}
h1, h2, h3{color:var(__navy);margin-bottom:15px;}
img{max-width:100%;
boader-radius:8px;}

header{
background-color:brown;
box-shadow:0 2px 5px rgba(0, 0, 0, 0.05);
position:sticky;
top:0;
z-index:10;
padding:24px;
}
.nav{
display:flex;
justify-content:space-between;
align-items:right;
padding:15px 0;
flex-wrap:wrap;
}
.logo{
font-weight:700;
font-size:40px;
color:navy;
text-decoration: none;
font-family:forte;
margin-left:15px;

}
nav a{
margin-left:25px;
text-decoration: none;
color:black;
font-weight:600;
}
.card{
background-color:brown;
border:1px solid #ddd;
margin:0px;
padding:40px;
border-top:20px solid navy;
border-radius:20px;
box-shadow:0 10px 20px rgba(0, 0, 0, 0.06);

}
.card h3{color:black;
font-weight:500;
}
img{
padding:20px;
height:20%;
margin:0px;
border-radius:20px;
align:center;
}
.btn{
background:green;
padding:8px;
}
	footer{
	background-color:grey;
	padding:30px;
	align-item:center;
	align:center;
	bottom-margin:0px;
	}

.small{font-size:14px;
text-align:center;
margin-top:20px;
}

.whatsapp-float{
position: fixed;
bottom:20px;
right:20px;
background:green;
color:var(__white);
width:100px;
height:100px;
border-radius:20px;
display: flex;
align-items: center;
justify-content: center;
font-size:20px;
text-decoration: none;
box-shadow:0 4px 10px rgba(0,0, 0, 0.5);
z-index:100;
}
@media(max-width:768px){
.hero h1{
font-size:28px;
}
nav a{
margin:8px 10px 0 0;
display: inline-block;
}
}