/* * {
    box-sizing: border-box;
  }
  
  body {
    width: 100%;
    height: 100vh;
    position: relative;
  }
  
  section {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 20vw;
    top: calc(50% - 10vw);
  } */
  
  .tech-stack-container {
    /* display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    justify-items: center;
    gap: 30px; */

    width: 100%;
    position: relative;
    overflow: hidden;
    height: 16vw;
    top: calc(50% - 10vw);

  }
  .tech-stack-logo {
    width: 64px;
    background-color: transparent;
    cursor: pointer;
  }

  .tech-stack-logo:hover {
    animation: zoom .5s ease-in-out 0s 1 normal forwards;
  }
  .tech-stack-logo:mouseleave {
    animation: zoomOut .5s ease-in-out 0s 1 normal backwards;
  }

  @keyframes zoom {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.2); /* Zoom out */
    }
  }
  @keyframes zoomOut {
    0% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1); /* Zoom out */
    }
  } 

  .logo-wrapper {
    width: 20%;
    position: absolute;
    visibility: hidden;
    top: 0;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    
    &::after {
      content: "";
      display: block;
      position: relative;
      width: 100%;
      padding-bottom: 100%;
    }
    
    &:nth-of-type(even) {
      .logo {
        background: #ffffff;        
      }
    }
    
    .logo {
      display: grid;
      place-content: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 20px;
      border-radius: 100%;
      
      svg {
        width: 100%;
      }
    }
    
  }

  .logo-marque {
      width: 100%;
      position: relative;
      overflow: hidden;
      height: 20vw;
      top: calc(50% - 10vw);
  }


  .marquee-container {
    width: 100%;
    overflow: hidden;
    /* background-color: #f0f0f0; */
  }
  
  .marquee {
    display: flex;
    animation: scroll 30s linear infinite;
    justify-content: space-between;
    align-items: center;
    height: auto;

    :nth-child(even) {
        background: #fff;        
        .marquee-logo {
          background: red;        
        }
      }
  
      .marquee-logo {
        width: 20%;
        height: 100%;
        margin-right: 20px;
        padding: 20px;
        border-radius: 100%;
        /* place-content: center; */
    /* background-color: #fff; */
      }
      }
  
  
  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  /* Pause on hover */
  .marquee:hover {
    animation-play-state: paused;
  }