*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
img {
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}

section {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.sky {
    position: absolute;  
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1; 
}
.houses {
    position: absolute;
    bottom: 300px;
    left: 0;
    width: 100%;
    z-index: 2;
}
.aeroplane {
    position: absolute;
    top: 20px; 
    right: -400px; 
    width: 400px;
    z-index: 3; 
    animation: flyAcross 6s linear infinite, floatUpDown 2s ease-in-out infinite; 
}

@keyframes flyAcross {
    0% {
        right: -300px; 
}
    100% {
        right: 100%; 
}
}
@keyframes floatUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.helicopter {
    position: absolute;
    top: 80px; 
    right: -400px; 
    width: 200px;
    z-index: 3; 
    animation: heliFly 4s linear infinite, heliFloat 2.5s ease-in-out infinite;
}

@keyframes heliFly {
    0% {
        right: -300px;
        transform: rotate(0deg);
    }
    100% {
        right: 100%;
        transform: rotate(3deg); 
    }
}

@keyframes heliFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); } 
}
.man {
    position: absolute;
    bottom: 330px; 
    right: -150px; 
    width: 120px;
    z-index: 5;
    animation: manWalk 15s linear infinite;
}

@keyframes manWalk {
    0% {
        right: -150px;
    }
    100% {
        right: 110%;
    }
}

.woman {
    position: absolute;
    bottom: 330px;
    left: -300px; 
    width: 110px;
    z-index: 6;
    animation: womanWalk 15s linear infinite;
    animation-delay: 2s; 
}

@keyframes womanWalk {
    0% {
        left: -300px;
    }
    100% {
        left: 110%;
    }
}
.sidewalk {
    position: absolute;
    bottom: 305px;
    left: 0;
    width: 100%;
    height: 23.5px;
    background: #bfbfbf;
    z-index: 3;
}

.road1 {
    position: absolute;
    bottom:270px;
    left: 0;
    width: 100%;
    height: 35px;
    background: white;
    z-index: 3;
}

.grass {
    position: absolute;
    bottom:260px;
    left: 0;
    width: 100%;
    height: 10px;
    background: #55ee55;
    z-index: 2;
}
.taxi1 {
    position: absolute;
    bottom: 200px; 
    right: -300px;
    width: 200px;
    z-index: 4;
    animation: taxi1Drive 4s linear infinite;
}

@keyframes taxi1Drive {
    0% {
        right: -300px;
    }
    100% {
        right: 110%;
    }
}

.bike {
    position: absolute;
    bottom: 240px;
    right: -250px;
    width: 140px;
    z-index: 4;
    animation: bikeRide 3.5s linear infinite;
    animation-delay: 2s;
}

@keyframes bikeRide {
    0% {
        right: -250px;
    }
    100% {
        right: 110%;
    }
}

.birds1 {
    position: absolute;
    top: 30px; 
    right: -300px;
    width: 150px;
    z-index: 2;
    animation: birdsFly 15s linear infinite, birdsFloat 3s ease-in-out infinite;
}

.birds2 {
    position: absolute;
    top: 20px;
    right: -400px;
    width: 100px;
    z-index: 2;
    animation: birdsFly 18s linear infinite, birdsFloat 4s ease-in-out infinite;
    animation-delay: 3s;
}

@keyframes birdsFly {
    0% {
        right: -400px;
    }
    100% {
        right: 110%;
    }
}

@keyframes birdsFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
.road2{
    position: absolute;
    z-index: 7;
    height: 120px;
    bottom:140px;
    width: 100%;
    left: 0;
}
.road3{
    position: absolute;
    z-index: 7;
    height: 120px;
    bottom:-30px;
    width: 100%;
    left: 0;
}
.median{
    position: absolute;
    bottom:90px;
    left: 0;
    width: 100%;
    height: 50px;
    background: #313030;
    z-index: 8;
    border-top: 5px dashed white;
    border-bottom: 5px dashed white;
}
.truck1 {
    position: absolute;
    bottom: 140px; 
    right: -300px;
    width: 200px;
    z-index: 8;
    animation: truck1Drive 3.2s linear infinite;
}

@keyframes truck1Drive {
    0% {
        right: -300px;
    }
    100% {
        right: 110%;
    }
}
.light1, .light2, .light3, .light4{
    position: absolute;
    height: 180px;
    z-index: 8;
    width: auto;
}
.light1{
    bottom:130px;
    right: 260px;
}
.light2{
    bottom:130px;
    right: 510px;
}
.light3{
    bottom:-50px;
    right: 760px;
}
.light4{
    bottom:-50px;
    right: 1100px;
}
.sport-car{
    position: absolute;
    bottom: 40px; 
    left: -300px;
    width: 200px;
    z-index: 8;
    animation: sportDrive 2s linear infinite;
}

@keyframes sportDrive {
    0% {
        left: -300px;
    }
    100% {
        left: 110%;
    }
}
.truck2{
    position: absolute;
    bottom: -90px; 
    left: -300px;
    width: 200px;
    z-index: 8;
    animation: truck2Drive 4s linear infinite;
}

@keyframes truck2Drive {
    0% {
        left: -300px;
    }
    100% {
        left: 110%;
    }
}.taxi2{
    position: absolute;
    bottom:-70px; 
    left: -300px;
    width: 200px;
    z-index: 8;
    animation: taxi2Drive 3.5s linear infinite;
}

@keyframes taxi2Drive {
    0% {
        left: -300px;
    }
    100% {
        left: 110%;
    }
}
.bic{
    position: absolute;
    bottom:-70px; 
    left: -300px;
    width: 100px;
    z-index: 9;
    animation: bicDrive 6s linear infinite;
}

@keyframes bicDrive {
    0% {
        left: -300px;
    }
    100% {
        left: 110%;
    }
}