*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial, sans-serif;
  line-height:1.6;
  background:#f5f5f5;
  color:#222;
}

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px;
  background:#111;
  color:white;
}

.navbar ul{
  display:flex;
  gap:20px;
  list-style:none;
}

.navbar a{
  color:white;
  text-decoration:none;
}

.hero{
  height:90vh;

  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;

  padding:20px;

  background:linear-gradient(to right,#111,#333);
  transition: 0.3s;
  color:white;
}

.hero-content{
  max-width:700px;
  transition: 0.3s;
}

.hero h2{
  font-size:3rem;
  margin-bottom:20px;
  transition: 0.3s;
}

.hero p{
  margin-bottom:20px;
  font-size:1.1rem;
  transition: 0.3s;
}

.btn{
  display:inline-block;

  padding:12px 24px;

  background:#ffcc00;
  color:#111;

  text-decoration:none;

  border:none;
  cursor:pointer;

  border-radius:8px;

  font-weight:bold;
}

.section{
  padding:80px 20px;
  text-align:center;
}

.cards{
  display:flex;
  gap:20px;

  justify-content:center;

  flex-wrap:wrap;

  margin-top:40px;
}

.card{
  background:white;

  padding:20px;

  width:250px;

  border-radius:12px;

  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  transition: 0.3s;
}

form{
  display:flex;
  flex-direction:column;

  gap:15px;

  max-width:500px;

  margin:auto;
}

input,
textarea{
  padding:12px;

  border:1px solid #ccc;

  border-radius:8px;
}

@media(max-width:768px){

  .navbar{
    flex-direction:column;
    gap:15px;
  }

  .hero h2{
    font-size:2rem;
  }

}
#center{
  text-align: center;
}
nav{
  display:flex;

  flex-direction:column;

  align-items:center;

  gap:3px;

  padding:10px;
}

.navbar{
  display:flex;
  flex-direction: row;
  gap: 5px;
  padding: 5px;
  
  list-style:none;
}

.navbar li{

  text-decoration:none;

  color:white;

  border:2px rgb(46, 46, 46);

  padding:8px 16px ;
  background: rgb(35, 35, 35);
  border-radius:20px;

  transition:0.5s;
}
.navbar a:hover{
  background-color: #222;
  color:#ffffff;
  transition: 0.5s;
  border-radius: 25px;
  transform: scale(1.5);
}
.hero-content a:hover{
background-color: #f1cb0e;
  color:#ffffff;
  border-radius: 20px;
 transition: 0.5s;
 transform: scale(1.25);
}
.card:hover{
  transform: scale(1.2);
  transition: 0.5s;
}
footer{
  color: #fbfbfb;
  background-color: #111;
  padding: 10px;
  text-align: center;
  scale: 1;
}
.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  list-style: none;
  padding: 0px;
}
nav{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:10px;
 padding: 20px;
}
.navbar ul{
  display: flex;
  flex-direction: row;
  row-gap: 2px;
}
.navbar{
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0px;
  column-gap: 0px;
}
.navbar li:hover{
 transform: scale(1.15);
 transition: 0.5;
}
.hero-content a{
  transition: 0.3s;
  border-radius: 20px;
}
img{
  border-radius: 25px;
  width: 300px;
  height: 300px;
}