/* General Reset */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

  }

 

  body {

    font-family: Arial, sans-serif;

    line-height: 1.6;

  }

 

  .navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 20px;

    background-color: #333;

    color: #fff;

  }

 

  .logo {

    font-size: 1.5em;

    font-weight: bold;

  }

 

  .nav-links {

    list-style: none;

    display: flex;

    gap: 20px;

  }

 

  .nav-links li a {

    color: white;

    text-decoration: none;

    font-size: 1.1em;

    transition: color 0.3s;

  }

 

  .nav-links li a:hover {

    color: #00bcd4;

  }

 

  /* Burger Icon */

  .menu-icon {

    display: none;

    flex-direction: column;

    cursor: pointer;

    gap: 5px;

  }

 

  .menu-icon span {

    width: 25px;

    height: 3px;

    background-color: white;

    transition: transform 0.3s, opacity 0.3s;

  }

  h1{

    text-align: center;

    margin-top: 20%;

    justify-content: center;

    opacity: 50%;

  }


    /* Responsive Styles */

  @media (max-width: 768px) {

    .menu-icon {

      display: flex;

    }

 

    .nav-links {

      flex-direction: column;

      position: absolute;

      top: 60px;

      right: 0px;

      background-color: #444;

      width: 200px;

      transform: translateX(100%);

      transition: transform 0.3s ease-in-out;

      text-align: center;

      padding: 10px 0;

    }

 

    .nav-links.active {

      transform: translateX(0);

    }

 

    .nav-links li {

      margin: 10px 0;

    }

}