.menu-mobile {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 5em;
   background: rgb(255, 255, 255);
   z-index: 1999;
   overflow: hidden;
}

.close-out-menu {
   position: absolute;
   top: 0;
   right: 0;
   width: 30%;
   height: 100%;
   background-color: transparent;
}

#burger-toggle {
   position: absolute;
   appearance: none;
   opacity: 0;
}

#burger-toggle:checked~.menu {
   opacity: 1;
   visibility: visible;
}

#burger-toggle:checked~.menu .menu-nav-link span div,
#burger-toggle:checked~.menu img,
#burger-toggle:checked~.menu .title p {
   transform: translateY(0);
   transition: 1.2s 0.1s cubic-bezier(0.35, 0, 0.07, 1);
}

#burger-toggle:checked~.burger-menu .line::after {
   transform: translateX(0);
}

#burger-toggle:checked~.burger-menu .line:nth-child(1) {
   transform: translateY(calc(var(--burger-menu-radius) / 5)) rotate(45deg);
}

#burger-toggle:checked~.burger-menu .line:nth-child(2) {
   transform: scaleX(0);
}

#burger-toggle:checked~.burger-menu .line:nth-child(3) {
   transform: translateY(calc(var(--burger-menu-radius) / -5)) rotate(-45deg);
}

.burger-menu {
   --burger-menu-radius: 3em;
   position: fixed;
   top: 1em;
   left: 2em;
   z-index: 100;
   display: block;
   width: var(--burger-menu-radius);
   height: var(--burger-menu-radius);
   outline: none;
   cursor: pointer;
}

.burger-menu .line {
   position: absolute;
   /* left: 25%; */
   left: 20%;
   /* width: 50%; */
   width: 60%;
   height: 3px;
   /* background: rgba(43, 61, 79, 0.3); */
   background: linear-gradient(to left, #005197, #339f5b) !important;
   border-radius: 10px;
   overflow: hidden;
   transition: 0.5s;
}

.burger-menu .line:nth-child(1) {
   top: 30%;
}

.burger-menu .line:nth-child(2) {
   top: 50%;
}

.burger-menu .line:nth-child(3) {
   top: 70%;
}

.burger-menu .line::after {
   position: absolute;
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--primary-color-darker);
   transform: translateX(-100%);
   transition: 0.25s;
}

.burger-menu .line:nth-child(2)::after {
   transition-delay: 0.1s;
}

.burger-menu .line:nth-child(3)::after {
   transition-delay: 0.2s;
}

.burger-menu:hover .line::after {
   transform: translateX(0);
}

.logo-mobile {
   --burger-menu-radius: 3em;
   position: fixed;
   width: var(--burger-menu-radius);
   height: var(--burger-menu-radius);
   top: 1em;
   right: 2em;
   z-index: 999;
}

.menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   /* justify-content: center; */
   /* align-items: center; */
   background: rgb(255, 255, 255, 0.7);
   opacity: 0;
   overflow-x: hidden;
   visibility: hidden;
   transition: 0.3s;
}

@media screen and (max-width: 750px) {
   .menu {
      display: block;
   }
}

.menu-inner {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   /* align-items: center; */
   width: 70%;
   /* padding-left: 5vw; */
   background: white;
   height: fit-content;
   min-height: 100vh;
}



.menu-nav {
   display: flex;
   flex-direction: column;
   /* flex-wrap: wrap; */
   margin: 0;
   padding: 0;
   /* text-align: center; */
   list-style-type: none;
   height: fit-content;
   margin-top: 16vh;
   padding-left: 3rem;
}

@media screen and (max-width: 750px) {
   .menu-nav {
      flex-direction: column;
   }
}

.menu-nav-item {
   flex: 1;
   margin-bottom: 2rem;
}

.menu-nav-link {
   position: relative;
   display: inline-flex;
   font-size: 1.5rem;
   /* font-size: 2rem; */
   /* color: white; */
   text-decoration: none;
}

.menu-nav-link span {
   overflow: hidden;
}

.menu-nav-link span div {
   transform: translateY(102%);
}

.menu-nav-link::after {
   position: absolute;
   content: "";
   top: 100%;
   left: 0;
   width: 100%;
   height: 3px;
   background: var(--primary-color);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform 0.5s;
}

.menu-nav-link:hover::after {
   transform: scaleX(1);
   transform-origin: left;
}


.bottom-menu {
   margin: 3rem;
   height: 20%;
}

.in-bottom {
   padding: 1rem;
   display: flex;
   flex-direction: column;
   border-top: 1px solid #53535352;
}

.in-bottom span {
   margin: 0.5rem 0;
   font-size: 14px;
}



@media (max-width: 986px) {
   header {
      display: none;
   }

   .menu-mobile {
      display: block;
   }
}