.header {margin: 0; padding: 0; 
	position:sticky;  top:0px;
	background: #f5f5f5;   
	box-shadow: 0 3px 7px rgba(0,0,0,0.3); 
	 z-index: 100; font-size:0.8em;}


* {margin: 0; padding: 0; box-sizing: border-box;}

body {font-family: Arial, Helvetica, sans-serif;   
	color: #333; line-height: 1.3;
	 padding-bottom: 75px; }

.nav-menu {display: flex;

            justify-content: space-between;
 	align-items:center;
	flex-wrap: wrap;
	gap:0;}

.logo {font-weight: bold; cursor: pointer; padding: 0 20px;}

.logoimg {height:30px;}

.nav-item {padding: 0 ; cursor: pointer;}

	.nav-item:hover {background: rgba(255,255,255,0.3); transition: 0.3s;}

	.nav-item.active { font-weight:bold; border-color: #cc7a00;}

.container {margin: 20px; padding: 0;}

.dropdown-menu {display: none;   margin: 0; padding: 0;
	 z-index: 90;}

	.dropdown-menu.active {display: inline-block; width:100%; position:fixed; 
		margin: 0; padding: 0;}
	#menu-uslugi {margin-left:5%;}
	#menu-calc {margin-left:10%;}
	#menu-instructor {margin-left:15%;}
	#menu-sprav {margin-left:20%;}

	/* flex or gap     background:  rgba(255,255,255,0);  */

.menu-links { max-width: 250px; 
	margin-top:-65px; padding:20px 15px 0 20px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0;
 	text-decoration: none;  cursor: pointer; 
	background: #f5f5f5; 
	box-shadow: 0 2px 5px rgba(0,0,0,0.2); } /* background:  rgba(255,255,255,1);   */

	.menu-links a {display: block; padding: 0px;  color: #004d00; text-decoration: none;
                border-radius: 4px; transition: 0.3s; 
		font-weight: 400;  cursor: pointer; }

	.menu-links a:hover {background:green; color: white;  cursor: pointer; }

/* top/transform  вместо отрицательногo margin-top */

.main-content {overflow-x: auto; border:0px solid green;   font-size: 1.2em; margin-top:-50px;
	padding: 20px; line-height: 1.3;   display: block; max-width:1080px; } /* 1680px; */

.footer {border:0px solid blue;
background: #222; color: white; padding:20px; margin-top: 0px; 
}

.podval {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;}

.bottom-reklama {        background-color:white;  
    	display: block; width:100%;
       	position:fixed; bottom: 0; left: 0;
	height: 75px; font-size:0.8em;
       	padding: 0;
        border-top: 0 solid darkgreen;
        box-shadow:0 -10px 20px 0 white;
	 z-index: 100; }

.side { display:none; 
	 background-color:white;  
	border:1px solid red;  
	padding: 0px;    
	height:90%; max-width:800px;
	position: fixed;  top:100px; right:0;}


h1 {color: #004d00; margin-bottom: 10px; font-size: 20px; border-bottom: 1px solid #ff9900; padding-bottom: 10px;}

h2 {color: #004d00; margin: 15px 0 15px; font-size: 18px;}


/* ========== АДАПТАЦИЯ ========== */

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

.dat { display: none; }
	
body {font-size: 12px;}

.header {	height: 55px; font-size:0.9em;}

	.logoimg {height: 30px;}

.container { margin-top: 20px; }

.main-content { margin-top:-80px;	   } 

h1 {margin-bottom: 3px; font-size: 14px;  padding-bottom: 3px;}
h2 { margin: 5px 0 10px; font-size: 13px;}


	#menu-uslugi {margin-left:10px;}
	#menu-calc {margin-left:50px;}
	#menu-instructor {margin-left:100px;}
	#menu-sprav {margin-left:200px;}
}	


@media screen and (max-width: 476px) {

body {font-size: 11px;}

.header {padding-left: 15px;		height: 40px; }

.logo { display: none; }

.menu-links { max-width: 250px; margin: -50px;  padding:10px 10px 0 10px; }

h1 {margin-bottom: 2px; font-size: 13px;  padding-bottom: 3px;}
h2 { margin: 5px 0 10px; font-size: 12px;}

	#menu-uslugi {margin-left: 20px;}
	#menu-calc {margin-left:-10px;}
	#menu-instructor {margin-left:0px;}
	#menu-sprav {margin-left:-75px;}
}


@media screen and (max-width: 378px) {

body {font-size: 10px;}

.header {  padding-left: 15px;	height: 40px; }

.logo { display: none; }

.menu-links { max-width: 200px;   }
}


@media screen and (max-width: 348px) {

.header { font-size: 8.5px; padding-left: 7px;	height: 35px; }

.nav-item {padding: 0 ; }

h1 {margin-bottom: 2px; font-size: 12px;  padding-bottom: 2px;}
h2 { margin: 3px 0 5px; font-size: 10px;}

.menu-links { margin-left:-100px; max-width: 200px; margin-top: -60px; padding: 25px 10px 15px 15px;}

	#menu-uslugi {margin-left: 60px;}
	#menu-calc {margin-left: 50px;}
	#menu-instructor {margin-left: 60px;}
	#menu-sprav {margin-left: -100px;}
}


@media screen and (max-width: 320px) {

.header { font-size: 8px; padding-left: 5px;	height: 30px; }

}