/* === RESET === */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
    font-family: 'Courier New', monospace;  
    user-select: none;  
  }  
  
  /* === BODY  === */  
  body {  
    background: #0a0a0a;  
    color: #e0e0e0;  
    overflow-x: hidden;  
    min-height: 100vh;  
    position: relative;  
  }  
  
  /* === GLASS MORPHISM EFFECT  === */  
  .glass-card {  
    background: rgba(20, 20, 30, 0.5);  
    backdrop-filter: blur(12px);  
    -webkit-backdrop-filter: blur(12px);  
    border: 1px solid rgba(255, 255, 255, 0.1);  
    border-radius: 12px;  
    padding: 2rem;  
    margin: 1rem 0;  
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);  
    transition: all 0.3s ease;  
  }  
  
  .glass-card:hover {  
    border-color: rgba(100, 255, 255, 0.3);  
    box-shadow: 0 8px 32px rgba(100, 255, 255, 0.1);  
  }  
  
  /* ===  NAV  === */  
  .cyber-nav {
    position: fixed;
    left: -250px;
    top: 0;
    width: 250px;
    height: 100vh;
    background: rgba(10, 10, 20, 0.98);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(0, 255, 255, 0.3);
    z-index: 1000;
    transition: transform 0.3s ease-out;
    padding: 1rem;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
  }
  
  .cyber-nav.active {
    transform: translateX(250px);
  }

  /* === DESKTOP LAYOUT  === */  
  @media (min-width: 992px) {
    .cyber-nav {
      transform: none;
      left: 0 !important;
    }
    
    .main-container {
      margin-left: 270px;
      width: calc(100% - 270px);
    }
  }

  /* Menu toggle button  */  
  .menu-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1100;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: rgba(0, 100, 100, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.5);
    border-radius: 50%;
    padding: 8px;
    transition: all 0.3s ease;
  }

  .menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #00ffff;
    margin: 4px 0;
    transition: all 0.3s ease;
  }
  
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  
  .cyber-nav ul {  
    list-style: none;  
    margin-top: 2rem;  
  }  
  
  .cyber-nav li a {  
    color: #e0e0e0;  
    text-decoration: none;  
    display: block;  
    padding: 0.5rem 0;  
    position: relative;  
    transition: all 0.3s ease;  
  }  
  
  .cyber-nav li a:hover {  
    color: #00ffff;  
    text-shadow: 0 0 10px #00ffff;  
  }  
  
  /* === LANGUAGE BAR  === */  
  .language-bar {  
    position: absolute;  
    bottom: 2rem;  
    left: 1rem;  
    right: 1rem;  
    display: flex;  
    flex-wrap: wrap;  
    gap: 0.5rem;  
  }  
  
  .lang-tag {  
    background: rgba(0, 150, 150, 0.2);  
    border: 1px solid rgba(0, 255, 255, 0.3);  
    padding: 0.2rem 0.5rem;  
    border-radius: 4px;  
    font-size: 0.8rem;  
  }  
  
  /* === GLITCH TEXT EFFECT === */  
  .glitch {  
    position: relative;  
    font-size: 4rem;  
    font-weight: bold;  
    color: #fff;  
    text-shadow: 0 0 10px #00ffff;  
  }  
  
  .glitch::before, .glitch::after {  
    content: attr(data-text);  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    opacity: 0.8;  
  }  
  
  .glitch::before {  
    color: #ff00ff;  
    z-index: -1;  
    animation: glitch-effect 3s infinite;  
  }  
  
  .glitch::after {  
    color: #00ffff;  
    z-index: -2;  
    animation: glitch-effect 2s reverse infinite;  
  }  
  
  @keyframes glitch-effect {  
    0% { transform: translate(0); }  
    20% { transform: translate(-3px, 3px); }  
    40% { transform: translate(-3px, -3px); }  
    60% { transform: translate(3px, 3px); }  
    80% { transform: translate(3px, -3px); }  
    100% { transform: translate(0); }  
  }  
  
  /* === PARTICLE RAIN  === */  
  .particle-rain {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    z-index: -1;  
    pointer-events: none;  
  }  
  
  /* === 3D TILT EFFECT=== */  
  .project-card {  
    transition: transform 0.3s ease, box-shadow 0.3s ease;  
    max-width: 100%;
    overflow: hidden;
  }  
  
  .project-card:hover {  
    transform: scale(1.02);  
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.2);  
    z-index: 1;
  }   

  /* === SWIPE AREA INDICATOR === */
  .swipe-indicator {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 50px;
    background: rgba(0, 255, 255, 0.3);
    border-radius: 0 5px 5px 0;
    z-index: 999;
    display: none;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% { opacity: 0.3; }
    50% { opacity: 0.7; }
    100% { opacity: 0.3; }
  }

  @media (max-width: 991px) {
    .swipe-indicator {
      display: block;
    }
  }

    /* Centered Footer */
  .cyber-footer {
    text-align: center;
    padding: 2rem;
    margin-top: 2rem;
    width: 100%;
    background: rgba(10, 10, 20, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 255, 255, 0.1);
  }

  /* Touch Events for Mobile */
  @media (max-width: 991px) {
    .cyber-nav {
        touch-action: pan-x;
    }
    
    .main-container {
        touch-action: pan-y pinch-zoom;
    }
  }

    /* Centered Footer */
  .cyber-footer {
    text-align: center;
    padding: 2rem;
    margin-top: 2rem;
    width: 100%;
    background: rgba(10, 10, 20, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 255, 255, 0.1);
  }

  /* Touch Events for Mobile */
  @media (max-width: 991px) {
    .cyber-nav {
        touch-action: pan-x;
    }
    
    .main-container {
        touch-action: pan-y pinch-zoom;
    }
  }