/*********************************************/
/****    общие стили + (0 до 576px)  23%  ****/
/*********************************************/

@font-face {
font-family: Nunito-Bold; 
src: url(fonts/Nunito-Bold.ttf)format("truetype"); 
font-style: bold; 
font-style: 600; 
   }

@font-face {
font-family: "Nunito-BoldItalic";  
src: url(fonts/Nunito-BoldItalic.ttf) format("truetype"); 
font-style: italic; 
font-weight: 600; 
 }
 
@font-face {
font-family: "Nunito-Regular";
src: url(fonts/Nunito-Regular.ttf) format("truetype");
font-style: normal; 
font-weight: 300; 
}

@font-face {
font-family: "Nunito-Italic";  
src: url(fonts/Nunito-Italic.ttf) format("truetype"); 
font-style: italic; 
font-weight: 300;
 }
 
@font-face {
font-family: "Nunito-Light";
src: url(fonts/Nunito-Light.ttf) format("truetype");
font-style: normal; 
font-weight: 100; 
}

@font-face {
font-family: "Nunito-Italic";
src: url(fonts/Nunito-Italic.ttf) format("truetype");
font-style: italic; 
font-weight: 100; 
}
   

* {
	margin: 0;
}

body {
	background: url(pic/background.jpg) center top;
	background-attachment: fixed;/* фиксируем фон */
	display: flex; /* возвращает на верх страницы по ссылке */
	font-family: 'Nunito-Regular', serif;
	text-align: center; /* выравнивание текста в белом блоке */
	justify-content: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.wrapper {
	width: 100%;	
} 

/* Область для шапки сайта */
.header {
	position: fixed; /* шапка приклеена и следует за скролом*/
	top: 0; /*шапка вверху страницы*/
	z-index: 100; /*шапка поверх всех последующих элементов*/
	background: none;	
}

/* шапка */
.nav {
	display: flex;
	justify-content: space-between;
	padding-top: 20px;
	background: linear-gradient(135deg, #01540f, #89F336);	
}

.hamburger {
	cursor: pointer;
	position: fixed; /* шапка приклеена и следует за скролом*/
	right: 10px; /*шапка вверху страницы*/
	top:10px;
	z-index: 100; /*шапка поверх всех последующих элементов*/
	background: linear-gradient(135deg, #89F336, #01540f);
	border-radius: 30%;
	/*border: 2px solid rgba(201, 123, 90, 0.15);
	/*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);*/
	transition: transform 0.3s ease;
}

.hamburger .line {
	display: block;
	width: 27px;
	height: 2px;
	margin: 10px 10px;
	background: #ffffff;
}

.nav__link {
	position: fixed;/*центрует на мобильном навбар*/
	display: block;
	width: 100%;
	top: 5rem;
	transition: all 0.3s;	
	background: none;	
}

.nav__link a {
	display: block;
	text-align: center;
	padding: 10px 0;
	text-decoration: none;
	color: rgb(255, 255, 255);
	font-size: 1rem;
	background: linear-gradient(135deg, #89F336, #01540f);
	border: none;
	text-transform: uppercase;
}

.nav__link a:hover {
	text-decoration: none;
	transform: none;
}

.hide {
	display: none;
}





.arrow {
	animation: heartBeat 0.9s ease infinite; /* 0.9 время движения */
}
@keyframes heartBeat {
	0%, 100% { transform: scale(0.2); } /* 0.3 исходный размер картинки стрелки */
	80% { transform: scale(0.4); } /* 0.6 увеличенный размер картинки стрелки */
}
@keyframes heartBeat2 {
	0%, 100% { transform: scale(0.9); } /* 0.3 исходный размер картинки стрелки */
	80% { transform: scale(1.1); } /* 0.6 увеличенный размер картинки стрелки */
}

/* Белый блок */
.w-block {
	animation: fadeInUp 1.5s ease-out;
	overflow: hidden; /* отступ от верха белого края до блока текст + фото*/
	background: #ffffff;
}    
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(50px); /* 0 элемент скрыт  и смещён вверх на 50px */
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}   

/* ЗЕЛЕНЫЙ БЛОК */   
.g-block {
	background: linear-gradient(135deg, #89F336, #01540f);
	padding: 0px 30px;
	font-family: 'Nunito-Regular', serif;
	font-size: 1rem; /* Шрифт в шапке*/
	line-height: 1.8;
	color: #ffffff; 
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(201, 123, 90, 0.15);
	/*margin: auto;*/
	width: 100%;
}

.content-wrapper {
	display: flex; /* в одну линию */
	flex-wrap: wrap; /* перенос на следующую строку*/ 
	padding: 0px 0px;
}  

.content-wrapper-first {
	display: flex; /* в одну линию */
	flex-wrap: wrap; /* перенос на следующую строку*/ 
	padding: 0px 0px;
	margin-top: 30%;
	
} 

.content-wrapper-first .text2{
	margin-bottom: 0%;
	/* margin-left: 0;
	margin-right: 0; */
	margin-top: 25%;
	/*font-weight: 600;*/
	color: darkgray;
	 background: #ffffff; 
	

	
	
}





.text {
	max-width: 100%;
	margin: auto;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.5;
}

.text2 {
	max-width: 100%;
	margin: auto;
	font-size: 1rem;
	text-align: center;
	line-height: 1.5;
	padding: 0% 3%;
}


.map a{
	color: rgb(255, 255, 255); 
	text-decoration: none;
}

.map a:hover{
	text-decoration: underline;
	transform: translateY(2px);
	transform: translateY(-2px);
}


.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1rem;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

			.countdown-mini {
				display: flex;
				flex-wrap: wrap;
				gap: 6px;
				margin: auto;

			}

					.time-mini {
						text-align: center;
			background: rgba(0,0,0,0.35);
			border-radius: 10px;
				min-width: 38px;
				padding: 3px 5px;
			}
			
			.time-number-mini {
				font-size: clamp(14px, 4vw, 24px);
			font-weight: 800;
			color: white;
			text-shadow: 0 1px 3px rgba(0,0,0,0.5);
			line-height: 1;
			}
			
			.time-label-mini {
							font-size: clamp(7px, 2.5vw, 10px);
			text-transform: uppercase;
			color: rgba(255,255,255,0.9);
			font-weight: 600;
			}


.table-block2 {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: repeat(1, 1fr);
	max-width: 80%;
	margin: auto;/* выравнивание элементов блока по центру */
	flex-wrap: wrap; /* перенос на следующую строку, если подключен display: flex; */
	margin-bottom: 200px;/* отступ блока от нижнего края*/		
}

.table-text2 {

	font-size: 1.5rem; 
	text-align: center;
	line-height: 1.5;
	width: 100%;
	padding: 7% 0;
}

.line2 {
	display: block;
	width: 100%;
	height: 2px;
	margin: 1% 0;
	background: linear-gradient(135deg, #01540f, #89F336);
}
        
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .selector-group {
            margin-bottom: 20px;
        }
        
        select {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 6px;
            background: white;
            cursor: pointer;
        }
        
        select:focus {
            outline: none;
            border-color: #4CAF50;
        }
        
        .tableVznos table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .tableVznos th {
            background: #4CAF50;
            color: white;
            padding: 12px;
            text-align: left;
        }
        
        .tableVznos td {
            padding: 12px;
            border-bottom: 1px solid #ddd;
        }
        
        .value-display {
            font-size: 18px;
            font-weight: bold;
            color: #000000;
        }
        
        .empty-message {
            text-align: center;
            color: #999;
            padding: 20px;
        }
		
	  


/******************************************/
/****         (576px до 768px)    30%   ****/
/******************************************/

@media screen and (min-width: 576px) {

.nav__link {
	background: none;	
}

.nav__link a {
	font-size: 1rem;
}


/* .arrow {
}
@keyframes heartBeat {
	0%, 100% { transform: scale(0.4); } 
	80% { transform: scale(0.6); } 
} */

}


/******************************************/
/****         (768px до 991px)   39%   ****/
/******************************************/

@media screen and (min-width: 768px) {



.nav__link {	
	background: none;
}

.nav__link a {
	font-size: 1.5rem;
}

.head-text {
	font-size: 1rem;
	margin-top: 250px;
	margin-bottom: 190px;
}

/* .arrow {
}
@keyframes heartBeat {
	0%, 100% { transform: scale(0.5); } 
	80% { transform: scale(0.7); } 
} */

}


/******************************************/
/****         (991px до 1200px)   47%  ****/
/******************************************/

@media screen and (min-width: 991px) {

.nav__link {
	background: none;	
}


/* .arrow {
}
@keyframes heartBeat {
	0%, 100% { transform: scale(0.5); } 
	80% { transform: scale(0.8); } 
} */
}


/******************************************/
/****         (1200px до 1920px)   75% ****/
/******************************************/
/* тут настройка шапки на весь экран*/

@media (min-width: 1200px) { 

.header {
	width: 100%;	
	background: linear-gradient(135deg, #02dc18, #01540f);
	text-shadow: none;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
	transition: transform 0.3s ease;
	/*border: 1px solid rgba(0, 0, 0, 0.15);*/
}

.hamburger {
	display: none;
}

.nav__link {
	display: block;
	position: static;
	width: 100%;
	margin-right: 20px;
	background: none;
 }

.nav__link a {
	display: inline-block;
	padding: 15px 20px;
	background: none;
	color: rgb(255, 255, 255);
	font-size: 0.95rem;
	font-weight: 600;
	border: none;
	border-style: none;
	border-width: none;
	border-radius: none;
}

.nav__link a:hover {
	text-decoration: underline;
	transform: translateY(2px);
	transform: translateY(-2px);
}




/* .arrow {
}
@keyframes heartBeat {
	0%, 100% { transform: scale(0.8); } 
	80% { transform: scale(1.2); } 
} */

.content-wrapper {
	display: block;
}  

.content-wrapper-first {
	display: block;
	
}  

.content-wrapper-first .text2{
	margin-top: 0%;
	background: transparent;
}


.text {
	max-width: 70%;
	font-size: 3rem;
}

.text2 {
	max-width: 75%;
	font-size: 1.5rem;
	text-align: center;
}


					 .countdown-mini {
			gap: 8px;
			/*justify-content: flex-end;*/
			/*margin-top: 5px;*/
		}
.time-mini {
			padding: 4px 6px;
			min-width: 45px;
		}

	.table-block2 {	
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(1, 1fr);
	max-width: 70%;
}	

.table-text2 {
	padding: 3% 10%;
}


}



/******************************************/
/****      (1920px до 2560px)  100%    ****/
/******************************************/

@media screen and (min-width: 1920px) {


/* .arrow {
}
@keyframes heartBeat {
	0%, 100% { transform: scale(0.8); }
	80% { transform: scale(1.0); }
} */


}