@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");

 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
 }

 :root {
     --sidebarwidth: 300px;
     --dark-blue: #00487a;
     --dark-blue-2: #0989df;
     --black-1: #36454F;

     --text-white-1: whitesmoke;

     --border-grey-1: #f2f2f2;
 }

 body {
     /*     min-height: 100vh;
    display: flex; */
     font-family: "Roboto", sans-serif;
 }
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}

 .top-heading-main {
     background: var(--dark-blue-2);
     padding: 5px 10px;
 }

 .top-heading-main>h3 {
     font-weight: 500;
     font-size: 14px;
     color: var(--text-white-1);
 }

 .mid-heading-main {
     color: var(--text-white-1);
     background: var(--dark-blue);
     border-bottom: 1px solid var(--border-grey-1);
 }

 .mid-heading-main h3 {
     font-weight: 500;
     text-align: center;
 }

 .navigation-header {
     background: #00487a;

 }

 .navigation-header>ul {
     display: flex;
     justify-content: center;
 }

 .navigation-header>ul>li {
     padding: 12px;
 }

 .navigation-header>ul>li>a {
     color: #00487a;
 }

 .navigation-header>ul>li:hover {
     background-color: #00416E;
 }

 .navigation-header>ul>li>a {
     color: white;
     font-size: 13px;
     text-decoration: none;
     cursor: pointer;
 }

 .active-link {
     background-color: #00416E;
 }

 .navigation-header {
     position: sticky;
     top: 0;
     z-index: 999;
     background: var(--dark-blue);

 }

 .navigation-header ul {
     list-style: none;
     display: flex;

 }

 .navigation-header ul li a {
     color: #fff;
     text-decoration: none;
     font-size: 12px;
 }

 .navigation-header ul li.active a {
     color: #ffcc00;
 }

 /* Hamburger */
 .hamburger {

     padding: 5px;
     display: none;
     background: none;
     border: none;
     cursor: pointer;
 }

 .hamburger span {
     width: 26px;
     height: 3px;
     background: #fff;
     margin: 4px 0;
     display: block;
 }
.hamburger span {
    transition: all 0.3s ease;
}

/* When menu is open */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -5px);
}
 /* Mobile */
 @media (max-width: 768px) {
     .top-heading-main > h3{
         font-size: 10px;
     }
     .mid-heading-main h3{
        font-size: 13px;
     }
     .hamburger {
         display: block;
     }

     .navigation-header ul {
         position: absolute;
         top: 35px;
         left: 0;
         width: 100%;
         background: var(--dark-blue);
         flex-direction: column;
         overflow: hidden;

         /* Slide animation */
         max-height: 0;
         opacity: 0;
         transition: max-height 0.4s ease, opacity 0.3s ease;
     }

     .navigation-header ul.show {
         max-height: 500px;
         opacity: 1;
     }

     .navigation-header ul li {
         text-align: center;
         padding: 12px 0;
     }
 }