/* 
如使用请留版权
TSNA Team Development Please leave copyright if used
이용하시는 분은 저작권을 남겨주세요
Copyright tsna.cc
*/
    /* Global Styles */
    body {
      margin: 0;
      padding: 0;
      font-family: 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.6;
      background-color: #000;
      color: #fff;
    }

    /* Navigation Bar Styles */
    header {
      background-color: #000;
      color: #fff;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1em;
    }

    nav .logo img {
      height: 50px;
    }

    nav .hamburger {
      color: #fff;
      font-size: 1em;
      cursor: pointer;
      display: none;
    }

    nav .menu {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    nav .menu li {
      display: inline-block;
      margin-left: 1em;
    }

    nav .menu li a {
      color: #fff;
      text-decoration: none;
      font-size: 0.9em;
      transition: color 0.3s ease;
    }

    nav .menu li a:hover {
      color: #FFA726;
    }

    /* Main Content Styles */
    main {
      margin: 2em;
    }

    main .hero {
      text-align: center;
      padding: 2em 0;
    }

    main .hero .title {
      font-size: 2.5em;
      margin-bottom: 0.5em;
    }

    main .hero p {
      color: #ccc;
    }

    main .hero .cta-button {
      display: inline-block;
      padding: 0.5em 2em;
      background-color: #fff;
      color: #000;
      text-decoration: none;
      border-radius: 2em;
    }

    main .container {
      background-color: #333;
      padding: 2em;
      border-radius: 3px;
      margin-bottom: 2em;
    }

    main .container h2 {
      margin-bottom: 1em;
    }

    main .container .feature {
      margin-bottom: 1em;
    }

    /* Contact Form Styles */
    form {
      display: flex;
      flex-direction: column;
    }

    form input,
    form textarea {
      padding: 0.5em;
      margin-bottom: 1em;
      border: none;
      background-color: #eee;
    }

    form button {
      padding: 0.5em 2em;
      background-color: #fff;
      color: #000;
      border: none;
      border-radius: 2em;
      cursor: pointer;
    }

    /* Footer Styles */
    footer {
      background-color: #000;
      color: #fff;
      padding: 1em 0;
      text-align: center;
    }

    footer .social-links a {
      display: inline-block;
      margin-right: 1em;
    }

    footer p {
      margin: 0;
    }

    /* Media Queries */
    @media only screen and (

max-width: 768px) {
      nav .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 5em;
        right: 0;
        background-color: #000;
        padding: 1em;
        border-radius: 1em;
      }

      nav .menu li {
        margin-bottom: 1em;
      }

      nav .hamburger {
        display: block;
      }

      nav .menu.active {
        display: flex;
      }
    }

    @media only screen and (min-width: 769px) {
      nav .hamburger {
        display: none;
      }

      nav .menu {
        display: flex;
      }
    }
    
        /* Hub */
    @media only screen and (max-width: 768px) {
      .title {
        font-size: 2em !important;
      }
    }

    @media only screen and (min-width: 769px) {
      .title {
        font-size: 2.5em !important;
}
    }