*{margin:0;padding:0;box-sizing:border-box;font-family:Arial;}

body{background:#f5f5f5}

/* NAV */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 40px;
  background:white;
  position:relative;
}

.nav-left{
  border:2px solid red;
  padding:5px 10px;
  color:red;
}

.nav-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.nav-center a{margin:0 10px;text-decoration:none;color:black}

.nav-right button{
  background:red;
  color:white;
  border:none;
  padding:6px 12px;
}

/* HERO */
.hero{
  height:400px;
  background:url('https://images.unsplash.com/photo-1581578731548-c64695cc6952?q=80&w=1600') center/cover;
  display:flex;
  justify-content:center;
  align-items:center;
}

.overlay{
  background:rgba(0,0,0,0.5);
  padding:30px;
  color:white;
  border-radius:10px;
  text-align:center;
}

.search-box{display:flex;margin-top:10px}

.search-box input{padding:10px;border:none}

.search-box button{
  background:red;
  color:white;
  border:none;
  padding:10px;
}

/* ICONS */
.services{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:25px;
  padding:30px;
}

/* GRID */
.section{
  max-width:1100px;
  margin:auto;
  padding:40px 20px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}

/* CARD */
.card{
  background:white;
  border-radius:10px;
  overflow:hidden;
}

.card img{
  width:100%;
  height:200px;
  object-fit:cover;
}

.card h3{padding:10px}
.card p{padding:0 10px 15px}

/* ✅ FOOTER */
.footer{
  display:flex;
  justify-content:space-between;
  padding:50px;
  background:#eaeaea;
  flex-wrap:wrap;
}

.footer-left{
  max-width:350px;
}

.footer-left input{
  width:100%;
  padding:10px;
  margin-top:10px;
}

.footer-left button{
  width:100%;
  margin-top:10px;
  padding:12px;
  background:red;
  color:white;
  border:none;
}

.footer-links{
  display:flex;
  gap:40px;
}

.footer-links h4{
  margin-bottom:10px;
}

/* MOBILE */
@media(max-width:800px){
  .footer{
    flex-direction:column;
    gap:30px;
  }

  .nav-center{display:none}
}
