.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
.glass-effect {
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
.hover-scale {
      transition: transform 0.3s ease;
    }
.hover-scale:hover {
      transform: scale(1.05);
    }
.parallax {
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
.fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
.fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
.nav-blur {
      backdrop-filter: blur(20px);
      background: rgba(17, 24, 39, 0.9);
      transition: all 0.3s ease;
    }
    /* Enhanced header image integration */
.hero-with-image {
  background-image: 
    linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.9) 100%),
    url('../images/header.jpg');
      background-position: center center;
      background-size: cover;
      background-attachment: fixed;
      position: relative;
    }
.hero-overlay {
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(.5px);
    }
    /* Floating header image in about section */
.floating-header {
  background-image: url('../images/man.jpg');
      background-size: cover;
      background-position: center;
      border-radius: 1rem;
      box-shadow: 0 25px -50px -12px rgba(0, 0, 0, 0.5);
    }
    /* Header image in navigation background */
 .nav-with-header {
  background-image: 
    linear-gradient(90deg, rgba(17, 24, 39, 0.95) 0%, rgba(17, 24, 39, 0.9) 100%),
    url('../images/header.jpg');
      background-size: cover;
      background-position: center;
    }
    /* Subtle header pattern */
.header-pattern {
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(102, 126, 234, 0.1) 0%, transparent 70%),
    radial-gradient(circle at 75% 75%, rgba(118, 75, 162, 0.1) 0%, transparent 70%),
    url('../images/latto.jpg');
      background-size: cover, cover, cover;
      background-position: center;
      background-blend-mode: overlay;
    }
    /* Animated header reveal */
.header-reveal {
      position: relative;
      overflow: hidden;
    }
.header-reveal::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('../images/header.jpg');
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      z-index: -1;
    }
    .header-reveal:hover::before {
      opacity: 0.3;
    }