nav {
       background-color: #444;
       color: white;
       padding: 0.2rem;
       position: relative;
       display: flex;
       justify-content: space-between;
       align-items: center;
       z-index: 10; /* Ensure nav is above other elements */
   }
   .menu-icon {
       font-size: 1.5rem;
       cursor: pointer;
       color: white;
       display: none;
   }

   .menu {
       display: flex;
       list-style: none;
       gap: 0.2rem;
       margin: 0;
       padding: 0;
   }

   .menu a {
       color: white;
       text-decoration: none;
       padding: 0.5rem 0.8rem;
       border-radius: 5px;
       transition: background-color 0.3s;
   }

   .menu a:hover {
        background-color: #6b6b6b; /* More prominent hover state */
      }

	.submenu {
          display: none;
          position: absolute;
          top: 100%; /* Drop below the service item */
          left: 0;
          background-color: rgba(68, 68, 68, 0.7);
          list-style: none;
          padding: 0;
          margin-top: 6px;
  		  margin-left: 0px;
          z-index: 12;
          width: 150px;
      }

      .submenu li {
          display: block;
      }

      .submenu a {
          display: block;
          padding: 0.5rem 1rem;
          color: white;
          text-decoration: none;
          border-bottom: 1px solid #6b6b6b;
      }

      .submenu a:hover {
          background-color: #6b6b6b;
      }

      li:hover > .submenu,
	.submenu:hover {
	    display: block;
	}
      
		.logButton, .regButton, .clasButton, .freeButton, .blocButton, .teleButton, .adminButton{
		    background-color: #ff9800;
		    color: white;
		    border: none;
		    padding: 0.5rem 1rem;
		    font-size: 1rem;
		    cursor: pointer;
		    border-radius: 5px;
		    transition: background-color 0.3s ease;
		}
		
		.logoutButton{
			display: none;
		    background-color: #ff9800;
		    color: white;
		    border: none;
		    padding: 0.5rem 1rem;
		    font-size: 1rem;
		    cursor: pointer;
		    border-radius: 5px;
		    transition: background-color 0.3s ease;
		}
		
		.logButton:hover, .regButton:hover,  .clasButton:hover, .freeButton:hover, .blocButton:hover, .teleButton:hover{
		    background-color: #e68900;
		}
		
		/* Position the Login and Register buttons to the far right */
		.regButton {
		   
		    /*margin-left: auto;*/ /* Push both buttons to the far right */
		} 
		.logButton {
			
		    /*margin-left: 10px; /* Add some space between Login and Register buttons */
		/* margin-left: auto;*/ /* Push both buttons to the far right */
		}  

			/* Flashing animation */
			@keyframes flash {
			    0% {
			        background-color: #333;
			        color: white;
			    }
			    50% {
			        background-color: #ff0000;
			        color: white;
			    }
			    100% {
			        background-color: #333;
			        color: white;
			    }
			}
			
			/* Flashing effect class */
			.flash {
			    animation: flash 1s infinite;
			}
			
					/* Flashing animation */
			@keyframes flasha {
			    0% {
			        background-color: #333;
			        color: white;
			    }
			    50% {
			        background-color: #546166;
			        color: white;
			    }
			    100% {
			        background-color: #333;
			        color: white;
			    }
			}
			
			/* Flashing effect class */
			.flasha {
			    animation: flasha 1s infinite;
			}
								/* Flashing animation */
			@keyframes flasho {
			    0% {
			        background-color: #333;
			        color: white;
			    }
			    50% {
			        background-color: #FFA500;
			        color: white;
			    }
			    100% {
			        background-color: #333;
			        color: white;
			    }
			}
			
			/* Flashing effect class */
			.flasho {
			    animation: flasho 1s infinite;
			}
			
			/* Disabled button style */
			.disabled {
			    background-color: #555 !important;
			    pointer-events: none;
			    opacity: 0.6;
			}


		/* Modal Styles */
		.modal {
			display: none;
		       position: fixed;
		       top: 45%;
		       left: 50%;
		       transform: translate(-50%, -50%);
		       background-color: white;
		       border-radius: 10px;
		       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		       padding: 2rem;
		       z-index: 120;
		       width: 90%;
		       max-width: 300px;
		}
				/* Modal Styles */
		.modalregis {
			display: none;
		       position: fixed;
		       top: 45%;
		       left: 50%;
		       transform: translate(-50%, -50%);
		       background-color: white;
		       border-radius: 10px;
		       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		       
		       z-index: 120;
		       width: 90%;
		       max-width: 300px;
		}
		.modaladmin {
		       position: fixed;
		       top: 45%;
		       left: 50%;
		       transform: translate(-50%, -50%);
		       background-color: white;
		       border-radius: 10px;
		       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		       padding: 2rem;
		       z-index: 120;
		       width: 90%;
		       max-width: 300px;
		}
		.modal-content {
		    background-color: #fefefe;
		    margin: 5% auto;
		    padding: 20px;
		    border: 1px solid #888;
		    width: 300px; /* Could be more or less, depending on screen size */
		}
		
		/* Image Preview */
		.image-preview {
		    margin: 20px 0;
		    width: 100%;
		    height: 200px;
		    border: 1px solid #ccc;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    overflow: hidden;
		    background-color: #f9f9f9;
		}
		
		.image-preview img {
		    max-width: 100%;
		    max-height: 100%;
		    display: block;
		}
		
		.xclose {
		    color: #aaa;
		    float: right;
		    font-size: 28px;
		    font-weight: bold;
		    cursor: pointer;
		}
		
		.xclose:hover,
		.xclose:focus {
		    color: black;
		    text-decoration: none;
		}
		.close {
		   padding: 0.5rem 1rem; 
		   background-color: #ccc; 
		   color: black; 
		   border: none; 
		   border-radius: 5px; 
		   cursor: pointer; 
		   margin-left: 0.5rem;
		}
		
		.close:hover,
		.close:focus {
		    color: black;
		    text-decoration: none;
		    cursor: pointer;
		}
		
		form {
		    display: flex;
		    flex-direction: column;
		}
		
		input[type="text"], input[type="password"] {
		    margin: 10px 0;
		    padding: 10px;
		    font-size: 16px;
		}
		input[type="email"]{
			margin: 10px 0;
  			font-size: 16px;
		}
		
		button {
		
		    padding: 0.5rem 1rem; 
		    background-color: #444; 
		    color: white; 
		    border: none; 
		    border-radius: 5px; 
		    cursor: pointer;"
		}
		
		button:hover {
		    background-color: #575757;
		}  
   
      header, footer {
          background-color: #333;
          color: white;
          text-align: center;
          padding: 1rem;
          flex-shrink: 0;
      }

      header * {
          margin: 0;
          padding: 0.3rem 0;
      }

      footer * {
          margin: 0;
          padding: 0.3rem 0;
      }

      footer {
          /*height: auto;*/ /* Adjust footer height to fit content */
       padding: 0.3rem 1rem;
       /*margin-left: 0%;  
       margin-top:-36px; */
          margin-top: auto;
      }

	.svg-inline--fa {
	  vertical-align: -0.200em;
	}
	
	.rounded-social-buttons {
	  text-align: center;
	}
	
	.rounded-social-buttons .social-button {
	  display: inline-block;
	  position: relative;
	  cursor: pointer;
	  width: 1.125rem;
	  height: 1.125rem;
	  border: 0.125rem solid transparent;
	  padding: 0;
	  text-decoration: none;
	  text-align: center;
	  color: #fefefe;
	  font-size: 0.5625rem;
	  font-weight: normal;
	  line-height: 2em;
	  border-radius: 1.6875rem;
	  transition: all 0.5s ease;
	  margin-right: 0.25rem;
	  margin-bottom: 0.25rem;
	}
	
	.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
	  -webkit-transform: rotate(360deg);
	      -ms-transform: rotate(360deg);
	          transform: rotate(360deg);
	}
	
	.rounded-social-buttons .fa-twitter, .fa-facebook-f, .fa-linkedin, .fa-tiktok, .fa-youtube, .fa-instagram {
	  font-size: 10px;
	}
	
	.rounded-social-buttons .social-button.facebook {
	  background: #3b5998;
	}
	
	.rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
	  color: #3b5998;
	  background: #fefefe;
	  border-color: #3b5998;
	}
	
	.rounded-social-buttons .social-button.twitter {
	  background: #55acee;
	}
	
	.rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {
	  color: #55acee;
	  background: #fefefe;
	  border-color: #55acee;
	}
	
	.rounded-social-buttons .social-button.linkedin {
	  background: #007bb5;
	}
	
	.rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
	  color: #007bb5;
	  background: #fefefe;
	  border-color: #007bb5;
	}
	
	.rounded-social-buttons .social-button.tiktok {
	  background: #000000;
	}
	
	.rounded-social-buttons .social-button.tiktok:hover, .rounded-social-buttons .social-button.tiktok:focus {
	  color: #000000;
	  background: #fefefe;
	  border-color: #000000;
	}
	
	.rounded-social-buttons .social-button.youtube {
	  background: #bb0000;
	}
	
	.rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {
	  color: #bb0000;
	  background: #fefefe;
	  border-color: #bb0000;
	}
	
	.rounded-social-buttons .social-button.instagram {
	  background: #125688;
	}
	
	.rounded-social-buttons .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {
	  color: #125688;
	  background: #fefefe;
	  border-color: #125688;
	}
