.material-symbols-outlined{
  font-variation-settings:'FILL'0,'wght'400,'GRAD'0,'opsz'24
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes carousel-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}

.fade-in{
  animation:fadeIn .5s ease-in-out
}

.carousel-paused{
  animation-play-state:paused
}

.animate-carousel-scroll{
  animation:carousel-scroll 100s linear infinite;
  width:max-content;
  display:flex
}

.gallery-image{
  transition:transform .3s ease
}

.gallery-image:hover{
  transform:scale(1.05)
}

.mobile-menu-open{
  transform:translateY(0)!important;
  opacity:1!important;
  pointer-events:auto!important
}

.timeline-item{
  opacity:0;
  transform:translateY(20px);
  transition:all .5s ease
}

.timeline-item.visible{
  opacity:1;
  transform:translateY(0)
}

*{box-sizing:border-box}
img{max-width:100%;height:auto}
body{font-display:swap;overflow-x:hidden}

@media(prefers-color-scheme:dark){.dark-image{filter:brightness(.8)contrast(1.2)}}

@media(max-width:640px){
  .layout-content-container{padding:0 .5rem}
  h2{font-size:1.5rem}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:.75rem}
  .timeline-container{grid-template-columns:auto 1fr;gap:.75rem}
  .carousel-controls{display:none}
  footer .grid{grid-template-columns:1fr;gap:1.5rem}
  button,a{min-height:44px;min-width:44px}
}

@media(max-width:375px){
  h2{font-size:1.25rem}
  .logo-circle{width:48px;height:48px}
}

.industrial-background{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:-3;
  background-color:#ffffff;
  background-image:
    linear-gradient(63deg,#e8e8e8 23%,transparent 23%) 7px 0,
    linear-gradient(63deg,transparent 74%,#e8e8e8 78%),
    linear-gradient(63deg,transparent 34%,#e8e8e8 38%,#e8e8e8 58%,transparent 62%),
    linear-gradient(to bottom,rgba(0,0,0,.02) 1px,transparent 1px),
    linear-gradient(to right,rgba(0,0,0,.02) 1px,transparent 1px);
  background-size:32px 64px,32px 64px,32px 64px,32px 32px,32px 32px;
  opacity:1
}

.metal-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;
  background-image:
    radial-gradient(circle at 10% 20%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 90% 40%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 50% 80%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 30% 60%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 70% 30%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 20% 70%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 85% 75%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 15% 35%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 95% 15%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 5% 85%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 65% 55%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 35% 45%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 25% 25%,#c8c8c8 3px,transparent 4px),
    radial-gradient(circle at 75% 65%,#c8c8c8 3px,transparent 4px),
    radial-gradient(circle at 45% 85%,#c8c8c8 3px,transparent 4px),
    radial-gradient(circle at 85% 25%,#c8c8c8 3px,transparent 4px),
    repeating-linear-gradient(90deg,transparent,transparent 18px,rgba(180,180,180,.2) 19px,rgba(180,180,180,.2) 20px,transparent 21px),
    repeating-linear-gradient(0deg,transparent,transparent 18px,rgba(180,180,180,.2) 19px,rgba(180,180,180,.2) 20px,transparent 21px),
    radial-gradient(circle at 40% 30%,rgba(200,200,200,.4) 1px,transparent 2px),
    radial-gradient(circle at 60% 70%,rgba(200,200,200,.4) 1px,transparent 2px),
    radial-gradient(circle at 80% 50%,rgba(200,200,200,.4) 1px,transparent 2px);
  background-size:80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,100px 100px,100px 100px,100px 100px,100px 100px,40px 40px,40px 40px,150px 150px,150px 150px,150px 150px;
  opacity:.6
}

.grid-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(180,180,180,.3) 40px,rgba(180,180,180,.3) 41px,transparent 42px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(180,180,180,.3) 40px,rgba(180,180,180,.3) 41px,transparent 42px),
    repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(200,200,200,.15) 10px,transparent 11px),
    repeating-linear-gradient(90deg,transparent,transparent 9px,rgba(200,200,200,.15) 10px,transparent 11px);
  background-size:80px 80px,80px 80px,20px 20px,20px 20px;
  opacity:.5
}

.shadow-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(0,0,0,.02) 0,transparent 50%),
    radial-gradient(ellipse at 70% 80%,rgba(0,0,0,.01) 0,transparent 50%),
    radial-gradient(circle at 10% 10%,rgba(255,255,255,.6) 0,transparent 30%),
    radial-gradient(circle at 90% 90%,rgba(255,255,255,.4) 0,transparent 40%);
  pointer-events:none;
  opacity:.4
}

.dark .industrial-background{
  background-color:#1a1a1a;
  background-image:
    linear-gradient(63deg,#2a2a2a 23%,transparent 23%) 7px 0,
    linear-gradient(63deg,transparent 74%,#2a2a2a 78%),
    linear-gradient(63deg,transparent 34%,#2a2a2a 38%,#2a2a2a 58%,transparent 62%),
    linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px)
}

.dark .metal-overlay{opacity:.4}
.dark .grid-overlay{opacity:.3}

.logo-circle{
  height:48px;width:48px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  display:flex;justify-content:center;align-items:center;overflow:hidden;
  backdrop-filter:blur(2px);transition:all .3s ease;flex-shrink:0;
  background:rgba(255,255,255,.1)
}

@media(min-width:640px){.logo-circle{height:60px;width:60px}}

.logo-circle:hover{transform:scale(1.07)}
.logo-img{height:110%;width:auto;object-fit:cover;image-rendering:-webkit-optimize-contrast}

.partner-logo{
  width:auto;object-fit:contain;transition:all .3s ease;opacity:.9
}

.partner-logo:hover{
  opacity:1;
  transform:scale(1.05)
}

.carousel-item{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center
}

@media(max-width:375px){
  .partner-logo{height:48px}
  .carousel-item{padding:0 .75rem}
}

@media(min-width:376px){
  .partner-logo{height:56px}
  .carousel-item{padding:0 1rem}
}

@media(min-width:640px){
  .partner-logo{height:64px}
  .carousel-item{padding:0 1.5rem}
}

@media(min-width:768px){
  .partner-logo{height:72px}
  .carousel-item{padding:0 2rem}
}

@media(min-width:1024px){
  .partner-logo{height:80px}
  .carousel-item{padding:0 2rem}
}