body{
    margin: 0;
    font-size: 5em;
    background-image: url(img/bg.jpg);
  }
  .banner {
    height: 100vh;
    
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/sct2.jpg');
    background-size: cover;
    background-position: center;
    animation: bgZoomIn 4s ease-in-out 1 forwards;
    z-index: -1;
    pointer-events: none;
  }
  .banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/after.png');
    background-size: cover;
    background-position: top;
    transform: scale(2);
    animation: bgZoomOut 4s ease-in-out 1 forwards;
    z-index: -1;
    pointer-events: none;
  }
  @keyframes bgZoomIn {
    from {
      transform: scale(1.2);
    } to {
      transform: scale(1);
    }
  }
  @keyframes bgZoomOut {
    from {
      transform: scale(1);
    } to {
      transform: scale(2);
    }
  }
  
  svg path {
    fill: transparent;
    stroke: #fff;
    stroke-width: 0.1;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: textAnimation 2s ease-in-out 1 forwards;
  }
  @keyframes textAnimation {
    0% {
      stroke-dashoffset: 50;
    }
    80% {
      fill: transparent;
    }
    100% {
      fill: #fff;
      stroke-dashoffset: 0;
    }
  }