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

   body {
       background-color: black;
       color: white;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
   }

   /* Header */
   .fix {
       background: black;
       padding: 22px;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       text-align: center;
       z-index: 1000;
   }

   .fix h1 {
       padding-bottom: 23px;
   }

   nav ul {
       list-style: none;
       padding: 0;
   }

   nav ul li {
       display: inline-block;
       margin: 0 18px;
       position: relative;
   }

   nav a {
       color: white;
       text-decoration: none;
       font-size: 16px;
   }

   nav a:hover {
       color: #ff6600;
   }

   .contact-container {
       width: 80%;
       max-width: 900px;
       background: linear-gradient(to bottom, #222, #000);
       padding: 20px;
       border-radius: 8px;
       box-shadow: 10px 30px 55px rgba(0, 0, 0, 0.5);
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       margin-top: 230px;
   }

   .contact-title {
       text-align: center;
       width: 100%;
       margin-bottom: 20px;
       font-size: 24px;
       font-weight: bold;
       color: orange;
   }

   .contact-form {
       flex: 1;
       min-width: 250px;
       padding-right: 20px;
   }

   .contact-form label {
       display: block;
       margin-top: 10px;
       font-size: 14px;
   }

   .contact-form input,
   .contact-form textarea {
       width: 100%;
       padding: 10px;
       margin-top: 5px;
       background: #333;
       color: white;
       border: 1px solid orange;
       border-radius: 4px;
       outline: none;
   }

   .contact-form textarea {
       height: 80px;
       resize: none;
   }

   .contact-form button {
       width: 100%;
       background: orange;
       padding: 10px;
       margin-top: 15px;
       font-size: 16px;
       font-weight: bold;
       border-radius: 6px;
       cursor: pointer;
       border: none;
       transition: background 0.3s;
   }

   .contact-form button:hover {
       background: #e6b800;
   }

   .contact-details {
       flex: 1;
       min-width: 250px;
       padding-left: 20px;
   }

   .contact-details div {
       margin-bottom: 10px;
       font-size: 14px;
   }

   .contact-details div i {
       color: orange;
       margin-right: 8px;
   }

   .social-icons {
       text-align: center;
       margin-top: 20px;

   }

   .social-icons a {
       display: inline-block;
       margin: 5px;
       font-size: 20px;
       color: orange;
       text-decoration: none;
       transition: color 0.3s;
   }

   .social-icons a:hover {
       color: white;
   }
   

 .animated-line {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 1px;
     width: 100%;
     overflow: hidden;
 }

 .animated-line::before {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background: linear-gradient(to left, gold 50%, transparent 0%);
     background-size: 200% 100%;
     animation: moveLine 20s linear infinite;
 }
 
@keyframes moveLine {
  0% {
    background-position: -100% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

   /* Responsive */
   @media (max-width: 768px) {
       .contact-container {
           flex-direction: column;
           align-items: center;
           margin-top: 500px;
       }

       .contact-form,
       .contact-details {
           padding: 0;
           width: 100%;
           text-align: center;
       }

       .contact-form button {
           width: auto;
           padding: 8px 20px;
       }
       
     nav {
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
         text-align: start;
         padding: 15px;
     }

     .logo {
         font-size: 22px;
         margin-bottom: 10px;
     }

     .menu {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         margin-left: 0;
         margin-right: 0;
         width: 100%;
     }

     .menu a {
         display: block;
         width: 100%;
         padding: 10px 0;
         border-top: 1px solid #222;
         font-size: 16px;
         padding-left: 10px;
     }

   }