   body {
     font-family: 'Montserrat', sans-serif;
     background-color: #0C0C0C;
     color: #EEEEEE;
     scroll-behavior: smooth;
   }

   .nav-item {
     position: relative;
     font-size: 18px !important;
   }


   .nav-item::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -5px;
     left: 0;
     background-color: #BCFF03;
     transition: width 0.3s ease;
   }

   .text-lime-400 {
     color: #BCFF03 !important;
   }

   .bg-lime-400 {
     background-color: #BCFF03 !important;
   }

   .nav-item:hover::after {
     width: 100%;
   }

   .nav-item:hover {
     color: #BCFF03 !important;
   }

   .mobile-menu {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease-out;
   }

   .mobile-menu.active {
     max-height: 500px;
   }

   .service-card {
     transition: all 0.3s ease;
     background: linear-gradient(to top right, #171717, #0c0c0c);
     position: relative;
     padding-top: 75px !important;
   }

   .service-card:hover {
     transform: translateY(-5px);
     background: rgba(23, 23, 23, 0.9);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
   }

   .testimonial-card {
     background: linear-gradient(to top right, #171717, #0c0c0c);
     opacity: 0.69;
     transition: all 0.3s ease;
   }

   .testimonial-card:hover {
     opacity: 1;
     transform: translateY(-5px);
   }

   .portfolio-item {
     transition: all 0.3s ease;
   }

   .portfolio-item:hover {
     transform: scale(1.03);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
   }

   .discussButton:hover {
     border-color: #BCFF03 !important;
     border: 1px solid #BCFF03;
     background-color: #0C0C0C !important;
     color: #BCFF03 !important;
   }

   .cta-section {
     background-color: #BCFF03;
     color: #0C0C0C;
   }

   .subscribe-input:focus {
     outline: 2px solid #BCFF03;
   }

   /* Reset and Base Styles */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
   }

   .text-lime-400 {
     color: #BCFF03 !important;
   }

   .bg-lime-400 {
     background-color: #BCFF03 !important;
   }

   body {
     font-family: 'Montserrat', sans-serif;
     background-color: #0c0c0c;
     color: #e6e6e6;
     line-height: 1.6;
     overflow-x: hidden;
   }

   /* Focus styles */
   button:focus-visible {
     outline: 2px solid #4a90e2 !important;
     outline: -webkit-focus-ring-color auto 5px !important;
   }

   a {
     text-decoration: none;
     color: inherit;
   }

   /* Variables */
   :root {
     --primary-color: #bcff03;
     --secondary-color: rgba(230, 230, 230, 0.51);
   }

   /* Navbar */
   .navbar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     padding: 20px 144px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: rgba(12, 12, 12, 0.9);
     z-index: 1000;
   }

   .logo {
     width: 134px;
     height: auto;
     transition: transform 0.3s ease;
   }

   .logo:hover {
     transform: scale(1.05);
   }

   .nav-links {
     display: flex;
     gap: 30px;
   }

   .nav-links a {
     color: var(--secondary-color);
     font-size: 14px;
     font-weight: 500;
     position: relative;
     padding: 5px 0;
     overflow: hidden;
   }

   /* New Nav Link Animation */
   .nav-links a::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background-color: var(--primary-color);
     transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
   }

   .nav-links a:hover {
     color: var(--primary-color);
   }

   .nav-links a:hover::before {
     width: 100%;
   }

   .nav-links a.active {
     color: var(--primary-color);
   }

   .nav-links a.active::before {
     width: 100%;
   }

   .cta-button {
     background-color: var(--primary-color);
     color: #0c0c0c;
     padding: 12px 18px;
     border-radius: 29px;
     font-size: 14px;
     font-weight: 500;
     border: none;
     cursor: pointer;
     transition: all 0.3s;
     position: relative;
     overflow: hidden;
   }

   .cta-button:hover {
     background-color: #bcff03;
     transform: translateY(-2px);
   }

   .cta-button::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 5px;
     height: 5px;
     background: rgba(255, 255, 255, 0.5);
     opacity: 0;
     border-radius: 100%;
     transform: scale(1, 1) translate(-50%);
     transform-origin: 50% 50%;
   }

   .cta-button:focus:not(:active)::after {
     animation: ripple 1s ease-out;
   }

   @keyframes ripple {
     0% {
       transform: scale(0, 0);
       opacity: 0.5;
     }

     100% {
       transform: scale(20, 20);
       opacity: 0;
     }
   }

   /* Rest of your existing styles... */
   /* About Section */
   .about-container {
     max-width: 1440px;
     margin: 0 auto;
     padding: 50px 144px 100px;
   }

   .about-title {
     position: relative;
     width: 100%;
     height: 118px;
     border-radius: 20px;
     border: 0.5px solid #bcff03;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 40px;
   }

   .about-title h1 {
     font-size: 64px;
     font-weight: 600;
     color: var(--primary-color);
     line-height: 73px;
   }

   .about-content-wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 60px;
   }

   .profile-image {
     width: 100%;
     max-width: 369px;
     height: auto;
     object-fit: cover;
     border-radius: 10px;
   }

   .about-content {
     width: 100%;
     max-width: 600px;
     text-align: center;
   }

   .name-title {
     display: flex;
     flex-direction: column;
     margin-bottom: 30px;
   }

   .name {
     font-size: 40px;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 5px;
   }

   .title {
     font-size: 16px;
     font-weight: 500;
     letter-spacing: 1.6px;
     color: #e6e6e6;
   }

   .bio {
     font-size: 14px;
     line-height: 1.8;
     margin-bottom: 20px;
     text-align: left;
   }

   .bio span.highlight {
     color: var(--primary-color);
   }

   .signature {
     font-family: 'Brittany Signature', cursive;
     font-size: 32px;
     color: var(--primary-color);
     letter-spacing: -2.88px;
     margin-top: 30px;
     text-align: center;
   }

   /* Footer */
   .footer {
     padding: 80px 144px 50px;
     text-align: center;
     position: relative;
   }

   .footer-divider {
     width: 1140px;
     height: 1px;
     background-color: rgba(255, 255, 255, 0.1);
     margin: 0 auto 40px;
   }

   .footer-logo {
     width: 245px;
     height: auto;
     margin-bottom: 30px;
   }

   .footer-links {
     display: flex;
     justify-content: center;
     gap: 30px;
     margin-bottom: 30px;
   }

   .view-detail-btn:hover {
     background-color: transparent !important;
     color: #BCFF03 !important;
     ;
     border: 1px solid #BCFF03 !important;
     ;

   }

   .footer-links a {
     font-size: 14px;
     font-weight: 500;
     transition: color 0.3s;
     position: relative;
     padding: 5px 0;
   }

   .footer-links a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 1px;
     background-color: var(--primary-color);
     transition: width 0.3s ease;
   }

   .footer-links a:hover {
     color: var(--primary-color);
   }

   .footer-links a:hover::after {
     width: 100%;
   }

   .copyright {
     font-size: 20px;
     color: #eeeeee;
   }

   /* Responsive Design */
   @media (min-width: 992px) {
     .about-content-wrapper {
       flex-direction: row;
       align-items: flex-start;
       justify-content: center;
       gap: 80px;
     }

     .about-content {
       text-align: left;
     }
   }

   @media (max-width: 1200px) {

     .navbar,
     .about-container,
     .footer {
       padding-left: 80px;
       padding-right: 80px;
     }

     .about-title h1 {
       font-size: 48px;
     }

     .footer-divider {
       width: 100%;
     }
   }

   @media (max-width: 992px) {

     .navbar,
     .about-container,
     .footer {
       padding-left: 50px;
       padding-right: 50px;
     }

     .about-container {
       padding: 150px 50px 80px;
     }

     .about-title {
       margin-bottom: 40px;
       height: auto;
       padding: 20px;
     }

     .about-title h1 {
       font-size: 36px;
       line-height: 1.2;
     }

     .profile-image {
       max-width: 300px;
     }
   }

   @media (max-width: 768px) {
     .navbar {
       flex-direction: column;
       gap: 20px;
       padding: 20px;
     }

     .nav-links {
       flex-wrap: wrap;
       justify-content: center;
     }

     .about-container {
       padding: 120px 30px 60px;
     }

     .about-title h1 {
       font-size: 28px;
     }

     .name {
       font-size: 32px;
     }

     .profile-image {
       max-width: 280px;
     }
   }

   /* Animation */
   @keyframes fadeIn {
     from {
       opacity: 0;
       transform: translateY(20px);
     }

     to {
       opacity: 1;
       transform: translateY(0);
     }
   }

   .fade-in {
     animation: fadeIn 1s ease-out forwards;
   }