.hero-robot-position {position: absolute; z-index: 1; width:100%; height:100%;  }
.hero-robot-background {width:auto; height:130%; background-image: url('../images/designwarriors-robot5.png');background-repeat: no-repeat; background-position: right -60px bottom 50px; background-size: contain; filter: brightness(90%); opacity: 0.9}

.mobile-hero-background {display: none}

.robot-eye-position {position:absolute; z-index: 2; width:auto; height:100% ;right: -60px; bottom: 50px }

.robot-eye-position2 {width:auto; height:130%; background-image: url('../images/glowing-robot-eye2.gif');background-repeat: no-repeat; background-position: right -60px bottom 50px; background-size: contain;}

@media (max-width:1130px) {
    
    .hero-robot-background {width:auto; height:100%; background-image: url('../images/designwarriors-robot5.png');background-repeat: no-repeat; background-position: right -150px top 0px; background-size: contain; filter: brightness(90%); opacity: 0.9} 
    
   .robot-eye-position {position:absolute; z-index: 2; width:auto; height:100% ;right: -150px; top: 0px; object-fit: contain }
    
    
    .robot-eye-position2 {width:auto; height:100%; background-image: url('../images/glowing-robot-eye2.gif');background-repeat: no-repeat; background-position: right -150px top 0px;; background-size: contain;}
}

/*@media (max-width:875px) {
    .robot-eye-position {display:none}
}*/
@media (max-width:768px) {
    
    .hero-robot-background {width:auto; height:100%; background-image: url('../images/designwarriors-robot5.png');background-repeat: no-repeat; background-position: right -150px top 0px; background-size: contain; filter: brightness(90%); opacity: 0.9}
    
    .robot-eye-position2 {width:auto; height:100%; background-image: url('../images/glowing-robot-eye2.gif');background-repeat: no-repeat; background-position: right -150px top 0px; background-size: contain;}
   
}

@media (max-width:640px) {
    
 .hero-robot-background {width:auto; height:100%; background-image: url('../images/designwarriors-robot5.png');background-repeat: no-repeat; background-position: right -150px top 50px; background-size: contain; /*filter: brightness(90%); opacity: 0.9*/}
    
    .robot-eye-position2 {width:auto; height:100%; background-image: url('../images/glowing-robot-eye2.gif');background-repeat: no-repeat; background-position: right -150px top 50px; background-size: contain;/* filter: brightness(90%); opacity: 0.9*/}

}

@media (max-width:500px) {
    
 .hero-robot-background {display: none}
.robot-eye-position2{display: none}
    
    .mobile-hero-background {background-image: url('../images/hero-video-poster.jpg'); background-repeat: no-repeat; background-size: cover; display: block; background-position: right}
    
    video {display:none}
}


.nav-container {
  background: rgba(255, 255, 255, 0.2); 
  -webkit-backdrop-filter: blur(12px); /* Crucial for iOS Safari */
  backdrop-filter: blur(12px);
}

@keyframes nav-scroll {
  0% {
    background-color: rgba(255, 255, 255, 0);
  }
  100% {
    /* Explicitly use RGBA zero to prevent WebKit rendering bugs */
    background-color: rgba(0, 0, 0, 1); 
  }
}

.dw-scroll-nav {
  /* Establish smooth hardware-accelerated transitions */
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.3s ease;
  -webkit-transform: translateZ(0); /* Prevents fixed position flickers on iOS */
  transform: translateZ(0);
}

/* This class gets applied immediately by JavaScript on scroll */
.dw-scroll-nav.scrolled {
  background-color: rgba(0, 0, 0, 1);
}