<style>
body {
    margin: 0;
}

@font-face {
    font-family: "Brandon";
    src: url("../WebFiles/assets/fonts/BrandonTextWeb-Regular.woff") format("woff"),
         url("../WebFiles/assets/fonts/BrandonTextWeb-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
	font-family: "Brandon";
	src: url("../WebFiles/assets/fonts/BrandonTextWeb-Bold.woff") format("woff"),
		url("../WebFiles/assets/fonts/BrandonTextWeb-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Brandon";
	src: url("../WebFiles/assets/fonts/BrandonTextWeb-Black.woff") format("woff"),
		url("../WebFiles/assets/fonts/BrandonTextWeb-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
}

/* This completely removes the logo from the layout */
.ApplicationLogoContainer {
    display: none;
}

/* Make second header text smaller */
.ApplicationTitle {
    font-size: 1.1rem; /* Adjust this value as needed */
    font-weight: 500;
}

.ManagerName {
    font-size: 1.1rem; /* Match ApplicationTitle size */
    font-weight: 500;
    margin: 0; /* Remove default h1 margins */
}

/* Ensure vertical alignment */
.ApplicationHeaderContainer h1 {
    margin: 0;
    padding: 0;
}

/* Remove any height constraints or relative positioning from parent containers */
.PageWrapper, 
.ContentWrapper {
    @media screen and (max-width: 1280px) {
        padding-top: 52px;
    }
}

.site-header {
    background-color: #003865;
    font-family: "Brandon", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    width: 100%;
    top: 0;
    z-index: 99;

    @media screen and (max-width: 1280px) {
      background-color: #001f37;
      position: sticky;
    }
}
.site-header .container {
    display: flex;
    justify-content: space-between;
    max-width: 1792px;
    padding: 3px 96px;
    margin: 0 auto;

    @media screen and (max-width: 1280px) {
      padding: 4px 1.25rem;
      margin: 0;
    }
}
.site-header .branding {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .branding .dps-logo {
    @media screen and (max-width: 1280px) {
      height: 1.5rem;
      width: 1.5rem;
    }
  }
  .branding > a {
    display: flex;
    gap: 1rem;
    text-decoration: none;

    @media screen and (max-width: 1280px) {
      gap: 0.5rem;
    }
  }
  .branding > a:hover h1 {
    text-decoration: underline;
  }
  .branding h1 {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    @media screen and (max-width: 1280px) {
      font-size: 0.75rem;
    }
  }
  .main-menu {
  display: flex;
  align-items: center;
  justify-content: center;

  @media screen and (max-width: 1280px) {
    display: none;
  }
}

.main-menu-list {
  list-style: none;
  display: flex;
  gap: 1rem;
}

  .main-menu-list,
  .dvs-menu-list {
    list-style: none;
    display: flex;
    gap: 1rem;

    @media screen and (max-width: 1280px) {
      gap: 0;
    }
  }
.main-menu-item {
  display: flex;
  align-items: center;
}

  .main-menu-link {
    color: white;
    font-weight: 700;
    text-decoration: none;
  }
  .main-menu-link:hover {
    text-decoration: underline;
  }
 header {
    @media screen and (max-width: 1280px) {
      position: fixed; 
      top: 0;
      background: #fff;
      width: 100%;
      z-index: 98; 
    }
}
.dvs-header {
    font-family: "Brandon", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    position: relative; /* Start as relative */
    width: 100%;
    z-index: 97;
    background: #fff;
    border-bottom: 3px solid #78be21;
}
  .dvs-menu-link {
    color: black;
    font-weight: 700;
    text-decoration: none;
  }
  .dvs-menu-link:hover {
    text-decoration: underline;
  }
  .dvs-header .container {
    display: flex;
    justify-content: space-between;
    max-width: 1792px;
    padding: 1rem 96px;
    margin: 0 auto;

    @media screen and (max-width: 1280px) {
      padding: 0.5rem 1.25rem;
    }
  }
  .dvs-header .dvs-logo {
    @media screen and (max-width: 1280px) {
      height: 50px;
      width: 125px;
    }
  }
  .dvs-header .toggle {
    display: none;

    @media screen and (max-width: 1280px) {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }
  .dvs-header .toggle svg {
    height: 30px;
    width: 35px;
    cursor: pointer;
  }
  .dvs-header .toggle .x.closed {
    display: none;
  }
  .dvs-header .toggle .bars.open {
    display: none;
  }
  .dvs-header .toggle p {
    font-size: 0.75rem;
    line-height: 1rem;
    margin: 0;
  }
  .dvs-header .right-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease-in-out;
  }
  .dvs-header .right-content.closed {
    @media screen and (max-width: 1280px) {
      display: none;
    }
  }
  .dvs-header .right-content.open {
    @media screen and (max-width: 1280px) {
      display: flex;
      background: #fff;
      position: fixed;
      padding: 1.25rem;
      top: 101px;
      left: 0;
      width: 100%;
      height: calc(100vh - 101px);
      justify-content: flex-start;
      overflow-y: auto;
      z-index: 96;
    }
}
  .search {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: relative;

    @media screen and (max-width: 1280px) {
      display: block;
      width: calc(100% - 55px);
    }
  }
  .search svg {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    max-height: 1rem;
    max-width: 1rem;
    cursor: pointer;
    padding: 0.5rem;
  }
  .search svg:hover {
    background-color: #003865;
    border-radius: 9999px;
  }
  .search svg:hover path {
    fill: white;
  }
  .dvs-header .right-content .search input {
    font-size: 1.125rem;
    font-family: "Brandon", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-weight: 400;
    color: black;
    background-color: #f5f6f7;
    border-radius: 9999px;
    width: 25rem;
    border: none;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;

    @media screen and (max-width: 1280px) {
      width: 100%;
    }
  }
  .dvs-header .right-content .search input::placeholder {
    color: #000;
  }
  .dvs-menu-list {
    margin: 0;

    @media screen and (max-width: 1280px) {
      padding: 0;
      flex-direction: column;
    }
  }
  .dvs-menu-item {
    @media screen and (max-width: 1280px) {
      width: calc(100% - 55px);
    }
  }
  .dvs-menu-link {
    padding: 1rem;
    font-size: 1.25rem;
    
    @media screen and (max-width: 1350px) {
      padding-left: 0.5rem;
    }
    @media screen and (max-width: 1280px) {
      display: block;
      padding: 0.5rem 0.5rem 0.5rem 0;
      border-bottom: 2px solid #77858d40;
      width: 100%;
    }
  }
  .dvs-menu-link:last-of-type {
    padding-right: 0;
  }

  footer {
    font-family: "Brandon", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  }
  .footer-main {
    background-color: #003865;
    border-top: 3px solid #fed34f;
  }
  .footer-main .footer-main-top {
    display: flex;
    justify-content: space-between;
    margin: 4rem 0 2rem;

    @media screen and (max-width: 1020px) {
      flex-direction: column;
      gap: 1rem;
      margin: 1.25rem 0 0 0;
    }
  }
  .footer-main .footer-main-top h2 {
    color: white;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.15rem;
    margin: 0;
  }
  .footer-main .footer-main-top .socials {
    display: flex;
    gap: 2rem;

    @media screen and (max-width: 1020px) {
      padding: 0;
      margin: 0;
      gap: 0.5rem;
    }
  }
  .footer-main .footer-main-top .socials svg {
    fill: white;
    width: 2.25rem;
    height: 2.25rem;

    @media screen and (max-width: 1020px) {
      width: 1.5rem;
      height: 1.5rem;
    }
  }
  .footer-main .footer-main-top .socials svg:hover {
    opacity: 0.8;
  }
  .footer-main .container {
    display: flex;
    flex-direction: column;
    max-width: 1792px;
    padding: 1rem 96px 2rem;
    margin: 0 auto;

    @media screen and (max-width: 1020px) {
      padding: 0 1.25rem;
      margin: 0;
    }
  }
  .footer-menu {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 3rem;

    @media screen and (max-width: 1020px) {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 3rem;
    }
  }
  .footer-menu-list {
    list-style: none;
    padding: 1rem 0 0;
    margin-top: 1rem;
    border-top: 2px solid #9bcbeb;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    @media screen and (max-width: 1020px) {
      gap: 0;
      margin-bottom: 0;
    }
  }
  .footer-menu-list > .footer-menu-item > a {
    text-decoration: none;
  }
  .footer-menu-list h3 {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0;
  }
  .footer-menu-list .footer-menu-item .footer-menu-link {
    color: white;
    text-decoration: none;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.25rem;
  }
  .footer-menu-list .footer-menu-item .footer-menu-link:hover {
    text-decoration: underline;
  }
  .footer-menu-list h3:hover {
    text-decoration: underline;
  }
  .footer-utility {
    background-color: #002d51;
    padding: 4rem 0;
  }
  .footer-utility .utility-content {
    width: 75%;

    @media screen and (max-width: 1020px) {
      width: 100%;
    }
  }
.footer-utility .branding {
    @media (min-width: 1024px) {
    flex-direction: row;
    display: flex
}
@media screen and (max-width: 1020px) {
      display: flex;
      flex-direction: column;
      text-align: center;
      gap: 1rem;
      margin-bottom: 2rem;
      justify-content: center;
     align-items: center;
    }
  }
  .footer-utility .container {
    display: flex;
    justify-content: space-between;
    max-width: 1792px;
    padding: 1rem 96px;
    margin: 0 auto;

    @media screen and (max-width: 1020px) {
      padding: 0 1.25rem;
      flex-direction: column;
    }
  }
  #vote {
    color: white;
    text-decoration: none;
    font-weight: 400;
    font-size: 1.125rem;
    margin-left: 2rem;
  }
  #vote:hover {
    text-decoration: underline;
  }
  #vote svg {
    fill: white;
    width: 1.125rem;
    height: 1rem;
  }
  .footer-utility .utility-menu {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;

    @media screen and (max-width: 1020px) {
      flex-direction: column;
      text-align: center;
    }
  }
  .footer-utility .utility-menu a,
  .footer-utility p {
    color: white;
    font-weight: 400;
    font-size: 1.125rem;
    margin: 0;

    @media screen and (max-width: 1020px) {
      text-align: center;
    }
  }
.footer-utility .utility-menu a{
    text-decoration: underline;
  }

  .footer-utility .utility-menu a:hover {
    opacity: 0.8;
  }
  .footer-seal {
    @media screen and (max-width: 1020px) {
     width: 100%;
     display: flex;
     justify-content: center;
     margin-top: 2rem; 
    }

</style>