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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      line-height: 1.6;
      color: #333;
    }

    header {
      color: white;
    }

    nav {
      background-color: #015c7b;
      display: flex;
      justify-content: center;
      gap: 1.5em;
      flex-wrap: wrap;
    }

    nav a {
      text-decoration: none;
      color: white;
    }

    nav a:hover {
      text-decoration: underline;
      color: white;
    }
    .navbar-nav a, .navbar-nav a:hover, a:visited{
      color: white;
    }
     .navbar-nav a:hover{
      text-decoration: white;
    }
    
    a.navbar-brand, a.navbar-brand:hover, a:visited {
      color: white;
    }

    #hero a.navbar-brand, a.navbar-brand:hover, a:visited {
      color: #333;
    }

.section-title {
      padding: 60px 20px;
      max-width: 100%;
      margin: auto;
    }

    section {
      padding: 60px 20px;
      margin: auto;
    }

    #hero {
  max-width: 100%;
  position: relative;
  overflow: hidden;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 300px;
  background: none; /* фон тепер через <img> */
}

    #hero h1 {

      padding: 1em;
      border-radius: 10px;
      font-size: 2.5rem;
      font-weight: 600;
    }

    .gallery img {
      width: 100%;
      max-width: 480px;
      border-radius: 10px;
      margin: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    footer {
      background-color: #015c7b;
      color: white;
      text-align: center;
      padding: 1em;
    }
     @media (min-width: 577px) {
     #hero img{

     height:100%; min-height:200px; max-height:500px;}}
     @media (min-width: 768px) {
     #hero img{

     height:100%; min-height:500px; max-height:500px;}}


    @media (max-width: 576px) {
  #hero h1.display-4 {
    font-size: 2rem;
  }
  #hero .lead {
    font-size: 1rem;
  }
  #hero {

  min-height: 500px;

}
 #hero img{

  height: 500px;

}
}