html, body {
  height:100%;
}

body {
  display:flex;
  flex-direction:column;
}

main {
  flex:1;
}

.hero-uslugi {
  height:320px;
  background:url('https://images.unsplash.com/photo-1582582494700-8a6c3c6b1d1d') center/cover;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
}

.hero-content {
  position:relative;
  z-index:2;
  padding:20px;
}

.hero-content h1 {
  font-size:38px;
  color:orange;
}

.hero-content p {
  margin-top:10px;
  color:#ccc;
  font-size:16px;
}

.services {
  max-width:1100px;
  margin:60px auto;
  padding:20px;
}

.services-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
}

.service-card {
  background:#222;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  transition:0.3s;
}

.service-card:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
}

.service-card img {
  width:100%;
  height:190px;
  object-fit:cover;
}

.service-card h2 {
  color:orange;
  margin:15px;
  font-size:20px;
}

.service-card p {
  color:#ccc;
  font-size:14px;
  margin:0 15px 20px 15px;
  line-height:1.6;
}

.cta {
  text-align:center;
  padding:70px 20px;
  background:#181818;
  margin-top:40px;
}

.cta h2 {
  color:orange;
  font-size:28px;
  margin-bottom:10px;
}

.cta p {
  color:#ccc;
  margin-bottom:20px;
}

.cta-btn {
  background:orange;
  color:black;
  padding:14px 28px;
  border-radius:10px;
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
  transition:0.3s;
}

.cta-btn:hover {
  transform:scale(1.05);
  box-shadow:0 0 20px rgba(255,165,0,0.6);
}

@media (max-width: 900px) {

  .hero-uslugi {
    height:260px;
  }

  .hero-content h1 {
    font-size:30px;
  }

  .hero-content p {
    font-size:14px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap:20px;
  }

  .service-card img {
    height:170px;
  }

}

@media (max-width: 600px) {


  .hero-uslugi {
    height:200px;
  }

  .hero-content h1 {
    font-size:22px;
  }

  .hero-content p {
    font-size:13px;
  }

  .services {
    padding:10px;
    margin:40px auto;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap:15px;
  }

  .service-card {
    border-radius:12px;
  }

  .service-card img {
    height:160px;
  }

  .service-card h2 {
    font-size:18px;
  }

  .service-card p {
    font-size:13px;
  }

  .cta {
    padding:40px 15px;
  }

  .cta h2 {
    font-size:20px;
  }

  .cta p {
    font-size:13px;
  }

  .cta-btn {
    width:100%;
    padding:12px;
  }

}
@media(max-width:768px){
  .nav {
    padding: 0 15px;
  }

  .logo {
    font-size: 16px;
  }

  section {
    padding: 40px 15px;
  }

  h1 {
    font-size: 22px;
  }

  h2 {
    font-size: 20px;
  }

  p {
    font-size: 14px;
  }

}
body {
  display:flex;
  flex-direction:column;
  padding-top:70px;
}