/* 4f8395 синий цвет садика,    hsl 195 30.7 44.7 */
/* 7d883a зелёный цвет сдалика, hsl 68 40.2 38 */
/* c6a000 желтый цвет садика,   hsl  48 100 38.8 */
/* 9c6052 цвет крыши садика,    hsl 11 31.1 46.7 */
:root {
  --blue-color:       hsl(195, 30.7%, 44.7%);
  --white-blue-color: hsl(195, 30.7%, 80%);
  --super-white-blue-color: hsl(195, 30.7%, 90%);
  /* --green-color:      hsl(68, 40.2%, 38%); */
  --green-color:      hsl(80, 40%, 38%);
  --white-green-color:      hsl(80, 40%, 80%);
  --super-white-green-color:      hsl(80, 40%, 90%);
  --yellow-color:     hsl(48, 100%, 38.8%);
  --red-color:        hsl(11, 31.1%, 46.7%);
}

.info-row {
  align-items: center;
  margin-top: 25px;
  margin-bottom: 100px;
  display: flex;
  align-items: stretch;
}

.info-img-box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.info-img-box img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.info-text-box {
  background-color: var(--super-white-blue-color);
  border-radius: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.navbar {
  background-color: var(--white-green-color);
}
.navbar-light .navbar-brand {
  color: var(--blue-color);
}

.navbar-light .navbar-nav .nav-link {
  color: var(--blue-color);
  font-size: 1.5rem;
  padding: 1rem 3rem;
  transition: all 0.3s ease;
}

.navbar-light .navbar-nav .nav-link:hover
/* .navbar-light .navbar-nav .nav-link.active */
{
  color: var(--green-color);
  /* background-color: var(--red-color); */
}
.footer {
  background-color: var(--yellow-color);
  color: var(--red-color);
}

/* Стили для главной страницы */
.hero {
  background-image: url('/static/images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
}

.hero-content {
  padding: 3rem;
  text-align: center;
  color: #fff;
}

.hero-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.hero-button {
  background-color: #fff;
  color: #222;
  border-radius: 50px;
  font-size: 1.5rem;
  padding: 1rem 3rem;
  transition: all 0.3s ease;
}

.hero-button:hover {
  background-color: #222;
  color: #fff;
}