

<style>

  /* General Styles */
    body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }

    /* Top Menu */
    .topmenu {
      background-color: #333;
      color: white;
      padding: 10px 20px;
      position: sticky;
      top: 0;
      z-index: 99999;     /* bring menu above all sections */

      
    }

    .topmenu ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
    }

    .topmenu ul li {
      position: relative;
    }

    .topmenu ul li a {
      color: white;
      padding: 10px 20px;
      text-decoration: none;
      display: block;
    }

    .topmenu ul li a:hover {
      background-color: #444;
    }

    .topmenu ul ul {
      display: none;
      background-color: #444;
      padding-left: 20px;
    }

    .topmenu ul ul li a {
      padding: 10px 15px;
      border-bottom: 1px solid #555; /* Thinner line between submenu items */
    }

    .topmenu ul ul li:last-child a {
      border-bottom: none; /* Remove border for the last item */
    }

    .topmenu ul ul ul {
      padding-left: 20px;
    }

    /* Mobile Menu Toggle */
    .menu-toggle {
      display: none;
      background-color: #333;
      color: white;
      padding: 10px 20px;
      cursor: pointer;
    }

    .menu-toggle i {
      font-size: 24px;
    }

    /* Bottom Menu */
    .bottommenu {
     position: fixed !important;
      bottom: 0;
      width: 100%;
      -background: linear-gradient(90deg, #2193b0, #6dd5ed); /* blue shades */
      background: linear-gradient(135deg, #d7d2cc, #304352);
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
	  -border-radius:25px;
    z-index: 9999;
    bottom: 0;
    left: 0;
    }

    .bottommenu a {
      color: white;
      text-decoration: none;
      text-align: center;
      flex: 1;
      min-width: 60px; /* Ensure items don't get too small */
    }

    .bottommenu i {
      font-size: 20px;
      display: block;
	  
    }



    /* Homepage Content */
    .homepage {
      padding: 20px;
      text-align: center;
      margin-bottom: 60px; /* Add margin to avoid overlap with bottom menu */
    }

    .homepage h1 {
      font-size: 2.0rem;
      margin-bottom: 20px;
    }

    .homepage p {
      font-size: 1.2rem;
      line-height: 1.6;
    }

    .homepage img {
      max-width: 100%;
      height: auto;
      margin: 20px 0;
      border-radius: 10px;
      animation: fadeIn 2s ease-in-out;
    }

		main {
			padding-top: 5px;
			padding-bottom: 70px;
			flex: 1;
			overflow-y: auto;
		}

		.dashboard {
			max-width: 1200px;
			margin: 0 auto;
			padding: 20px;
		}

		.stats {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 15px;
			margin-bottom: 20px;
		}

		.stat-box {
			background-color: lightblue;
			padding: 15px;
			text-align: center;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}

		.stat-box i {
			font-size: 24px;
			margin-bottom: 10px;
			color: #333;
		}

		.stat-box h2 {
			font-size: 16px;
			margin: 0;
			color: #555;
		}

		.stat-box p {
			font-size: 18px;
			margin: 5px 0 0;
			font-weight: bold;
			color: #333;
		}

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    /* Responsive Styles */
    @media (max-width: 768px) {
      .menu-toggle {
        display: block;
      }

      .topmenu ul {
        display: none;
      }

      .topmenu ul.active {
        display: block;
      }

      .topmenu ul li {
        width: 100%;
      }

      .topmenu ul ul {
        position: static;
        padding-left: 20px;
      }
	  
		.homepage h1 {
		  font-size: 1.5rem;
		  margin-bottom: 20px;
		}

      .bottommenu {
        flex-wrap: nowrap; /* Ensure bottom menu stays in a single row */
        overflow-x: auto; /* Allow horizontal scrolling if needed */
		max-width: 100%;
		z-index: 1000 !important;
		transform: none !important;
      }

      .bottommenu a {
        flex: 1;
        min-width: 60px; /* Ensure items don't get too small */
      }
				main {
					padding-top: 5px;
					padding-bottom: 70px;
					flex: 1;
					overflow-y: auto;
				}

				.dashboard {
					
					margin: 0 auto;
					padding: 20px;
				}

				.stats {
					display: grid;
					grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
					gap: 15px;
					margin-bottom: 20px;
				}

				.stat-box {
					background-color: lightblue;
					padding: 15px;
					text-align: center;
					border-radius: 5px;
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				}

				.stat-box i {
					font-size: 24px;
					margin-bottom: 10px;
					color: #333;
				}

				.stat-box h2 {
					font-size: 16px;
					margin: 0;
					color: #555;
				}

				.stat-box p {
					font-size: 18px;
					margin: 5px 0 0;
					font-weight: bold;
					color: #333;
				}	  
	  
    }

    @media (min-width: 769px) {
      .topmenu ul {
        flex-direction: row;
      }

      .topmenu ul li:hover > ul {
        display: block;
      }

      .topmenu ul ul {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
      }

      .topmenu ul ul ul {
        left: 100%;
        top: 0;
      }
	  
				main {
					padding-top: 5px;
					padding-bottom: 70px;
					flex: 1;
					overflow-y: auto;
				}

				.dashboard {
					
					margin: 0 auto;
					padding: 20px;
				}

				.stats {
					display: grid;
					grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
					gap: 15px;
					margin-bottom: 20px;
				}

				.stat-box {
					background-color: lightblue;
					padding: 15px;
					text-align: center;
					border-radius: 5px;
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				}

				.stat-box i {
					font-size: 24px;
					margin-bottom: 10px;
					color: #333;
				}

				.stat-box h2 {
					font-size: 16px;
					margin: 0;
					color: #555;
				}

				.stat-box p {
					font-size: 18px;
					margin: 5px 0 0;
					font-weight: bold;
					color: #333;
				}
					  
	  
    }
	
	
  </style>