/* Main Menu Navigation CSS */
ul.nav-menu {
        list-style-type: none; /* Removes default bullets */
        margin: 0;
        padding: 0;            /* CRITICAL: Strips default browser indentation padding */
        display: flex;         /* Align the list items horizontally */
        background-color: fff;
        justify-content: center; /* Centers the row items horizontally */
        font-family: var( --font-family-main);
        font-size: 0.9rem;
        width: auto;
      }

/* Apply padding to the actual links */
ul.nav-menu li a {
  display: block;                  /* Allows the element to respect top/bottom padding */
  color: var(--nav-menu-maincolor);
  text-decoration: none;
  padding: 0px 20px;              /* 14px Top/Bottom | 20px Left/Right spacing */
  transition: background-color 0.3s;
}

/* Hover effect */
ul.nav-menu li a:hover {
  background-color: #fff;
  color: var(--nav-menu-maincolor);
}

/* Style the active class */
.menu-container a.active {
  background-color: #fff;
  color: var(--nav-menu-maincolor);
  font-weight: bold;
}

/*Drop the image when the screen is smaller than 600px */
@media screen and (max-width: 1300px) {
  .menu-container {
    display: none;
  }
}

/* Main Menu Navigation CSS above */




/* Logo CSS below */

/* Base styles for the image */
.responsive_logo { 
  float: left; 
  margin-top: 9px;
}


/*Drop the image when the screen is smaller than 600px 
@media screen and (max-width: 700px) {
  .responsive_logo {
    display: none;
  }
}
*/
/* Logo CSS above */









/* Hamburger Vertical Menu CSS  */

.hamburger-container {
  width: max-content;
  float: right;
  top: 10px;
  left: 10px;
  margin-right: 40px; /*menu will appear from right*/
  color: rgb(122, 29, 29);
  transition: transform 0.5s ease;
  display: none;
}

/* We don't need the checkbox to be visible, but we can't set it to display: none because this will break keyboard navigation. 
Instead set the opacity to 0 and the position to absolute so it doesn't push the rest of the content down */
.hamburger-container .checkbox {
  opacity: 0;
  position: absolute;
}

/* Show an outline when the hamburger is selected using the keyboard. 
Older browsers don't support :focus-visible, so we will just use :focus here. */
.hamburger-container .checkbox:focus ~ .hamburger {
  /* Not all browsers support outline: auto, so set a sensible fallback outline. */
  outline: none;
  outline: auto;
  outline-offset: 4px;
}

/* For newer browsers that do support :focus-visible, hide the outline when 
the checkbox isn't selected with the keyboard. */
@supports selector(:focus-visible) {
  .hamburger-container .checkbox:not(:focus-visible) ~ .hamburger {
   outline: none;
  }
}

/* Hide any focusable elements in the drawer by default to aid keyboard navigation. 
We use visibility so it makes the elements unfocusable, but doesn't affect the layout. 
We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, 
but take half a second to hide it when we close the drawer. */
.hamburger-container .drawer a {
  visibility: hidden;
  transition: visibility 0.5s linear;
}

/* Make the focusable elements in the drawer visible 
when it is open. */
.hamburger-container .checkbox:checked ~ .drawer a {
  visibility: visible;
}

.hamburger-container .checkbox:checked ~ .drawer {
  transform: translateX(0%);
  transform: translateY(15%);
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) {
  opacity: 0;
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.hamburger {
  width: 20px;
  height: 20px;
  float: right;  /*keep hamburger right */
  display: block;
  transition: transform 0.5s ease;
  z-index: 1;
  cursor: pointer;
  padding-top: 10px;
}

.hamburger .slice {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
  transition: all 0.5s ease;
}

.hamburger .slice:not(:first-child) {
  margin-top: 6px;  /* Distance between slices */
}

.drawer {
  position: right;
  left: 0;
  top: 0;
  height: 100%;
  width: max-content;
  max-width: 100%;
  padding: 10px;
  background: #fff; /*background color of transition */
  transform: translateY(-100%);
  /*transform: translateX(-100%);*/
  transition: transform 0.5s ease;
  font-size: 1.1rem;
}

.drawer .nav-list {
  padding: 0;
  list-style: none;
  margin-top: 10px;
  margin-left: 20px;

}

.drawer .nav-list .nav-list-item {
  padding-bottom: 10px;
  
}

/* Make the drawer full-width on mobile */
@media screen and (max-width: 768px) {
  .drawer {
    width: 100%;
  }
}

.content {
  margin-top: 5px;
  padding: 10px;
}

a {
  color: rgb(90, 80, 171); /* color of links*/
  text-decoration: none;
}

a:hover {
  color: rgb(29, 20, 63);
}

/* Show the element only when the screen width is 768px or smaller */
@media (max-width: 1300px) {
  .hamburger-container {
    display: block;
  }
}

/* Hamburger Vertical Menu CSS above  */