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;
}


.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;
	
}


#Container_bottom {
	text-align: bottom;
}

#main {
	margin-top: 10px;
	justify-content: center;
	gap: 15px;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;

}



#h1Card {
	color: #edeef0;
}

p {
	color: #edeef0;
	padding: 10px;
	text-align: justify;
}

#aCard {
	text-decoration: none;
	padding:20px;
	
}

#imageCard {
/*	border-bottom-left-radius: 50% 30%; /* Скругление только нижней границы */
/*	border-bottom-right-radius: 50% 30%; /* Скругление только нижней границы */
	margin-top: 0px;
	border: solid 1px #3D6475;
	width: 100%;
	border-radius: 10px;
}

#step, #step2 {


	border-radius: 10px;

	flex-direction: column;
	justify-content: center;
	
}

#step, #step2 {
	width: calc(300px - 20px); /* учитывая отступы */
	height: 400px;
	margin-top: 8vh;
	
  position: relative;




}
#step:hover,
#step2:hover {
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);

}


@media (max-width: 400px) {
  #step, #step2 {
    width: 100%; /* учитывая отступы */
	height: auto;
	margin-top: 0px;
  }
}




.nav {
	display: none;
}




@media (max-width: 600px) {
	.nav2 {
		display: none;
	}
#step, #step2 {
	margin-top: 0px;

}

#step2 {
	margin-bottom: 10vh;
}

	.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;                /* чуть меньше */
  }
}
/* Нижнее меню: всегда помещается по ширине */