* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: "Inter", sans-serif;
         }
         :root {
         --primary: #2563eb;
         --primary-dark: #1d4ed8;
         --dark: #0f172a;
         --dark-light: #1e293b;
         --white: #ffffff;
         --gray: #94a3b8;
         --border: rgba(255, 255, 255, 0.08);
         --shadow:
         0 10px 25px rgba(0, 0, 0, 0.18),
         0 5px 10px rgba(0, 0, 0, 0.08);
         }
         body {
         background: #f1f5f9;
         min-height: 100vh;
         overflow-x: hidden;
         }
         /* ========================= */
         /* DEMO CONTENT */
         /* ========================= */
         .demo-section {
         min-height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         padding: 40px;
         }
         .demo-content h1 {
         font-size: 60px;
         color: #0f172a;
         margin-bottom: 20px;
         font-weight: 800;
         }
         .demo-content p {
         font-size: 18px;
         color: #64748b;
         max-width: 700px;
         margin: auto;
         line-height: 1.7;
         }
         /* ========================= */
         /* FLOATING CONTACT */
         /* ========================= */
         .floating-contact-wrapper {
         position: fixed;
         right: 24px;
         bottom: 24px;
         z-index: 999999;
         }
         /* MAIN BUTTON */
         .floating-main-btn {
         width: 72px;
         height: 72px;
         border-radius: 50%;
         border: none;
         cursor: pointer;
         background:
         linear-gradient(135deg,
         var(--primary),
         var(--primary-dark));
         color: white;
         font-size: 26px;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: var(--shadow);
         transition: all 0.35s ease;
         position: relative;
         overflow: hidden;
         }
         .floating-main-btn::before {
         content: "";
         position: absolute;
         inset: 0;
         background: rgba(255, 255, 255, 0.12);
         border-radius: 50%;
         transform: scale(0);
         transition: 0.4s ease;
         }
         .floating-main-btn:hover::before {
         transform: scale(1);
         }
         .floating-main-btn:hover {
         transform: translateY(-5px) scale(1.03);
         }
         .floating-main-btn.active {
         transform: rotate(135deg);
         }
         /* ========================= */
         /* CONTACT OPTIONS */
         /* ========================= */
         .floating-options {
         position: absolute;
         bottom: 92px;
         right: 0;
         display: flex;
         flex-direction: column;
         gap: 16px;
         opacity: 0;
         visibility: hidden;
         transform: translateY(20px);
         transition: all 0.35s ease;
         }
         .floating-options.show {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
         }
         .floating-option {
         display: flex;
         align-items: center;
         justify-content: flex-end;
         gap: 14px;
         }
         .floating-option span {
         background: rgba(15, 23, 42, 0.95);
         color: white;
         padding: 10px 16px;
         border-radius: 14px;
         font-size: 14px;
         font-weight: 500;
         white-space: nowrap;
         border: 1px solid var(--border);
         backdrop-filter: blur(12px);
         box-shadow: var(--shadow);
         }
         .floating-option a,
         .floating-option button {
         width: 60px;
         height: 60px;
         border-radius: 18px;
         border: none;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         color: white;
         font-size: 22px;
         transition: all 0.3s ease;
         box-shadow: var(--shadow);
         }
         .floating-option a:hover,
         .floating-option button:hover {
         transform: scale(1.08);
         }
         .whatsapp-btn {
         background: #25d366;
         }
         .call-btn {
         background: #0ea5e9;
         }
         .form-btn {
         background:
         linear-gradient(135deg,
         #7c3aed,
         #6d28d9);
         }
         /* ========================= */
         /* MODAL */
         /* ========================= */
         .contact-modal {
         position: fixed;
         inset: 0;
         background: rgba(2, 6, 23, 0.72);
         backdrop-filter: blur(8px);
         z-index: 99999999;
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         visibility: hidden;
         transition: 0.35s ease;
         padding: 20px;
         }
         .contact-modal.show {
         opacity: 1;
         visibility: visible;
         }
         .contact-modal-content {
         width: 100%;
         max-width: 540px;
         background: rgba(15, 23, 42, 0.98);
         border-radius: 28px;
         border: 1px solid var(--border);
         padding: 34px;
         position: relative;
         transform: translateY(40px) scale(0.92);
         transition: 0.4s ease;
         box-shadow:
         0 25px 60px rgba(0, 0, 0, 0.45),
         0 10px 25px rgba(0, 0, 0, 0.2);
         }
         .contact-modal.show .contact-modal-content {
         transform: translateY(0) scale(1);
         }
         /* CLOSE BUTTON */
         .modal-close {
         position: absolute;
         top: 18px;
         right: 18px;
         width: 44px;
         height: 44px;
         border-radius: 14px;
         border: none;
         cursor: pointer;
         background: rgba(255, 255, 255, 0.08);
         color: white;
         font-size: 18px;
         transition: 0.3s ease;
         }
         .modal-close:hover {
         background: rgba(255, 255, 255, 0.16);
         transform: rotate(90deg);
         }
         /* ========================= */
         /* HEADER */
         /* ========================= */
         .contact-header h2 {
         color: white;
         font-size: 32px;
         font-weight: 700;
         margin-bottom: 12px;
         }
         .contact-header p {
         color: var(--gray);
         line-height: 1.7;
         font-size: 15px;
         }
         /* ========================= */
         /* FORM */
         /* ========================= */
         .contact-form {
         margin-top: 28px;
         }
         .form-group {
         margin-bottom: 18px;
         }
         .contact-form input,
         .contact-form textarea {
         width: 100%;
         background: rgba(255, 255, 255, 0.04);
         border: 1px solid rgba(255, 255, 255, 0.08);
         border-radius: 16px;
         padding: 16px 18px;
         outline: none;
         color: white;
         font-size: 15px;
         transition: 0.3s ease;
         }
         .contact-form textarea {
         min-height: 140px;
         resize: none;
         }
         .contact-form input:focus,
         .contact-form textarea:focus {
         border-color: rgba(37, 99, 235, 0.8);
         background: rgba(255, 255, 255, 0.06);
         box-shadow:
         0 0 0 4px rgba(37, 99, 235, 0.12);
         }
         .contact-form input::placeholder,
         .contact-form textarea::placeholder {
         color: #94a3b8;
         }
         /* SUBMIT BUTTON */
         .submit-btn {
         width: 100%;
         border: none;
         background:
         linear-gradient(135deg,
         var(--primary),
         var(--primary-dark));
         color: white;
         padding: 17px;
         border-radius: 16px;
         font-size: 16px;
         font-weight: 600;
         cursor: pointer;
         transition: 0.35s ease;
         }
         .submit-btn:hover {
         transform: translateY(-2px);
         box-shadow:
         0 10px 25px rgba(37, 99, 235, 0.35);
         }
         /* ========================= */
         /* RESPONSIVE */
         /* ========================= */
         @media (max-width: 768px) {
         .demo-content h1 {
         font-size: 40px;
         }
         .demo-content p {
         font-size: 16px;
         }
         .floating-contact-wrapper {
         right: 16px;
         bottom: 16px;
         }
         .floating-main-btn {
         width: 64px;
         height: 64px;
         font-size: 24px;
         }
         .floating-option a,
         .floating-option button {
         width: 54px;
         height: 54px;
         font-size: 20px;
         }
         .contact-modal-content {
         padding: 24px;
         }
         .contact-header h2 {
         font-size: 26px;
         }
         }
         @media (max-width: 480px) {
         .demo-content h1 {
         font-size: 32px;
         }
         .contact-modal-content {
         padding: 22px 18px;
         border-radius: 24px;
         }
         .contact-header h2 {
         font-size: 22px;
         }
         .contact-form input,
         .contact-form textarea {
         padding: 14px 15px;
         font-size: 14px;
         }
         .submit-btn {
         padding: 15px;
         font-size: 15px;
         }
         .floating-option span {
         display: none;
         }
         }
        
        
         html,
         body {
         height: 100%;
         margin: 0;
         scroll-behavior: smooth;
         }
         * {
         box-sizing: border-box;
         }
         :root {
         --electric-blue: #00A8FF;
         --deep-blue: #0A1628;
         --violet: #7B2FBE;
         --orange: #FF6B2B;
         --white: #FFFFFF;
         }
         .app-root {
         width: 100%;
         min-height: 100%;
         overflow-x: hidden;
         overflow-y: auto;
         background: var(--white);
         }
         /* Gradient blobs */
         .blob {
         position: absolute;
         border-radius: 50%;
         filter: blur(80px);
         opacity: 0.5;
         animation: blobFloat 8s ease-in-out infinite;
         pointer-events: none;
         }
         .blob-1 {
         width: 400px;
         height: 400px;
         background: var(--electric-blue);
         top: -100px;
         left: -100px;
         }
         .blob-2 {
         width: 350px;
         height: 350px;
         background: var(--violet);
         top: 50%;
         right: -80px;
         animation-delay: -3s;
         }
         .blob-3 {
         width: 300px;
         height: 300px;
         background: var(--orange);
         bottom: -50px;
         left: 30%;
         animation-delay: -5s;
         opacity: 0.3;
         }
         @keyframes blobFloat {
         0%,
         100% {
         transform: translate(0, 0) scale(1);
         }
         33% {
         transform: translate(30px, -20px) scale(1.05);
         }
         66% {
         transform: translate(-20px, 20px) scale(0.95);
         }
         }
         /* Glass card */
         .glass {
         background: rgba(255, 255, 255, 0.08);
         backdrop-filter: blur(20px);
         -webkit-backdrop-filter: blur(20px);
         border: 1px solid rgba(255, 255, 255, 0.12);
         }
         .glass-light {
         background: rgba(255, 255, 255, 0.7);
         backdrop-filter: blur(16px);
         -webkit-backdrop-filter: blur(16px);
         border: 1px solid rgba(255, 255, 255, 0.3);
         }
         /* Service card glow */
         .service-card {
         position: relative;
         transition: transform 0.4s cubic-bezier(.25, .46, .45, .94), box-shadow 0.4s ease;
         }
         .service-card::before {
         content: '';
         position: absolute;
         inset: -1px;
         border-radius: inherit;
         background: linear-gradient(135deg, var(--electric-blue), var(--violet), var(--orange));
         opacity: 0;
         transition: opacity 0.4s ease;
         z-index: -1;
         }
         .service-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 20px 60px rgba(0, 168, 255, 0.15);
         }
         .service-card:hover::before {
         opacity: 1;
         }
         /* Portfolio item */
         .portfolio-item {
         overflow: hidden;
         border-radius: 16px;
         position: relative;
         cursor: pointer;
         }
         .portfolio-item img,
         .portfolio-item .portfolio-placeholder {
         transition: transform 0.6s cubic-bezier(.25, .46, .45, .94);
         }
         .portfolio-item:hover img,
         .portfolio-item:hover .portfolio-placeholder {
         transform: scale(1.08);
         }
         .portfolio-overlay {
         position: absolute;
         inset: 0;
         background: linear-gradient(to top, rgba(10, 22, 40, 0.9) 0%, transparent 60%);
         opacity: 0;
         transition: opacity 0.4s ease;
         display: flex;
         align-items: flex-end;
         padding: 24px;
         }
         .portfolio-item:hover .portfolio-overlay {
         opacity: 1;
         }
         /* Scroll animations */
         .reveal {
         opacity: 0;
         transform: translateY(40px);
         transition: opacity 0.8s cubic-bezier(.25, .46, .45, .94), transform 0.8s cubic-bezier(.25, .46, .45, .94);
         }
         .reveal.visible {
         opacity: 1;
         transform: translateY(0);
         }
         /* Btn styles */
         .btn-primary {
         background: linear-gradient(135deg, var(--electric-blue), var(--violet));
         color: white;
         position: relative;
         overflow: hidden;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
         .btn-primary:hover {
         transform: translateY(-2px);
         box-shadow: 0 8px 30px rgba(0, 168, 255, 0.4);
         }
         .btn-primary::after {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(135deg, var(--violet), var(--orange));
         opacity: 0;
         transition: opacity 0.4s ease;
         }
         .btn-primary:hover::after {
         opacity: 1;
         }
         .btn-primary span {
         position: relative;
         z-index: 1;
         }
         .btn-outline {
         border: 1.5px solid rgba(255, 255, 255, 0.3);
         color: white;
         transition: all 0.3s ease;
         }
         .btn-outline:hover {
         border-color: var(--electric-blue);
         background: rgba(0, 168, 255, 0.1);
         box-shadow: 0 0 20px rgba(0, 168, 255, 0.2);
         }
         /* Testimonial */
         .testimonial-card {
         transition: transform 0.3s ease;
         }
         .testimonial-card:hover {
         transform: translateY(-4px);
         }
         /* Social icon */
        
         /* Add these styles to your CSS file */
        .social-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid #374151; /* gray-700 equivalent */
            color: #9ca3af; /* gray-400 equivalent */
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .social-icon:hover {
            color: #00A8FF; /* electric-blue */
            border-color: #00A8FF;
            transform: translateY(-2px);
        }

        /* Ensure Lucide icons inside social-icon have proper sizing */
        .social-icon svg {
            width: 18px;
            height: 18px;
        }
         /* Nav */
         .nav-glass {
         background: rgba(10, 22, 40, 0.8);
         backdrop-filter: blur(20px);
         -webkit-backdrop-filter: blur(20px);
         border-bottom: 1px solid rgba(255, 255, 255, 0.06);
         }
         .nav-scrolled {
         background: rgba(10, 22, 40, 0.95);
         }
         /* Hero character SVG area */
         .hero-character {
         position: relative;
         }
         .hero-character::after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
         width: 80%;
         height: 40px;
         background: radial-gradient(ellipse, rgba(0, 168, 255, 0.3), transparent);
         filter: blur(10px);
         }
         /* Stats counter */
         .stat-number {
         background: linear-gradient(135deg, var(--electric-blue), var(--violet));
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         }
         /* Section gradient accents */
         .section-accent {
         position: relative;
         }
         .section-accent::before {
         content: '';
         position: absolute;
         top: 0;
         left: 50%;
         transform: translateX(-50%);
         width: 120px;
         height: 4px;
         background: linear-gradient(90deg, var(--electric-blue), var(--violet), var(--orange));
         border-radius: 2px;
         }
         /* Mobile nav */
         .mobile-menu {
         transform: translateX(100%);
         transition: transform 0.4s cubic-bezier(.25, .46, .45, .94);
         }
         .mobile-menu.open {
         transform: translateX(0);
         }
         /* Parallax */
         .parallax-layer {
         transition: transform 0.1s linear;
         }
         @media (max-width: 768px) {
         .blob {
         width: 200px !important;
         height: 200px !important;
         filter: blur(60px);
         }
         }
         .logo-icon{
         width:52px;
         height:52px;
         overflow:hidden;
         border-radius:18px;
         background:
         linear-gradient(
         135deg,
         var(--electric-blue),
         var(--violet)
         );
         display:flex;
         align-items:center;
         justify-content:center;
         box-shadow:
         0 12px 30px rgba(0,168,255,.25);
         flex-shrink:0;
         }
         .logo-icon img{
         width:100%;
         height:100%;
         object-fit:cover;
         border-radius:18px;
         }
         .nav-logo span,
         .mobile-logo span{
         color:#fff;
         font-size:20px;
         font-weight:800;
         letter-spacing:-0.03em;
         max-width:180px;
         white-space:nowrap;
         overflow:hidden;
         text-overflow:ellipsis;
         }
        
        
         body {
         box-sizing: border-box;
         }
         /* ========================================= */
         /* PREMIUM INDUSTRY NAVBAR */
         /* ========================================= */
         #mainNav {
         position: fixed;
         top: 18px;
         left: 50%;
         transform: translateX(-50%);
         width: calc(100% - 32px);
         max-width: 1400px;
         z-index: 999;
         transition: .4s ease;
         }
         .nav-scrolled {
         top: 10px !important;
         }
         .nav-container {
         height: 78px;
         padding: 0 26px;
         border-radius: 28px;
         background: rgba(8, 17, 32, .72);
         backdrop-filter: blur(30px);
         -webkit-backdrop-filter: blur(30px);
         border: 1px solid rgba(255, 255, 255, .08);
         box-shadow:
         0 10px 40px rgba(0, 0, 0, .28),
         inset 0 1px 0 rgba(255, 255, 255, .06);
         display: flex;
         align-items: center;
         justify-content: space-between;
         }
         .nav-logo {
         display: flex;
         align-items: center;
         gap: 14px;
         text-decoration: none;
         }
         .logo-icon {
         width: 46px;
         height: 46px;
         border-radius: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: linear-gradient(135deg,
         var(--electric-blue),
         var(--violet));
         box-shadow: 0 10px 30px rgba(0, 168, 255, .25);
         }
         .nav-logo span {
         color: white;
         font-size: 22px;
         font-weight: 800;
         letter-spacing: -0.04em;
         }
         .nav-logo span span {
         color: var(--electric-blue);
         }
         .desktop-nav {
         display: flex;
         align-items: center;
         gap: 34px;
         }
         .nav-item {
         color: rgba(255, 255, 255, .72);
         font-size: 15px;
         font-weight: 600;
         text-decoration: none;
         transition: .3s ease;
         position: relative;
         }
         .nav-item:hover {
         color: white;
         }
         .nav-item::after {
         content: '';
         position: absolute;
         left: 0;
         bottom: -8px;
         width: 0;
         height: 2px;
         border-radius: 999px;
         background: linear-gradient(90deg,
         var(--electric-blue),
         var(--violet));
         transition: .3s ease;
         }
         .nav-item:hover::after {
         width: 100%;
         }
         /* ========================================= */
         /* MEGA MENU */
         /* ========================================= */
         .mega-wrapper {
         position: relative;
         }
         .mega-trigger {
         background: none;
         border: none;
         display: flex;
         align-items: center;
         gap: 8px;
         cursor: pointer;
         }
         .mega-arrow {
         width: 16px;
         height: 16px;
         transition: .3s ease;
         }
         .mega-wrapper:hover .mega-arrow {
         transform: rotate(180deg);
         }
         .mega-menu {
         position: absolute;
         top: calc(100% + 28px);
         left: 50%;
         transform: translateX(-50%) translateY(20px);
         width: 1080px;
         opacity: 0;
         visibility: hidden;
         transition: .35s ease;
         }
         .mega-wrapper:hover .mega-menu {
         opacity: 1;
         visibility: visible;
         transform: translateX(-50%) translateY(0);
         }
         .mega-grid {
         border-radius: 32px;
         overflow: hidden;
         background: rgba(8, 17, 32, .96);
         backdrop-filter: blur(40px);
         border: 1px solid rgba(255, 255, 255, .08);
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1.2fr;
         }
         .mega-column {
         padding: 34px;
         border-right: 1px solid rgba(255, 255, 255, .05);
         }
         .mega-column h4 {
         color: white;
         font-size: 17px;
         margin-bottom: 22px;
         font-weight: 700;
         }
         .mega-column a {
         display: flex;
         align-items: center;
         height: 48px;
         padding: 0 16px;
         border-radius: 16px;
         color: rgba(255, 255, 255, .68);
         text-decoration: none;
         transition: .3s ease;
         }
         .mega-column a:hover {
         background: rgba(255, 255, 255, .06);
         color: white;
         transform: translateX(4px);
         }
         .mega-feature {
         padding: 36px;
         background:
         linear-gradient(180deg,
         rgba(0, 168, 255, .12),
         rgba(123, 47, 190, .08));
         }
         .mega-feature span {
         color: var(--electric-blue);
         font-size: 13px;
         font-weight: 700;
         letter-spacing: .08em;
         text-transform: uppercase;
         }
         .mega-feature h3 {
         color: white;
         font-size: 28px;
         line-height: 1.2;
         margin-top: 18px;
         margin-bottom: 18px;
         font-weight: 800;
         }
         .mega-feature p {
         color: rgba(255, 255, 255, .65);
         line-height: 1.7;
         }
         .mega-feature a {
         margin-top: 28px;
         height: 52px;
         border-radius: 18px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         font-weight: 700;
         color: white;
         background: linear-gradient(135deg,
         var(--electric-blue),
         var(--violet));
         }
         /* ========================================= */
         /* CTA */
         /* ========================================= */
         .nav-right {
         display: flex;
         align-items: center;
         gap: 18px;
         }
         .nav-cta {
         height: 52px;
         padding: 0 24px;
         border-radius: 18px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         font-size: 14px;
         font-weight: 700;
         color: white;
         background: linear-gradient(135deg,
         var(--electric-blue),
         var(--violet));
         box-shadow: 0 10px 30px rgba(0, 168, 255, .22);
         transition: .3s ease;
         }
         .nav-cta:hover {
         transform: translateY(-2px);
         }
         #menuToggle {
         width: 52px;
         height: 52px;
         border: none;
         border-radius: 18px;
         background: rgba(255, 255, 255, .05);
         color: white;
         display: none;
         align-items: center;
         justify-content: center;
         }
         /* ========================================= */
         /* MOBILE */
         /* ========================================= */
         #mobileSidebar {
         position: fixed;
         top: 0;
         right: -100%;
         width: 100%;
         max-width: 420px;
         height: 100vh;
         background: #081120;
         z-index: 1001;
         transition: .45s cubic-bezier(.77, 0, .18, 1);
         display: flex;
         flex-direction: column;
         }
         #mobileSidebar.active {
         right: 0;
         }
         #navOverlay {
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, .6);
         backdrop-filter: blur(8px);
         opacity: 0;
         visibility: hidden;
         transition: .35s ease;
         z-index: 1000;
         }
         #navOverlay.active {
         opacity: 1;
         visibility: visible;
         }
         .mobile-top {
         height: 88px;
         padding: 0 24px;
         border-bottom: 1px solid rgba(255, 255, 255, .06);
         display: flex;
         align-items: center;
         justify-content: space-between;
         }
         .mobile-logo {
         display: flex;
         align-items: center;
         gap: 14px;
         }
         .mobile-logo span {
         color: white;
         font-size: 22px;
         font-weight: 800;
         }
         .mobile-logo span span {
         color: var(--electric-blue);
         }
         #menuClose {
         width: 48px;
         height: 48px;
         border: none;
         border-radius: 16px;
         background: rgba(255, 255, 255, .05);
         color: white;
         }
         .mobile-nav {
         flex: 1;
         overflow: auto;
         padding: 24px;
         }
         .mobile-link {
         height: 58px;
         padding: 0 20px;
         border-radius: 20px;
         display: flex;
         align-items: center;
         text-decoration: none;
         color: white;
         font-weight: 600;
         background: rgba(255, 255, 255, .03);
         margin-bottom: 14px;
         }
         .mobile-dropdown {
         background: rgba(255, 255, 255, .03);
         border-radius: 24px;
         margin-bottom: 14px;
         overflow: hidden;
         }
         .mobile-dropdown-btn {
         width: 100%;
         height: 62px;
         padding: 0 20px;
         background: none;
         border: none;
         color: white;
         font-weight: 700;
         display: flex;
         align-items: center;
         justify-content: space-between;
         }
         .mobile-arrow {
         transition: .3s ease;
         }
         .mobile-dropdown.active .mobile-arrow {
         transform: rotate(180deg);
         }
         .mobile-dropdown-content {
         max-height: 0;
         overflow: hidden;
         transition: .45s ease;
         }
         .mobile-dropdown.active .mobile-dropdown-content {
         max-height: 1000px;
         }
         .mobile-category {
         padding: 0 20px 22px;
         }
         .mobile-category h5 {
         color: var(--electric-blue);
         margin-bottom: 12px;
         font-size: 13px;
         font-weight: 800;
         text-transform: uppercase;
         letter-spacing: .08em;
         }
         .mobile-category a {
         height: 46px;
         padding: 0 16px;
         border-radius: 14px;
         display: flex;
         align-items: center;
         color: rgba(255, 255, 255, .72);
         text-decoration: none;
         transition: .3s ease;
         }
         .mobile-category a:hover {
         background: rgba(255, 255, 255, .06);
         color: white;
         }
         .mobile-bottom {
         padding: 24px;
         border-top: 1px solid rgba(255, 255, 255, .06);
         }
         .mobile-cta {
         height: 58px;
         border-radius: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         font-weight: 700;
         color: white;
         background: linear-gradient(135deg,
         var(--electric-blue),
         var(--violet));
         }
         /* ========================================= */
         /* RESPONSIVE */
         /* ========================================= */
         @media(max-width:1200px) {
         .mega-menu {
         width: 920px;
         }
         }
         @media(max-width:992px) {
         .desktop-nav {
         display: none;
         }
         .nav-cta {
         display: none;
         }
         #menuToggle {
         display: flex;
         }
         #mainNav {
         width: calc(100% - 18px);
         top: 10px;
         }
         .nav-container {
         height: 72px;
         padding: 0 18px;
         border-radius: 22px;
         }
         .logo-icon {
         width: 42px;
         height: 42px;
         }
         .nav-logo span {
         font-size: 20px;
         }
         }
         @media(max-width:480px) {
         #mobileSidebar {
         max-width: 100%;
         }
         }