/* --- General Styling --- */
     :root {
         --black: #000000;
         --white: #ffffff;
         --modal-bg: rgba(255, 255, 255, 0.1);
         --modal-border: rgba(255, 255, 255, 0.2);
         --font-family: 'Fredoka', sans-serif;
         --transition-speed: 0.4s;
         --bg-color: #0d0d15;
         --card-bg: rgba(20, 20, 30, 0.4);
         --border-color: rgba(255, 255, 255, 0.08);
         --text-color: #e0e0e0;
         --font-primary: 'Poppins', sans-serif;
         --font-secondary: 'Orbitron', sans-serif;
         --neon-blue: #00eaff;
         --neon-purple: #8c73ff;
         --glass-bg: rgba(255, 255, 255, 0.15);
     }

     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     html {
         scroll-behavior: smooth;
     }

     body {
         font-family: var(--font-family);
         background-color: var(--black);
         color: var(--white);
         line-height: 1.6;
     }

     .container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 20px;
     }

     .lnh-logo {
         height: 65px;
         max-width: 100%;
         transition: transform 0.3s ease;
         cursor: pointer;
     }

     .lnh-logo:hover {
         transform: scale(1.1);
     }

     a {
         text-decoration: none;
         color: inherit;
     }

     /* --- Navigation Bar --- */
     header {
         background-color: var(--black);
         padding: 20px 0;
         position: sticky;
         top: 0;
         z-index: 100;
     }

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

     .nav-links {
         list-style: none;
         display: flex;
         gap: 40px;
         font-size: 20px;
     }

     .nav-link a {
         position: relative;
         font-weight: 500;
         padding-bottom: 5px;
     }

     .nav-link a::after {
         content: '';
         position: absolute;
         left: 0;
         bottom: 0;
         width: 0;
         height: 2px;
         background: var(--white);
         transition: width var(--transition-speed) ease-in-out;
     }

     .nav-link a.active::after,
     .nav-link a:hover::after {
         width: 100%;
     }

     .nav-contact {
         display: inline-block;
         padding: 5px 22px;
         background-color: #000000;
         color: #FFFFFF;
         font-size: 15px;
         font-family: var(--font-family);
         font-weight: bold;
         text-decoration: none;
         border: 1px solid #FFFFFF;
         border-radius: 8px;
         position: relative;
         overflow: hidden;
         z-index: 1;
         transition: color 0.4s ease-in-out;
     }

     .nav-contact::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: #FFFFFF;
         transform: translateX(-100%);
         transition: transform 0.4s ease-in-out;
         z-index: -1;
     }

     .nav-contact:hover {
         color: #000000;
     }

     .nav-contact:hover::before {
         transform: translateX(0%);
     }

     /* --- Hero Section --- */
     .hero {
         background-color: var(--black);
         min-height: 40vh;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
     }

     .hero-text h1 {
         font-size: clamp(3rem, 4vw, 7rem);
         font-weight: 700;
         margin-bottom: 1rem;
     }

     .hero-text p {
         font-size: clamp(0.8rem, 2vw, 1.25rem);
         max-width: 700px;
         margin: 0 auto;
         color: #ccc;
     }

     /* --- New Card Section Styling (from 1st snippet) --- */
     .card-container-2 {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 30px;
         padding: 100px;
         max-width: 1200px;
         width: 100%;
     }

     .card-2 {
         position: relative;
         padding: 20px;
         width: 350px;
         border-radius: 18px;
         backdrop-filter: blur(10px) brightness(1.2);
         border: 1px solid var(--border-color);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         overflow: hidden;
         transform-style: preserve-3d;
         transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         z-index: 1;
         text-align: center;
         background: rgba(20, 20, 30, 0.4);
         font-family: var(--font-primary);
         color: var(--text-color);
     }

     .card-2:hover {
         transform: translateY(-15px) scale(1.02);
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
     }

     .card-content-2 {
         position: relative;
         z-index: 2;
     }

     .icon-wrapper-2 {
         width: 100px;
         height: 100px;
         margin: 0 auto 20px;
         display: flex;
         justify-content: center;
         align-items: center;
         border-radius: 50%;
         overflow: hidden;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
     }

     .card-icon-2 {
         width: 80%;
         height: 80%;
         object-fit: contain;
         transition: transform 0.4s ease;
     }

     .card-2:hover .card-icon-2 {
         transform: scale(1.1) rotate(5deg);
     }

     .card-title-2 {
         font-family: var(--font-secondary);
         font-size: 1.6em;
         font-weight: 700;
         margin-bottom: 10px;
         background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue));
         background-clip: text;
         color: transparent;
         /* Standard browsers ke liye */
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
     }

     .card-description-2 {
         font-size: 0.9em;
         opacity: 0.8;
         margin-bottom: 25px;
     }

     .card-btn-2 {
         display: inline-block;
         padding: 10px 25px;
         background: #ffffff;
         color: var(--bg-color);
         border: none;
         border-radius: 8px;
         text-decoration: none;
         font-weight: 600;
         transition: all 0.3s ease;
         position: relative;
         z-index: 1;
     }

     .card-btn-2:hover {
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
         background-color: black;
         color: white;
     }

     .card-btn-2 .arrow-2 {
         display: inline-block;
         margin-left: 5px;
         transition: transform 0.3s ease;
         animation: moveArrow-2 1.5s infinite ease-in-out;
     }

     #explore-btn {
         background-color: blue;
         color: white;
     }

     #explore-btn:hover {
         background-color: white;
         color: black;
     }

     @keyframes moveArrow-2 {

         0%,
         100% {
             transform: translateX(0);
         }

         50% {
             transform: translateX(5px);
         }
     }

     .service-card-2 .liquid-bg-2 {
         position: absolute;
         top: -50px;
         left: -50px;
         width: 200%;
         height: 200%;
         background: linear-gradient(45deg, rgba(140, 115, 255, 0.2), rgba(0, 234, 255, 0.2));
         border-radius: 50%;
         transition: all 0.6s ease-out;
         filter: blur(50px);
         opacity: 0;
         transform: scale(0.5);
     }

     .service-card-2:hover .liquid-bg-2 {
         opacity: 1;
         transform: scale(1);
     }

     .service-card-1 .waveform-bg-2 {
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(to top, rgba(0, 200, 255, 0.2), transparent 50%);
         clip-path: polygon(0% 100%, 10% 70%, 20% 85%, 30% 60%, 40% 75%, 50% 50%, 60% 65%, 70% 40%, 80% 55%, 90% 30%, 100% 45%, 100% 100%);
         transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .service-card-1:hover .waveform-bg-2 {
         animation: waveform-anim-2 1s infinite alternate;
     }

     @keyframes waveform-anim-2 {
         from {
             clip-path: polygon(0% 100%, 10% 80%, 20% 95%, 30% 70%, 40% 85%, 50% 60%, 60% 75%, 70% 50%, 80% 65%, 90% 40%, 100% 55%, 100% 100%);
         }

         to {
             clip-path: polygon(0% 100%, 10% 70%, 20% 85%, 30% 60%, 40% 75%, 50% 50%, 60% 65%, 70% 40%, 80% 55%, 90% 30%, 100% 45%, 100% 100%);
         }
     }

     .modal-2 {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.8);
         display: flex;
         justify-content: center;
         align-items: center;
         z-index: 1000;
         visibility: hidden;
         opacity: 0;
         transition: opacity 0.4s ease, visibility 0.4s ease;
     }

     .modal-2.open {
         visibility: visible;
         opacity: 1;
     }

     .modal-card-2 {
         position: relative;
         background-color: var(--glass-bg);
         backdrop-filter: blur(25px) saturate(2);
         border: 1px solid var(--border-color);
         border-radius: 20px;
         width: 90%;
         max-width: 800px;
         padding: 20px;
         box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
         transform: scale(0.9);
         transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .modal-2.open .modal-card-2 {
         transform: scale(1);
     }

     .slider-container-2 {
         width: 100%;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
         overflow: hidden;
         border-radius: 15px;
         margin-bottom: 20px;
         position: relative;
     }

     .slider-2 {
         display: flex;
         transition: transform 0.5s ease-in-out;
         gap: 20px;
     }

     .slider-2 img {
         width: 250px;
         height: 200px;
         object-fit: cover;
         border-radius: 15px;
         flex-shrink: 0;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
         transition: transform 0.3s ease;
     }

     .slider-2 img:hover {
         transform: scale(1.05);
     }

     .modal-buttons-2 {
         display: flex;
         justify-content: space-between;
         margin-top: 20px;
     }

     .modal-close-btn-2,
     .contact-btn-2 {
         position: relative;
         padding: 12px 30px;
         border-radius: 8px;
         font-weight: 600;
         text-decoration: none;
         cursor: pointer;
         overflow: hidden;
         z-index: 1;
         border: 2px solid var(--neon-blue);
         color: var(--neon-blue);
         background-color: transparent;
         transition: color 0.4s ease;
     }

     .modal-close-btn-2::before,
     .contact-btn-2::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 0%;
         height: 100%;
         background-color: var(--neon-blue);
         transition: width 0.4s ease;
         z-index: -1;
     }

     .modal-close-btn-2:hover,
     .contact-btn-2:hover {
         color: var(--bg-color);
     }

     .modal-close-btn-2:hover::before,
     .contact-btn-2:hover::before {
         width: 100%;
     }

     @keyframes pop-2 {
         0% {
             transform: scale(0.8);
             opacity: 0;
         }

         80% {
             transform: scale(1.1);
             opacity: 1;
         }

         100% {
             transform: scale(1);
         }
     }

     /* --- Footer --- */
     footer {
         background-color: var(--black);
         color: var(--white);
         padding: 50px 0;
         text-align: center;
     }

     .footer-top {
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid #333;
         padding-bottom: 30px;
         margin-bottom: 20px;
     }

     .footer-logo {
         font-size: 24px;
         font-weight: 700;
     }

     .footer-links {
         list-style: none;
         display: flex;
         gap: 25px;
     }

     .footer-links a:hover {
         transition: color var(--transition-speed);
         color: var(--neon-blue);
     }

     .footer-bottom {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .social-icons {
         display: flex;
         gap: 20px;
     }

     .social-icons a {
         transition: color var(--transition-speed);
         font-size: 20px;
         transition: transform 0.3s ease, color 0.3s ease;
         display: inline-block;
     }

     .social-icons a:hover {
         transform: translateY(-6px) scale(1.1);
         color: var(--neon-blue);
     }

     /* --- Mobile Responsiveness --- */
     @media (max-width: 1200px) {
         .card-container-2 {
             gap: 20px;
             flex-wrap: wrap;
             justify-content: center;
         }
     }

     @media (max-width: 768px) {

         .nav-content,
         .footer-top,
         .footer-bottom {
             flex-direction: column;
             gap: 20px;
         }

         .nav-links,
         .footer-links {
             flex-wrap: wrap;
             justify-content: center;
         }

         .card-2 {
             width: 90%;
             max-width: 400px;
         }
     }

     /* --- Responsive Fixes --- */
     @media (max-width: 1200px) {
         .card-container-2 {
             flex-wrap: wrap;
             gap: 25px;
             padding: 60px 20px;
             /* kam padding */
             justify-content: center;
         }
     }

     @media (max-width: 992px) {
         .card-container-2 {
             flex-wrap: wrap;
             padding: 50px 15px;
         }

         .card-2 {
             width: 45%;
             /* 2 cards ek row me */
             max-width: 350px;
         }
     }

     @media (max-width: 768px) {

         .nav-content,
         .footer-top,
         .footer-bottom {
             flex-direction: column;
             gap: 20px;
         }

         .nav-links,
         .footer-links {
             flex-wrap: wrap;
             justify-content: center;
         }

         .card-2 {
             width: 100%;
             /* mobile me ek hi card ek row */
             max-width: 400px;
         }

         .hero-text h1 {
             font-size: 2rem;
         }

         .hero-text p {
             font-size: 1rem;
             padding: 0 10px;
         }
     }

     @media (max-width: 480px) {
         .card-container-2 {
             padding: 30px 10px;
             gap: 20px;
         }

         .card-2 {
             width: 100%;
             max-width: 100%;
             padding: 15px;
         }

         .card-title-2 {
             font-size: 1.2rem;
         }

         .card-description-2 {
             font-size: 0.85rem;
         }

         .hero-text h1 {
             font-size: 1.6rem;
         }
     }