/* .main-container {
    display: flex;
    height: 100vh;
    align-items: center;
    background: #111;
  }
  
  .main-container .image-container {
    /* flex: 1; 
    height: 100%;
  
    position: fixed;
    width: 100%;
  }
  
  .main-container h1 {
    flex: 1;
    text-align: center;
    color: #fff;
    font-family: "Raleway", sans-serif;
    text-transform: uppercase;
    font-size: 60px;
    font-weight: 800;
    letter-spacing: 10px;
  
    z-index: 100;
    text-shadow: 2px 16px 16px rgba(0, 0, 0, 0.3);
    pointer-events: none;
  }
   */

   .image-container2 {
    /* flex: 1; */
    height: 60%;

    width: 100%;
  }

  .arrow-container {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-100%, -50%);
    transition: left 2s ease-out;
  }
  
  #moving-arrow {
    width: 50px; /* Adjust the size as needed */
    height: auto;
  }

     @keyframes slideRight {
        0% { left: -30px; opacity: 0; }
        100% { left: 10px; opacity: 1; }
    }

    .right-arrow {
        position: absolute;
        top: 50%;
        left: -30px; /* Initial position outside the container */
        transform: translateY(-50%);
        font-size: 20px;
        animation: slideRight 0.5s forwards; /* Animation duration and fill-mode */
    }


    @keyframes slideRight {
      0% { left: 0px; opacity: 1; }
      100% { left: calc(90% - 30px); opacity: 1; }
  }

  .right-arrow {
      position: absolute;
      top: 50%;
      left: -30px; /* Initial position outside the container */
      transform: translateY(-50%);
      font-size: 70px;
      color:white;
      font-weight: 1000;
      animation: slideRight 6s forwards 2s; /* Animation duration and fill-mode */
  }