*                          {margin:0;} 
 *                          {padding:0;}
 *                          {box-sizing:border-box;}
 *                          {font-family:tahoma,sans-serif;}

 a                          {text-decoration:none;}
 a                          {color:white;}
 a                          {outline:none;}  
 a                          {border:none;}
 a                          {border:0;} 
 
 p                          {text-decoration:none;}
 p                          {color:white;}
 
 
 

 h1				{}
 h2				{font-size:12px;}
 h3				{}

 body			            {background-color:#005f66;}
 body			            {overflow-y:auto;}
 body			            {overflow-x:hidden;}

 header			            {width:100%;}
 header			            {display:flex;}
 header			            {justify-content:space-between;}
 header			            {align-items:center;}     
     
 header                     {display:flex;width:100%;}
 header                     {justify-content:space-between;}
 header                     {align-items:center;}
 
.header-box                 {position:fixed;}
.header-box                 {top:0;}
.header-box                 {left:0;}
.header-box                 {right:0;}
.header-box                 {background-color:#2b2e35;}
.header-box                 {padding:10px;}

@media(max-width:358px)     {.header-box{padding:10px;}}

.fone-box                   {background-image:url('pub/req/img/nav/fonb.png');}
.fone-box                   {width:28px;}
.fone-box                   {height:28px;}
.fone-box                   {background-size:cover;}
.fone-box                   {cursor:pointer;}
.fone-box                   {margin-right:auto;}
.fone-box                   {margin-left:62px;}

@media(max-width:420px)     {fone-box{display:none;}}

.fone-box:hover             {background-image:url('pub/req/img/nav/fona.png');}
.fone-box:hover             {width:28px;}
.fone-box:hover             {height:28px;}
.fone-box:hover             {background-size:cover;}
.fone-box:hover             {cursor:pointer;}
.fone-box:hover             {margin-right:auto;}
.fone-box:hover             {margin-left:62px;}transition:background-image 0.3s ease;}
.fone-box:hover             {transition:background-image 0.3s ease;}

@media(max-width:358px)     {.fone-box:hover{display:none;}}

.btn-go                     {background-color:#000000;}
.btn-go                     {color:#ffffff;}
.btn-go                     {border:1px solid #ffffff;}
.btn-go                     {border-radius:6px;}
.btn-go                     {cursor:pointer;}
.btn-go                     {margin-right:6px;}
.btn-go                     {padding:2px 4px 2px 4px;}

@media(max-width:358px)     {.btn-go{margin-left:46px;font-size:12px;}}
    
.btn-go:hover               {background-color:#000000;}
.btn-go:hover               {color:#00cde0;}
.btn-go:hover               {border:1px solid #00cde0;}
.btn-go:hover               {border-radius:6px;}
.btn-go:hover               {cursor:pointer;}
.btn-go:hover               {transition:0.3s ease;}
.btn-go:hover               {padding:2px 4px 2px 4px;}

 input[type="text"]         {background-color:#000000;}
 input[type="text"]         {border:1px solid #ababab;} 
 input[type="text"]         {border-radius:6px;}
 input[type="text"]         {font-size:16px;}
 input[type="text"]         {outline:none;}
 input[type="text"]         {cursor:pointer;}
 input[type="text"]         {padding-left:8px;}
 input[type="text"]         {height:26px;}
 input[type="text"]         {width:220px;}
 
@media(max-width:358px)     {input[type="text"]{max-width:186px;font-size:12px;}} 

 input[type="form"]         {background-color:#000000;}
 input[type="form"]         {border:1px solid #ababab;}
 input[type="form"]         {border-radius:6px;}
 input[type="form"]         {font-size:16px;}
 input[type="form"]         {outline:none;}
 input[type="form"]         {cursor:pointer;}
 input[type="form"]         {padding-left:8px;} 
 input[type="form"]         {height:26px;}
 input[type="form"]         {width:220px;}
 
 input[type="form"]         {color:#00ff00;}
 
@media(max-width:358px)     {input[type="form"]{max-width:186px;}}  

.user-box			        {background-image:url('pub/req/img/nav/usera.png');}
.user-box			        {background-size:cover;}
.user-box			        {cursor:pointer;}
.user-box			        {padding:0;}
.user-box			        {width:26px;}
.user-box			        {height:26px;}
.user-box			        {margin-right:8px;}

.user-box:hover		        {background-image:url('pub/req/img/nav/userb.png');}
.user-box:hover		        {background-size:cover;}
.user-box:hover		        {cursor:pointer;}
.user-box:hover		        {width:26px;}
.user-box:hover		        {height:26px;}
.user-box:hover		        {margin-right:8px;}
.user-box:hover		        {transition:background-image 0.3s ease;}    

@media(max-width:358px)	    {.user-box{margin:0;}}

#nav-checkbox				{display:none;}

.menu-toggle	        	{position:fixed;}
.menu-toggle	        	{top:0;}
.menu-toggle	        	{left:0px;}
.menu-toggle	        	{z-index:1000;}
.menu-toggle	        	{padding:0 0 0 12px;}
.menu-toggle	        	{background-color:#2b2e35;}
.menu-toggle	        	{border:none;}
.menu-toggle	        	{cursor:pointer;}   
.menu-toggle	        	{font-size:36px;}
.menu-toggle	        	{color:#ffffff;}

.menu-toggle:hover	        {position:fixed;}
.menu-toggle:hover	        {top:0;}
.menu-toggle:hover	        {left:0px;}
.menu-toggle:hover	        {z-index:1000;}
.menu-toggle:hover	        {padding:0 0 0 12px;}
.menu-toggle:hover	        {background-color:#2b2e35;}
.menu-toggle:hover	        {border:none;}
.menu-toggle:hover	        {cursor:pointer;}
.menu-toggle:hover	        {font-size:36px;}
.menu-toggle:hover	        {/*color:#00cde0;*/}
.menu-toggle:hover			{color:#00a9b5;}

.menu-body		            {overflow-y:auto;}
.menu-body		            {overflow-x:hidden;}
.menu-body		            {white-space:nowrap;}    

.sidenav					{top:0;}
.sidenav					{left:-370px;}
.sidenav					{width:370px;}
.sidenav					{height:100vh;}
.sidenav					{background-color:#2b2e35;}
.sidenav					{color:#fff;}
.sidenav					{transition:left 0.3s ease-in-out;}
.sidenav					{z-index:999;}
.sidenav					{padding:68px 6px 0 6px;}
.sidenav					{overflow-y:auto;}
.sidenav					{overflow-x:hidden;}

.menu-toggle		        {position:fixed;}
.menu-toggle		        {top:0;}
.menu-toggle		        {left:0;}
.menu-toggle		        {z-index:1000;}
.menu-toggle		        {padding:0 0 0 12px;}
.menu-toggle		        {background-color:#2b2e35;}
.menu-toggle		        {color:#fff;}
.menu-toggle		        {border:none;}
.menu-toggle		        {cursor:pointer;}
.menu-toggle		        {font-size:36px;}    

.menu-body			        {overflow-y:auto;}
.menu-body			        {overflow-x:hidden;}
.menu-body			        {white-space:nowrap;}

.sidenav			        {position:fixed;}
.sidenav			        {top:0;}
.sidenav			        {left:-380px;}
.sidenav                    {transition:left 0.3s ease-in-out;}
.sidenav                    {z-index:999;overflow-y:auto;}
.sidenav                    {overflow-x:hidden;}
.sidenav                    {background-color:#2b2e35;}
.sidenav                    {color:#ffffff;}
.sidenav                    {width:380px;}
.sidenav                    {padding-top:26px;}
.sidenav                    {/*height:100vh;*/}

#nav-checkbox:checked ~ 
.sidenav	                {left:0;top:48px;}

.menu-btn                   {font-size:24px;}
.menu-btn                   {color:white;}
.menu-btn                   {position:absolute;}
.menu-btn                   {top:15px;}
.menu-btn                   {left:265px;}
.menu-btn                   {cursor:pointer;}

 input[type="checkbox"]     {display:none;}
 
.nav-list                   {list-style:none;}

.nav-list a                 {margin-left:20px;}

.nav-list label             {display:block;}
.nav-list label             {padding:16px 20px 4px 20px;}
.nav-list label             {color:white;}
.nav-list label             {text-decoration:none;}
.nav-list label             {cursor:pointer;}
.nav-list label             {font-size:15px;}

.nav-block					{border:1px solid #00cde0;}
.nav-block					{border-radius:5px;}
.nav-block					{padding:12px;}
.nav-block					{margin-left:16px;}
.nav-block					{width:226px;}

.has-submenue               {/*position:fixed;*/}
.has-submenue               {top:0;}
.has-submenue               {left:-360px;}
.has-submenue               {width:360px;}
.has-submenue               {height:100vh;}
.has-submenue               {background-color:#2b2e35;}
.has-submenue               {color:#fff;}
.has-submenue               {transition:left 0.3s ease-in-out;}
.has-submenue               {z-index: 999;}
.has-submenue               {overflow-y:auto;}
.has-submenue               {padding:48px 6px 6px 6px;}

#nav-checkbox:checked ~ 
.has-submenue               {left:-20px;}

.submenu                    {position:fixed;}
.submenu                    {top:0;}
.submenu                    {left:0;}
.submenu                    {width:320px;}
.submenu                    {height:100vh;}
.submenu                    {background:#2b2e35;}
.submenu                    {list-style:none;}
.submenu                    {transform:translateX(-100%);}
.submenu                    {transition:transform 0.3s ease;}
.submenu                    {z-index: 1001;padding:68px 6px 0 6px;}

.submenu-toggle:checked ~ 
.submenu                    {transform:translateX(0);}

.label:hover                {color:#00cde0;}

.nav-block-about			{margin:0;}
.nav-block-about			{border:1px solid #00cde0;}
.nav-block-about			{border-radius:5px;}
.nav-block-about			{padding:12px;}
.nav-block-about			{margin:16px 0 0 16px;}
.nav-block-about			{/*mob*/width:220px;}

 iframe						{allowfullscreen:1;}
 iframe						{loading:lazy;}
 iframe						{referrerpolicy:no-referrer-when-downgrade;}
 iframe						{border-radius:8px;}
 iframe						{width:220px;}   
 iframe						{/*mob*/min-height:360px;}
 iframe						{margin-left:16px;} 
 iframe						{margin-top:16px;} 

 iframe:hover				{border:2px solid #00cde0;}
 iframe:hover				{cursor:pointer;}
 
    /* BLOCKS */

.container					    	{display:grid;grid-template-columns: 1fr 3fr 1fr; /* 20% | 60% | 20% proportions */gap: 20px;padding:68px 16px 16px 16px;}
.block-left					    	{background:#2b2e35;padding:20px;margin-bottom:12px;border-radius:5px;text-align:center;color:white;height:100px;margin-bottom:12px;}
.block-left:hover					{background:#004C52;border:2px solid #00cde0;transform:translateY(-5px);}
.block-right				    	{background:#2b2e35;padding:20px;margin-bottom:12px;border-radius:5px;text-align:center;color:white;height:100px;}
.block-right:hover			    	{background:#004C52;border:2px solid #00cde0;transform:translateY(-5px);}

/* RESPONCE */

@media (max-width: 768px){
.container					    	{grid-template-columns: 1fr; /* Stacks columns on small screens */}}

/* Base styles and mobile default (1 column layout) */

.grid-container				    	{display:grid;grid-template-columns:1fr;box-sizing:border-box;width:100%;gap:12px;}
.grid-item					    	{background:#2b2e35;padding:20px;text-align:center;font-family:sans-serif;border-radius:8px;text-align:center;color:white;height:100px;min-width:320px;}
.grid-item:hover					{background:#004C52;border:2px solid #00cde0;transform:translateY(-5px);}
.grid-item-search				{background:#2b2e35;border-radius:5px;text-align:center;color:white;background:#2b2e35;color:white;padding:20px;text-align:center;font-family:sans-serif;height:100px;min-width:330px;}
.grid-item-search:hover			{background:#004C52;border:2px solid #00cde0;transform:translateY(-5px);}

/* RESPONCE */

@media (min-width: 768px){
.grid-container				    	{grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);/* Optional: Fixes the total container height if needed */}}

@media (max-width: 361px){
.container, .grid-container, .block-left, .grid-item-search, .grid-item, .grid-container	 	{max-width:330px;}}