:root {
    --bg-dark: rgba(0, 0, 0, 0.65);
    --max-width-desktop: 70%;
    --max-width-mobile: 85%;
    --button-width: 300px;
    --button-height: 50px;
    --main-color: #8d251faf;
    --map-color: #5f1a1aaf;
    --hover-color: #8D251F;
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body::-webkit-scrollbar {
    display: none;
  }

  body {
    font-family: 'Montserrat', sans-serif;
    background: #0000004b;
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .background-image {
    background-attachment: fixed;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('background.jpg') center center / cover no-repeat;
    z-index: 0;
  }
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-dark); /* rgba(0, 0, 0, 0.6) */
    z-index: 1;
  }
  
  .container {
    width: var(--max-width-desktop);
    position: relative;
    text-align: center;
    z-index: 2;
    margin-top: 50px;
    margin-bottom: 50px;
  }
  
  .logo {
    max-width: 250px;
    margin: 0 auto 0;
    height: auto;
    display: block;
    filter: 
        drop-shadow(0 0 2px rgba(141, 37, 31, 0.3))
        drop-shadow(0 0 4px #8D251F);
    animation: cleanGlow 3s infinite ease-in-out;
    opacity: 1;
    transition: filter 0.3s ease;
}

@keyframes cleanGlow {
    0%, 100% {
        filter: 
            drop-shadow(0 0 1px rgba(141, 37, 31, 0.2))
            drop-shadow(0 0 3px #8D251F);
    }
    50% {
        filter: 
            drop-shadow(0 0 3px rgba(141, 37, 31, 0.4))
            drop-shadow(0 0 6px #8D251F)
            drop-shadow(0 0 8px rgba(141, 37, 31, 0.2));
    }
}

.logo:hover {
    filter: 
        drop-shadow(0 0 4px #8D251F)
        drop-shadow(0 0 8px rgba(141, 37, 31, 0.5))
        drop-shadow(0 0 12px rgba(141, 37, 31, 0.3));
    animation-play-state: paused;
    transform: scale(1.05);
}
  .description {
    padding-top: 50px;
    padding-bottom: 50px;
    font-size: 1.2rem;
    margin: auto;
    max-width: var(--max-width-desktop);
  }

  .description-about {
    padding-top: 30px;
    padding-bottom: 30px;

    margin: auto;
    max-width: var(--max-width-desktop);
  }
  
  .button-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.button, .button-map {
    position: relative; /* Для абсолютного позиционирования иконки */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    width: var(--button-width);
    height: var(--button-height);
    border-radius: 8px;
    transition: background 0.3s ease;
    padding: 0 10px;
}

.button {
    background: var(--main-color);
}
.button-map {
    background: var(--map-color);
}

.button:hover, .button-map:hover {
    background: var(--hover-color);
    scale: 1.1;
}



.button .btn-icon, .button-map .btn-icon {
    position: absolute; /* Абсолютное позиционирование */
    left: 15px; /* Отступ от левого края */
    height: 24px;
    width: 24px;
}

.btn-text, .button-map .btn-text {
    font-weight: bold;
    width: 100%; /* Занимает всю ширину кнопки */
    text-align: center; /* Выравнивание текста по центру */
    padding: 0 20px; /* Защитный отступ от краев иконок */
}

    /* Мобильная адаптация  */
    @media (min-width: 2000px) {
    .description {
        max-width: 45%;
      }
    }
  /* Мобильная адаптация  */
  @media (max-width: 1200px) {
    body {
      align-items: flex-start;
      padding-top: 30px;
    }
  
    .container {
      width: var(--max-width-mobile);
      justify-content: center;
    }
    .button, .button-map {
      width:50%;
    }
    .description {
      max-width: var(--max-width-desktop);
    }

  }

    /* Мобильная адаптация */
    @media (max-width: 640px) {
      body {
        align-items: flex-start;
        padding-top: 30px;
      }
      .container {
          width: var(--max-width-mobile);
          justify-content: center;
      }
      .button, .button-map {
          width:80%;
      }
      .description {
        max-width: var(--max-width-mobile);
      }
}