body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-image: url('img/background.jpg');
  background-size: cover;
  background-attachment: fixed;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.header {
  display: flex;
  justify-content: right;
  width: 4%
}

.sound-btn {
  cursor: pointer;
  max-height: 2rem;
  margin-top: 2rem;
  margin-right: 2rem
}

.sound-btn:hover .sound-btn-btn {
  filter: brightness(1.2)
}

.sound-on {
  content: url("data:image/svg+xml,%3csvg%20width='36'%20height='36'%20viewBox='0%200%2036%2036'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d_32290_10471)'%3e%3crect%20x='2'%20y='1'%20width='32'%20height='32'%20rx='4'%20fill='url(%23paint0_linear_32290_10471)'/%3e%3crect%20x='2.5'%20y='1.5'%20width='31'%20height='31'%20rx='3.5'%20stroke='url(%23paint1_linear_32290_10471)'/%3e%3cg%20filter='url(%23filter1_d_32290_10471)'%3e%3cpath%20d='M13%2014L17%2010V24L13%2020H10.5C10.2239%2020%2010%2019.7761%2010%2019.5V14.5C10%2014.2239%2010.2239%2014%2010.5%2014H13Z'%20fill='white'/%3e%3cpath%20d='M19%2024C22.8509%2024%2025.9755%2020.8904%2025.9999%2017.0453L26%2017C26%2013.134%2022.866%2010%2019%2010V11.5C22.0376%2011.5%2024.5%2013.9624%2024.5%2017C24.5%2020.0376%2022.0376%2022.5%2019%2022.5V24Z'%20fill='white'/%3e%3cpath%20d='M19%2019.5C20.3807%2019.5%2021.5%2018.3807%2021.5%2017C21.5%2015.6193%2020.3807%2014.5%2019%2014.5V13C21.2091%2013%2023%2014.7909%2023%2017C23%2019.2091%2021.2091%2021%2019%2021V19.5Z'%20fill='white'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d_32290_10471'%20x='0'%20y='0'%20width='36'%20height='36'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='1'/%3e%3cfeGaussianBlur%20stdDeviation='1'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_32290_10471'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_32290_10471'%20result='shape'/%3e%3c/filter%3e%3cfilter%20id='filter1_d_32290_10471'%20x='10'%20y='9'%20width='16'%20height='17'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='1'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_32290_10471'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_32290_10471'%20result='shape'/%3e%3c/filter%3e%3clinearGradient%20id='paint0_linear_32290_10471'%20x1='18'%20y1='1'%20x2='18'%20y2='33'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23999999'/%3e%3cstop%20offset='0.25'%20stop-color='%23808080'/%3e%3cstop%20offset='0.5'%20stop-color='%234D4D4D'/%3e%3cstop%20offset='0.75'%20stop-color='%23333333'/%3e%3cstop%20offset='1'%20stop-color='%23666666'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_32290_10471'%20x1='18'%20y1='1'%20x2='18'%20y2='33'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='white'%20stop-opacity='0.5'/%3e%3cstop%20offset='1'%20stop-color='white'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")
}

.sound-off {
  content: url("data:image/svg+xml,%3csvg%20width='36'%20height='36'%20viewBox='0%200%2036%2036'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d_32462_98665)'%3e%3crect%20x='2'%20y='1'%20width='32'%20height='32'%20rx='4'%20fill='url(%23paint0_linear_32462_98665)'/%3e%3crect%20x='2.5'%20y='1.5'%20width='31'%20height='31'%20rx='3.5'%20stroke='url(%23paint1_linear_32462_98665)'/%3e%3cg%20filter='url(%23filter1_d_32462_98665)'%3e%3cpath%20d='M13%2014L17%2010V24L13%2020H10.5C10.2239%2020%2010%2019.7761%2010%2019.5V14.5C10%2014.2239%2010.2239%2014%2010.5%2014H13Z'%20fill='white'/%3e%3cpath%20d='M26%2014.375L25.125%2013.5L22.5%2016.125L19.875%2013.5L19%2014.375L21.625%2017L19%2019.625L19.875%2020.5L22.5%2017.875L25.125%2020.5L26%2019.625L24.25%2017.875H22.5L26%2014.375Z'%20fill='white'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d_32462_98665'%20x='0'%20y='0'%20width='36'%20height='36'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='1'/%3e%3cfeGaussianBlur%20stdDeviation='1'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_32462_98665'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_32462_98665'%20result='shape'/%3e%3c/filter%3e%3cfilter%20id='filter1_d_32462_98665'%20x='10'%20y='9'%20width='16'%20height='17'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='1'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_32462_98665'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_32462_98665'%20result='shape'/%3e%3c/filter%3e%3clinearGradient%20id='paint0_linear_32462_98665'%20x1='18'%20y1='1'%20x2='18'%20y2='33'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23999999'/%3e%3cstop%20offset='0.25'%20stop-color='%23808080'/%3e%3cstop%20offset='0.5'%20stop-color='%234D4D4D'/%3e%3cstop%20offset='0.75'%20stop-color='%23333333'/%3e%3cstop%20offset='1'%20stop-color='%23666666'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_32462_98665'%20x1='18'%20y1='1'%20x2='18'%20y2='33'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='white'%20stop-opacity='0.5'/%3e%3cstop%20offset='1'%20stop-color='white'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")
}


