:root {
    --color-background: #008080;
    --color-white: #fdffff;
    --color-grey_light: #c3c3c3;
    --color-grey_dark: #818181;
    --color-black: #000000;
    --color-blue: #010081;
    --color-pink: #FF0081;
    --navbar-height: 56px;
  }
  
  body {
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  html {
    overflow-x: hidden;
  }
  
  .container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .uber-image-container {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--navbar-height));
    overflow: hidden;
    z-index: -1;
  }
  
  .image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  
  .team-image {
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: bottom;
    opacity: 0;
    bottom: 0;
  }
  
  .image-1 { transform: translateX(-100%); z-index: 1; }
  .image-2 { transform: translateX(100%); z-index: 2; }
  .image-3 { transform: translateY(100%); z-index: 3; }
  .image-4 { transform: translateY(-100%); z-index: 4; }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    opacity: 0;
    z-index: 5;
  }
  
  @keyframes moveToCenter {
    0% {
      opacity: 0;
      transform: translate(var(--start-x), var(--start-y)) scale(1);
    }
    60% {
      opacity: 1;
      transform: translate(0, 0) scale(1);
    }
    75% {
      transform: translate(0, 0) scale(1.05);
    }
    90% {
      transform: translate(0, 0) scale(0.95);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0) scale(1);
    }
  }
  
  .team-image {
    animation: moveToCenter 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s forwards;
  }
  
  .image-1 { --start-x: -100%; --start-y: 0; }
  .image-2 { --start-x: 100%; --start-y: 0; }
  .image-3 { --start-x: 0; --start-y: 100%; }
  .image-4 { --start-x: 0; --start-y: -100%; }
  
  .content {
    position: relative;
    z-index: 1;
    padding: 20px;
    margin-top: calc(100vh - var(--navbar-height));
  }