@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Orbitron:wght@400..900&display=swap");
.section {
  padding: 20px 100px;
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
}

.ibm {
  font-family: "IBM Plex Mono", monospace;
  font-style: normal;
}

.orbitron {
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
}

.stroke-text {
  -webkit-text-stroke: 1px white;
  color: transparent;
}

.font-outline {
  -webkit-text-stroke: 1px white;
}

.bg-stabilo {
  position: relative; 
  display: inline-block; 
  overflow: hidden;
  background-color: transparent !important; 
 
  color: black; 
  padding: 0;
}

.bg-stabilo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fce700;
  z-index: -1;
  transform-origin: left center;
  transform: scaleX(var(--highlight-scale, 0));
}

.radial-gradient-blue {
  width: 500px;
  height: 500px;
  border-radius: 100%;
  position: absolute;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0)   
  );
  filter: blur(15px); 
  animation: moveUpDownBlue 5s ease-in-out infinite; 
}

  /* Mobile-first responsive additions without modifying existing classes */
  @media (max-width: 1024px) {
    .card-artefak-1, .card-artefak {
      flex-direction: column !important;
    }
    
    .artefak-left, .artefak-right {
      width: 100% !important;
      height: auto !important;
    }
    
    .w-px {
      width: 100% !important;
      height: 1px !important;
      margin: 1.5rem 0;
      background-color: rgba(255,255,255,0.3) !important;
    }
    
    .h-[800px] {
      height: auto !important;
      min-height: 400px;
    }
    
    .px-18 {
      padding-left: 1.5rem !important;
      padding-right: 1.5rem !important;
    }
    
    .ps-18 {
      padding-left: 1.5rem !important;
    }
    
    .flex.items-end {
      align-items: center;
      margin-top: 2rem;
    }
    
    .absolute.flex.flex-col {
      position: relative !important;
      margin: 1.5rem 0;
      padding: 0 1.5rem;
    }
    
    .text-end, .text-start {
      text-align: center !important;
    }
    
    .ms-12, .me-12 {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    
    .gap-x-8 {
      gap: 1rem !important;
    }
    
    .mt-26 {
      margin-top: 1rem !important;
    }
    
    .top-18 {
      top: 0 !important;
    }
  }
  
  @media (max-width: 768px) {
    /* Hide 3D elements on mobile */
    #artefak-1, #artefak-2, #artefak-3, #artefak-4 {
      display: none !important;
    }
    
    .orbitron {
      font-size: 1.8rem !important;
      line-height: 1.2 !important;
    }
    
    .w-[70%] {
      width: 60% !important;
    }
    
    .h-[800px] {
      min-height: 350px;
    }
    
    .aboutteks-1 p, .ibm {
      font-size: 0.9rem !important;
      line-height: 1.5 !important;
    }
  }
  
  @media (max-width: 480px) {
    .w-full.h-[800px].flex.items-end {
      flex-direction: column;
      gap: 1rem;
      height: auto !important;
      min-height: 300px;
    }
    
    .flex-1 {
      width: 100% !important;
    }
    
    .flex-1 img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
    
    .h-[800px] {
      min-height: 280px;
    }
    
    .orbitron {
      font-size: 1.5rem !important;
    }
    
    .gap-y-6 {
      gap: 0.5rem !important;
    }
    
    /* Timeline adjustments */
    .relative.flex.justify-start.items-center,
    .relative.flex.justify-end.items-center {
      margin-bottom: 1.5rem;
    }
    
    .w-6.h-6.rounded-full {
      width: 12px !important;
      height: 12px !important;
    }
    
    /* Text content adjustments */
    .text-white-primary {
      padding-bottom: 1rem;
    }
    
    .bg-stabilo {
      padding: 0.2rem 0.4rem !important;
    }
  }