.creative {
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 20px;
  color: #e9f4ff;
  text-transform: uppercase;
  text-shadow: 2px 2px 6px rgb(255 255 255 / 30%);
}
.creative {
  font-size: 18px;
  margin-bottom: 25px;
  color: #ffffff;
}
.portal-navigation__icon {
  margin-right: 16px;
  font-size: 18px;
}
.portal-navigation__link {
  display: inline-flex;
  align-items: center;
  margin: 0 1rem;
  font-size: 1.25rem;
  line-height: 1.25rem;
  color: #fff;
  text-decoration: none;
  gap: 8px;
}
.portal-navigation__link:hover {
  background-color: #88888800;
  border-radius: 4px;
}

/*задный фон шум*/
.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  backdrop-filter: blur(10px);
  z-index: 1;
}

/*управления меню текста*/
.content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
        

/*управления пункт верху*/
.logo {
  height: 50px;
  margin-left: -150px;
}

.navbar, .portal-navigation {
  display: flex;
  align-items: center;
}

/*управления текст верху*/
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110%;
  height: 50px;
  background: url(#);
  background-color: rgb(0 0 0 / 0%);
  background-repeat: repeat-x;
  z-index: 3;
}

/*управления иксику*/
.portal-navigation {
  height: 100%;
  justify-content: space-between;
}

цвет меню

.portal-navigation__link.active,
.portal-navigation__link:active,
.portal-navigation__link:hover {
  color: hsl(123, 100%, 50%);
}


/*управления Вилд тексту*/
.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  z-index: 2;
  margin-top: 20px;
}

/*управления Вилд Фону*/
.project-info {
  background-color: rgb(0 0 0 / 70%);
  padding: 15px;
  border-radius: 18px;
  margin-top: 15px;
}



.download-button {
  float: right;
  font-size: 25px;
  font-weight: 550;
  border-radius: 10px;
  height: 25px;
  padding: 15px 25px;
  text-decoration: double;
  outline: 0 none;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgb(0, 0, 0);
  margin: 4px;
  background-color: hsl(118, 97%, 29%);
  border: 1px solid #2bff00;
  transition: border 300ms, background-color 250ms, box-shadow 500ms;
  color:  rgb(240, 240, 240); }

.download-button:hover {
  background-color: hsl(110, 98%, 34%);
}
 
footer {
  background-color: rgba(0, 0, 0, 0.85);  /* Ուշադրություն՝ նվազեցված թափանցիկություն */
  padding: 0px;  /* Կարող եք նաև փոփոխել */
  text-align: center;  /* Կենտրոնացված տեքստ */
  width: 100%;
  position: relative;
  z-index: 2;
}


/*управления язык*/
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}
.language-selector-container {
  position: fixed;
  top: 55px;
  right: 3px;
  z-index: 1000;
  background-color: rgba(53, 53, 53, 0.58);
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 4px 6px rgb(102 100 100 / 20%);
  font-family: 'Arial', sans-serif;
}
.language-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: rgb(255, 255, 255);
}

.lang-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.1);
}
.lang-option:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}


.lang-option .lang-flag {
  width: 23px;
  height: 18px;
  margin-right: 3px;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.lang-option:hover .lang-flag {
  transform: scale(1.1);
}