@media screen and (max-width:768px) {
  .showcase{
    max-width: 1024px;
    padding: 10px;
    text-align: center;
  }
  .showcase h1{
    font-size: 40px;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .showcase p{
    font-size: 16px;
  }
  .mg{
    width: 100%;
  }
  .content-wrapper {
    flex-direction: column;
  }
  .hamburger{
    display: block;
  }
  /* hamburger animation */
  .hamburger.active .bar:nth-child(2){
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1){
   transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
   }
   .nav-menu{
    position: fixed;
    left: -100%;
    top: 0;
    gap: 0;
    flex-direction: column;
    background-color: #002147;
    width: 100%;
    transition: 0.3s;
   }
   .nav-menu.active{
    left: 0;
   }
    .content-text{
      width: 100%;
      margin-bottom: 10px;
    }
   .footer-links{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
   }
   .links {
    border-bottom: 1px solid white;
   }
}