body{
margin:0;
font-family:Arial;
background:#f4f4f4;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
background:#333;
padding:20px;
}
.logo{
color:white;
}
nav ul{
display:flex;
list-style:none;
gap:30px;
}
nav a{
color:white;
text-decoration:none;
}
.hero{
display:flex;
align-items:center;
justify-content:space-around;
padding:50px;
background:#444;
color:white;
}
.hero img{
width:350px;
border-radius:10px;
transition: transform 0.4s ease;
box-shadow: 1px 1px 13px yellow;
}
.hero img:hover{
    transform: scale(1.08);
}
.hero-text{
max-width:500px;
}
.hero-text:hover{
    color: #77dd77;
}
.btn{
display:inline-block;
margin-top:15px;
padding:10px 20px;
background:white;
color:black;
text-decoration:none;
}
.content{
padding:40px;
}

.project{
background:white;
padding:20px;
margin:20px 0;
border-radius:8px;
}
.project:hover{background-color: #444;
color: #f4f4f4;}
footer{
text-align:center;
padding:20px;
background:#333;
color:white;
}
@media (max-width:768px){
.hero{
flex-direction:column;
text-align:center;
}
.hero img{
width:90%;
}
nav ul{
flex-direction:column;
gap:10px;
}
}
.btn:hover{
    padding: 10px 20px;
  background-color:yellow;
  color: black;
  border: none;
  transition: all 0.3s ease;
}
html{
    scroll-behavior: smooth;
}
.content1{text-align: center;font-size: larger;text-shadow: 1px 1px 1px black;}
.btnp{
    display:inline-block;
margin-top:15px;
padding:10px 20px;
color:black;
text-decoration:none;
text-shadow: 1px 1px 1px black;
}
.btnp:hover{
    background-color: white;
}
.contenta{
    font-size: larger;
    padding: 10px 30px 10px 30px;
    text-shadow: 1px 1px 1px black;
}