.horizontal-nav{
  display: contents;
}

.top{
  position: fixed;
  z-index: 999;
  width: 100%;
}
  
/* Navbar container */
.navbar1 {
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #4485f3;
  font-family: Arial, sans-serif;
  height: 50px;
  width: 100%; /* Ensure the navbar covers the full width of the viewport */
  justify-content: flex-end; /* Aligns all items to the right */
}

/* Links inside the navbar */
.navbar1 a {
  font-size: 20px;
  color: #e0e0e0;
  padding: 14px 16px;
  text-decoration: none;
  margin: 0; /* Remove any margin to ensure proper alignment */
}

.navbar1 a:hover {
  color: white
}

/* Navbar container 2*/
.navbar {
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #595959;
  font-family: Arial;
  height: 100px;
}

/* Links inside the navbar */
.navbar a {
  font-size: 20px;
  color: #d3d3d3;
  padding: 14px 16px;
  text-decoration: none;
  margin: 10px;
}


/* The dropdown container */
.dropdown {
  overflow: hidden;
}
  
/* Dropdown button */
.dropdown .dropbtn {
  font-size: 20px;
  border: none;
  outline: none;
  color: #d3d3d3;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  color: white
}
  
/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
  
  /* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #595959;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
  
  /* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  color: #303030;
}
  
  /* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.vertical-nav{
  display: none;
}

.topnav {
  background-color: #595959;
  overflow: hidden;
  height: 68px;
  position: fixed;
  width: 100%;
  z-index: 999;
  display: flex; /* Use Flexbox */
  align-items: center; /* Vertically center the items */
  justify-content: space-between; /* Space items between start and end */
}

/* Style the links inside the navigation bar */
.topnav a {
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  line-height: 68px; /* Ensures text is vertically centered */
}

/* Create a right-aligned (split) link inside the navigation bar */
.topnav a.split {
  margin-left: 10px; /* Moves split links to the right */
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #595959;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.sidenav a {
  padding: 10px;
  text-decoration: none;
  font-size: 22px;
  color: #d3d3d3;
  display: block;
  transition: 0.3s;
  text-align: right;
  margin-right: 20px;
}

.sidenav a:hover {
  color: white
}

.sidenav .closebtn {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 36px;
}

/* Dropdown button */
.sidenav .dropdown-btn {
  font-size: 22px;
  color: #d3d3d3;
  display: block;
  text-align: right;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px 10px 0; /* Add padding-right to create space */
  box-sizing: border-box; /* Include padding in the button's width */
}

.sidenav .dropdown-btn:hover {
  color: white
}

/* Dropdown container */
.sidenav .dropdown-container {
  display: none;
  align-items: flex-end;
  flex-direction: column;
}

/* Dropdown items */
.sidenav .dropdown-container a {
  font-size: 18px;
  color: #d3d3d3;
  text-align: right;
  text-decoration: none;
  padding: 0 0; /* Adjust padding for better clickable area */
  margin-right: 40px;
  width: 100%; /* Adjust width as necessary */

}

.dropdown-container a:hover{
  color: white
}

/* Active dropdown */
.sidenav .dropdown-btn.active + .dropdown-container {
  display: flex;
}

.dropdown-btn.active{
  background-color: #4485f3;
  color: white;
  width: 275px;
}

@media only screen and (max-width: 775px){
  .horizontal-nav{display: none;}
  .vertical-nav{display:contents}
}

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

}