/*
	@media (max-width: 1024px) {
        .container {
            flex-direction: column;
        }
        .content, aside {
            width: 100%;
        }
    }*/
	/* Medium Screens (Tablets) */
	@media (max-width: 768px) {
	
	     footer{
	       	margin-top: 10px; /* Add spacing between footer and aside */
	     }
	
	     .menu {
	         display: none;
	         position: absolute;
	         top: 100%;
	         /*top: 3rem;*/
	         left: 0;
	         background-color: rgba(68, 68, 68, 0.7); /* More transparent background */
	         flex-direction: column;
	         height: auto;
	         max-height: calc(100vh - 3rem);
	         width: 25%;
	         
	         padding: 0.5rem 0;
	         z-index: 10; /* Ensure menu is above other elements */
	     }
	
	     .menu.active {
	         display: flex;
	     }
	
	     .menu a {
	     	display: block;
	        /* padding: 0.4rem;*/
	        padding: 0.5rem 1rem;
	         text-align: center;
	         border-bottom: 1px solid #555;
	     }
	 	 .menu li {
	       /*display: block;*/
	      }
	      
          .menu-icon {
              display: block;
          }

          .content, aside {
              padding: 0.5rem;
          }
	
	      .submenu {
	          display: none;
	          position: absolute;
	          top: 0;
	          left: 100%;
	          background-color: rgba(68, 68, 68, 0.7);
	          list-style: none;
	          padding: 0;
	          margin: 0;
	          margin-top: -2px;
			  margin-bottom: 0px;
	          z-index: 10;
	          width: 150px;
	      }
	
	       .submenu li {
	           display: block;
	       }
	
	       .submenu a {
	           display: block;
	           padding: 0.5rem 1rem;
	           color: white;
	           text-decoration: none;
	           border-bottom: 1px solid #6b6b6b;
	       }
	
	       .submenu a:hover {
	           background-color: #6b6b6b;
	       }
	
	       li:hover > .submenu {
	           display: block;
	       }
	}

	@media (max-width: 480px) {
	    /*header, footer {
	           font-size: 0.9rem;
	           padding: 0.8rem;
	       }*/
	
		header, footer {
		  padding: 7px;
		  font-size: 1rem; /* Slightly smaller text */
		}
	
		.container {
             flex-direction: column;
             padding: 0.5rem;
         }
		 .menu-icon {
             font-size: 1.5rem;
         }
		
		nav a {
			padding: 0.6rem;
		}
        .content, aside {
            padding: 0.3rem;
        }
        footer {
            padding: 0.5rem;
        }

        footer p {
            font-size: 0.8rem;
        }
	}
	.log {
		display: none;
	}
	#retrievedImage{
		height:10vw;
		width:10vw;
	}
	.hidden { display: none; }