body {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background-image: url('../images/fon.webp');
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-size: cover;
	color: #252525;
}

#main {
	
	justify-content: center;
	gap: 15px;

	flex-wrap: wrap;
	width: 100%;
	text-align:center;

}

h1{
	margin-top: 20vh;
	text-align:center;
	font-size: 54pt;
	color: #4d4d4d;
	width: 100%;
}

p{
	text-align:center;
	font-size: 24pt;
	color: #4d4d4d;
	padding-left: 10%;
	padding-right: 10%;
	text-align:center;
}
/**/

#next {
	text-decoration: none;
	font-size: 34pt;
	color: #eee;
	border: 1px solid #93b3c1;
	background-color: #3D6475;
	border-radius: 5px;
	padding: 15px;
}

#next:hover {
	background-color: #3D6475;
	border: 3px solid #eee;
}

/**/

.nav2 img {
	max-width: 100px;
}
.nav2 {
	z-index: 199;
	background: white;
	box-shadow: rgb(101, 101, 101) 0px 0px 19px 1px;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content:space-between;
	padding: 0 4vw ;
}
.nav2 ul li {
	list-style-type: none;
	color: rgb(35, 35, 35);
}
.nav2 ul {
	display: flex;
	gap: 4vw;
	padding-inline-start: 0;
}
.nav2 a {
	text-decoration: none;
	color: rgb(35, 35, 35);
	font-size: 19px;
}
.nav2 a:hover {
	color: #3D6475;	
	transition: all .1s;
	border-bottom: 2px solid #3D6475;
	
}





.nav {
	display: none;
}
@media (min-width: 600px) {
	#next_img {
		display: none;
	}
}

@media (max-width: 600px) {
	.nav2 {
		display: none;
	}
#next_img {
	width: 50%;
	height: auto;
	padding-bottom: 20px;
	
}

h1 {
	margin-top: 3vh;
	font-size: 34pt;
}

p {
	font-size: 14pt;
}

#next {
	font-size: 24pt;
}

#main {
	margin-bottom: 14vh;
}

	.nav {
		display: flex;
		justify-content: center;
		box-shadow: rgb(101, 101, 101) 0px 0px 19px 1px;
		background: #f9f9f9;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		padding: 10px;
	}
}

.nav-text {
	display: flex;
	justify-content: space-evenly;
	max-width: 94vw;
	height: auto;
	gap: 5vw;
}
.nav-t-1 a {
	text-decoration: none;
	align-items: center;
	display: flex;
	gap: 2vw;
	flex-direction: column;
	color: #5f5f5f;
	font-size: 12px;
}


.nav-t-1 svg {
	max-width: 20px;
	max-height: 20px;
}

.nav-t-1 svg path {
	fill:#5f5f5f;
}

.none-path svg path  {
	fill: white;
}

.none-path svg g,.none-path path {
	stroke: #5f5f5f ;
}


.nav-t-1 {
	gap: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Нижнее меню: всегда помещается по ширине */
@media (max-width: 600px) {

  .nav {
    padding: 8px 6px;              /* чуть компактнее */
  }

  .nav-text{
    width: 100%;
    max-width: 100%;
    gap: 0;                        /* ВАЖНО: убираем vw-gap */
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }

  .nav-t-1{
    flex: 1 1 0;                   /* все пункты равной ширины */
    min-width: 0;                  /* позволяет сжиматься */
  }

  .nav-t-1 a{
    width: 100%;
    padding: 4px 2px;
    gap: 6px;
  }

  .nav-t-1 svg{
    width: 20px;
    height: 20px;
    max-width: none;
    max-height: none;
  }

  .nav-t-1 a span,
  .nav-t-1 a {                      /* если текст прямо в a без span */
    white-space: nowrap;            /* не переносить */
    overflow: hidden;               /* обрезать */
    text-overflow: ellipsis;        /* ... если не влезло */
    font-size: 11px;                /* чуть меньше */
  }
}
/* Нижнее меню: всегда помещается по ширине */