.home-section-container
{
    visibility: visible;
} 
.section-one {
    position: relative;
    top: 0;
    /* margin: 0 3rem; */
    animation: section-one 1s 3s linear forwards;
  }
  @-webkit-keyframes section-one {
    0%{
      opacity: 1;
    }
    25%{
    opacity: 0.75;
    }
    50%{
    opacity: 0.50;
    }
    75%{
    opacity: 0.25;
    }
    100%{
      opacity: 0;
    }
    }
  .banner-img {
  }
  .banner-img > img{
    position: relative;
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    animation: banner-img 1s linear forwards;
  }
  @-webkit-keyframes banner-img {
    from {
      top: 100%;
      opacity: 1;
    }
    to {
      top: 0;
      opacity: 1;
    }
  }
  
  .img-container {
  }
  
  .left-location-img {
    position: absolute;
    top: 68%;
    z-index: 11;
    width: 12%;
    left: 3.3%;
    opacity: 0;
    animation: left-location-img 1s 2s linear forwards;
  }
  @-webkit-keyframes left-location-img {
    from {
      top: 100%;
      opacity: 1;
    }
    to {
      top: 68%;
      opacity: 1;
    }
  }
  .right-location-fir-img {
    position: absolute;
    top: 62%;
    z-index: 7;
    left: 65.5%;
    width: 8%;
    opacity: 0;
    animation: right-location 1s 2s linear forwards;
  }
  @-webkit-keyframes right-location {
    from {
      opacity: 1;
      top: 100%;
    }
    to {
      opacity: 1;
      top: 53%;
    }
  }
  .right-location-sec-img {
    position: absolute;
    top: 53.3%;
    z-index: 2;
    left: 54.7%;
    width: 8%;
    opacity: 0;
    animation: right-location-sec-img 1s 2s linear forwards;
  }
  @-webkit-keyframes right-location-sec-img {
    from {
      opacity: 1;
      top: 100%;
    }
    to {
      opacity: 1;
      top: 53.3%;
    }
  }
  .right-red-building{
    width: 18%;
    position: absolute;
    top: 50%;
    z-index: -1;
    left: 5.5%;
    opacity: 0;
    animation:right-red-building 1s 2s linear forwards;
  }
  @-webkit-keyframes right-red-building {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0.25;
    }
    50% {
      opacity: 0.25;
    }
    75% {
      opacity: 0.25;
    }
    100% {
      opacity: 1;
    }
  }
  .redbuilding {
    position: absolute;
  top: 48%;
  left: 8%;
  width: 88%;
  opacity: 0;
  animation: redbuilding 1s 2s linear forwards;
  }
  @-webkit-keyframes redbuilding {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0.25;
    }
    50% {
      opacity: 0.25;
    }
    75% {
      opacity: 0.25;
    }
    100% {
      opacity: 1;
    }
  }
  .building-line-one {
    position: absolute;
    width: 6.2%;
    z-index: 6;
    top: 46.4%;
    left: 72%;
    opacity: 0;
    animation: building-line-one 1s 2s linear forwards;
  }
  @-webkit-keyframes building-line-one {
    from {
      top: 0%;
      opacity: 1;
    }
    to {
      top: 42.4%;
      opacity: 1;
    }
  }
  .building-line-two {
    position: absolute;
    top: 42.2%;
    z-index: 9;
    left: 49%;
    width: 6.3%;
    opacity: 0;
    animation: building-line-two 1s 2s linear forwards;
  }
  @-webkit-keyframes building-line-two {
    from {
      top: 0%;
      opacity: 1;
    }
    to {
      top: 42.2%;
      opacity: 1;
    }
  }
  .building-line-three {
    position: absolute;
    top: 46.2%;
   z-index: 2;
    left: 41.2%;
    width:6.3%;
    opacity: 0;
    animation: building-line-three 1s 2s linear forwards;
  }
  @-webkit-keyframes building-line-three {
    from {
      top: 100%;
      opacity: 1;
    }
    to {
      top: 42%;
      opacity: 1;
    }
  }
  .building-line-four {
    position: absolute;
    top: 43%;
    width: 6.3%;
    z-index: 10;
    left: 29.5%;
    opacity: 0;
    animation: building-line-four 1s 2s linear forwards;
  }
  @-webkit-keyframes building-line-four {
    from {
      top: 0%;
      opacity: 1;
    }
    to {
      top: 43%;
      opacity: 1;
    }
  }
  .building-line-small {
    position: absolute;
    top: 58%;
    width: 4%;
    z-index: 1;
    left: 61.8%;
    opacity: 0;
    animation: building-line-small 1s 2s linear forwards;
  }
  @-webkit-keyframes building-line-small {
    from {
      top: 0%;
      opacity: 1;
    }
    to {
      top: 54.2%;
      opacity: 1;
    }
  }
  .building-line-e {
    position: absolute;
    z-index: 6;
    top: 42%;
    width: 10%;
    right: 9%;
    opacity: 0;
    animation: building-line-e 1s 2s linear forwards;
  }
  @-webkit-keyframes building-line-e {
    0%{
      opacity: 0;
      right: 0%;
    }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    right: 9%;
    opacity: 1;
  }
  } 
  .sec-small-building {
    position: absolute;
    top: 77.5%;
    width:8%;
    z-index: 5;
    left: 34.8%;
    opacity: 0;
    animation: sec-small-building 1s 2s linear forwards;
  }
  @-webkit-keyframes sec-small-building {
  0%{
    opacity: 0;
    top: 100%;
  }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    top: 68.1%;
  opacity: 1;
  }
  } 
  .left-building-first {
    position: absolute;
    top: 53.8%;
    width: 9%;
    left: -7%;
    opacity: 0;
    animation: left-building-first 1s 2s linear forwards;
  }
  @-webkit-keyframes left-building-first {
  0%{
    opacity: 0;
    right: 0;
  }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    left: 4%;
  opacity: 1;
  }
  } 
  .left-building-sec {
    position: absolute;
    top: 49%;
    width: 8%;
    left: 13%;
    z-index: 2;
    opacity: 0;
    animation: left-building-sec 1s 2s linear forwards;
  }
  @-webkit-keyframes left-building-sec {
  0%{
    opacity: 0;
    top: 0%;
  }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    top: 49%;
  opacity: 1;
  }
  } 
  .left-sky-img {
    position: absolute;
    top: 40%;
    width: 15%;
    left: 11%;
    animation: 3s ease-in-out forwards;
  }
  .right-sky-img {
    position: absolute;
    top: 32%;
    left: 72%;
    width: 12%;
    animation: 3s ease-in-out forwards;
  }
  .last-building-img {
    position: absolute;
    left: 27.9%;
    top: 60%;
    width: 8%;
    opacity: 0;
    z-index: 2;
    animation: last-building-img 1s 2s linear forwards;
  }
  @-webkit-keyframes last-building-img {
  0%{
    opacity: 0;
  top: 100%;
  }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    top:51%;
  opacity: 1;
  }
  } 
  .big-logo {
    position: absolute;
    width: 67%;
    transform: translate(-50%, -50%);
    text-align: center;
    top: 25%;
    left: 50%;
    opacity: 0;
    animation: big-logo 1s 2s linear forwards;
  }
  @-webkit-keyframes big-logo {
  0%{
    opacity: 0;
    left: 0;
  }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    left: 50%;
  opacity: 1;
  }
  } 
  .car-one {
    position: absolute;
    z-index: 11;
    bottom: 13.4%;
    left: 60.5%;
    width: 5%;
    opacity: 0;
    animation: car-one 1s 2s linear forwards;
  }
  @-webkit-keyframes car-one {
  0%{
    opacity: 0;
    bottom: 2%;
    left: 62.7%;
    opacity: 1;
  }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    bottom: 13.4%;
    left: 60.5%;
    opacity: 1;
  }
  } 
  .car-two {
    position: absolute;
    z-index: 11;
    left: 52.9%;
    bottom: 5.4%;
    width: 5%;
    opacity: 0;
    animation: car-two 1s 2s linear forwards;
  }
  @-webkit-keyframes car-two {
  0%{
    opacity: 0;
      bottom: 2%;
      left: 52.9%;
      opacity: 1;
  }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    bottom: 13.4%;
    left: 51%;
    opacity: 1;
  }
  } 
  .car-three {
    position: absolute;
    z-index: 11;
    left: 44%;
    bottom: 5.4%;
    width: 5%;
    opacity: 0;
    animation: car-three 1s 2s linear forwards;
  }
  @-webkit-keyframes car-three {
  0%{
    bottom: 2%;
    left: 47.9%;
    opacity: 0;
  }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    bottom: 13.4%;
    left: 46.4%;
    opacity: 1;
  }
  } 
  .car-four {
    position: absolute;
    z-index: 11;
    left: 39%;
    bottom: 5.4%;
    width: 5%;
    opacity: 0;
    animation: car-four 1s 2s linear forwards;
  }
  @-webkit-keyframes car-four {
  0%{
    bottom: 2%;
    left: 42.9%;
    opacity: 0;
  }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    bottom: 13.4%;
      left: 41.5%;
      opacity: 1;
  }
  }
  .car-left {
    position: absolute;
    z-index: 11;
    bottom: 1%;
    width: 7%;
    left: 7.5%;
    opacity: 0;
    animation: car-left 1s 2s linear forwards;
  }
  @-webkit-keyframes car-left {
  0%{
    top: 100%;
    opacity: 0;
  }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    top: 87%;
    opacity: 1;
  }
  }
  .sec-building-img {
    position: absolute;
    top: 51%;
    width: 4.8%;
    left: 17.9%;
    opacity: 0;
    z-index: 2;
    animation: sec-building-img 1s 2s linear forwards;
  }
  @-webkit-keyframes sec-building-img {
    
  0%{
    top: 100%;
    opacity: 0;
  }
  25%{
  opacity: 0.25;
  }
  50%{
  opacity: 0.50;
  }
  75%{
  opacity: 0.75;
  }
  100%{
    top: 51%;
      opacity: 1;
  }
  }
  .poll-img {
    position: absolute;
    top: 63%;
    left: 35%;
    width: 2.8%;
    z-index: 11;
  }
  .road-img {
    width: 100%;
    position: absolute;
    top: 64.4%;
    padding-left:2.5rem;
    z-index: 1;
  }
  button{
    position: relative;
    display:inline-block;
  }
  button::before{
    content: '';
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    transform: 0.5s ease-in-out;
    transform: scaleY(1);
  }
  button:hover::before{
    transform: scaleY(0);
  }