<style>

	h1 {
            text-align: center; /* Center the heading text */
            color: #BFA181; /* White text for better contrast on gradient */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a subtle text shadow */
            padding: 1px; /* Add some padding around the heading */
         }

        body {
	    height: 100%;
            font-family: Arial, sans-serif;
            margin: 0;
         /* background-color: #f4f4f9; */
	    background: linear-gradient(to bottom, #33ccff, #ff99cc);
            background-repeat: no-repeat;
            background-size: cover;
        }

/* --- Navigation Bar Styling --- */
	.navbar {
            background-color: #01257D;
    	    overflow: hidden;
   	    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.tab-link {
    	    background-color: inherit;
    	    color: white;
    	    float: left;
    	    border: none;
    	    outline: none;
    	    cursor: pointer;
    	    padding: 14px 16px;
    	    transition: 0.3s;
    	    font-size: 17px;
	}

	.tab-link:hover {
    	    background-color: #555;
	}

	.tab-link.active {
    	    background-color: #04AA6D; /* A vibrant green for active tab */
    	    color: white;
	}

/* --- Content Styling --- */
	.content-container {
    	    padding: 20px;
   	    margin-top: 10px; /* Space below the navbar */
	}

	.tab-content {
    	   width: 100%;
    	   float: center;
    	   animation: fadeEffect 1s; /* Optional: Fade in effect */
    	   border-radius: 8px;
   	   padding: 20px;
    
    	   box-shadow: 0 4px 8px rgba(0,0,0,0.05);
	}

	/* Key utility class for hiding content */
	.hidden {
    	    display: none;
	}

/* --- Form Styling --- */
.query-form-container {
    float: center;
    max-width: 500px;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

#visitorQueryForm label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

#visitorQueryForm input[type="text"],
#visitorQueryForm input[type="email"],
#visitorQueryForm textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    box-sizing: border-box; /* Important for padding/width */
    border: 1px solid #ccc;
    border-radius: 4px;
}

#visitorQueryForm button[type="submit"] {
    background-color: #007BFF;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

#visitorQueryForm button[type="submit"]:hover {
    background-color: #0056b3;
}

#form-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    background-color: #e6ffe6;
    color: #04AA6D;
    border: 1px solid #04AA6D;
    font-weight: bold;
}

.side-tab-container {
    display: flex;
    border: 1px solid #ddd; /* A subtle border to separate it from main content */
    margin-top: 15px;
    background-color: #f9f9f9;
}

.side-tab-menu {
    width: 150px;
    background-color: green;
    display: flex;
    flex-direction: column;
}

.side-button {
    background-color: green;
    color: black;
    padding: 12px 10px;
    border: none;
    border-bottom: 1px solid #ddd;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
}

.side-button:hover {
    background-color: #ced4da;
}

.side-button.active {
    background-color: white; /* Highlight active background */
    color: #007bff;
    border-right: none;
    font-weight: bold;
}

/* Side Tab Content Area */
.side-tab-content-area {
    flex-grow: 1; /* Takes up all remaining width */
    padding: 15px;
    color: white;
    background-color: black;
    }

	.side-tab-content {
    	   animation: fadeIn 0.5s; /* Reuse the fade-in animation */
	}


table {
    width: 50%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: Arial, sans-serif;
  }
  th, td {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
  }
  th {
    background-color: gold;
    color: #333;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
    color:black;
  }

	/* Optional animation */
	@keyframes fadeEffect {
    	   from {opacity: 0;}
    	   to {opacity: 1;}
	}
</style>
