.logo {
    width: 148px;
}

.airplane {
    position: absolute;
    top: -20px;
    left: 10%;
    height: 16px;
    animation: airplane 5s infinite;
}

.city {
    height: 64px;
}

.shipment-icon {
    width: 100px;
    height: 100px;
}

.stores {
    height: 40px;
}

.header-bg {
    position: absolute;
    z-index: -10;
    left: 0;
    top: 0;
    height: 1000px;
    z-index: -10;
    object-fit: cover;
}

@keyframes airplane {
    50% {
        top: -32px;
    }

    100% {
        left: 70%;
    }
}

@media (min-width: 578px) {
    .header-bg {
        left: 0;
        top: 0;
        height: 1000px;
        z-index: -10;
        object-fit: cover;
    }

    .airplane {
        top: -24px;
        left: 15%;
        height: 24px;
    }

    .city {
        height: 96px;
    }

    @keyframes airplane {
        50% {
            top: -32px;
        }

        100% {
            left: 75%;
        }
    }

    .shipment-icon {
        width: 90px;
        height: 90px;
    }
}

@media (min-width: 768px) {
    .header-bg {
        left: 0;
        top: 0;
        height: 900px;
        z-index: -10;
        object-fit: cover;
    }

    .airplane {
        top: -40px;
        left: 60px;
        height: 28px;
    }

    .city {
        height: 128px;
    }

    @keyframes airplane {
        50% {
            top: -40px;
        }

        100% {
            left: 82%;
        }
    }

    .shipment-icon {
        width: 120px;
        height: 120px;
    }
}

@media (min-width: 992px) {
    .header-bg {
        left: 0;
        top: 0;
        height: 1000px;
        z-index: -10;
        object-fit: cover;
    }

    .airplane {
        top: -44px;
        left: 245px;
        height: 44px;
    }

    .city {
        height: 176px;
    }

    @keyframes airplane {
        50% {
            top: -52px;
        }

        100% {
            left: 80%;
        }
    }

    .shipment-icon {
        width: 140px;
        height: 140px;
    }
}

@media (min-width: 1200px) {
    .header-bg {
        left: 0;
        top: 0;
        height: 1000px;
        z-index: -10;
        object-fit: cover;
    }

    .airplane {
        top: -32px;
        left: 200px;
        height: 36px;
    }

    .city {
        height: 148px;
    }

    @keyframes airplane {
        50% {
            top: -56px;
        }

        100% {
            left: 80%;
            height: 44px;
        }
    }

    .shipment-icon {
        width: 180px;
        height: 180px;
    }
}

/* .dolphin {
    width: 50px;
    position: absolute;
    bottom: -50px;
    left: 25%;
    z-index: 30;
    pointer-events: none;
    transform-origin: center;
    animation: dolphinDiveSmooth 5.5s cubic-bezier(0.55, 0.08, 0.31, 0.99)
        infinite;
}

@keyframes dolphinDiveSmooth {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    20% {
        transform: translate(55px, -35px) rotate(-10deg);
        opacity: 1;
    }

    40% {
        transform: translate(110px, -75px) rotate(-2deg);
        opacity: 1;
    }
    55% {
        transform: translate(160px, -20px) rotate(12deg);
        opacity: 0.9;
    }

    70% {
        transform: translate(190px, 30px) rotate(25deg);
        opacity: 0.5;
    }

    85% {
        transform: translate(220px, 60px) rotate(28deg);
        opacity: 0.15;
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .dolphin {
        width: 110px;
        left: 38%;
        bottom: 20px;
        animation-duration: 5.2s;
    }
} */

.dolphin {
    width: 50px;
    position: absolute;
    bottom: -40px; /* baseline */
    z-index: 30;
    pointer-events: none;
    transform-origin: center;
    animation-duration: 6s; /* slower, more natural */
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.left-dolphin {
    left: 25%;
    animation-name: dolphinSwimRight;
}

.right-dolphin {
    right: 25%;
    left: auto;
    animation-name: dolphinSwimLeft;
}

.delay-0 {
    animation-delay: 0s;
}
.delay-500 {
    animation-delay: 0.5s;
}
.delay-1000 {
    animation-delay: 1s;
}

@keyframes dolphinSwimRight {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: translate(60px, -10px) rotate(-5deg);
        opacity: 0.95;
    }
    50% {
        transform: translate(120px, 0) rotate(0deg);
        opacity: 1;
    }
    75% {
        transform: translate(180px, -10px) rotate(5deg);
        opacity: 0.95;
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes dolphinSwimLeft {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: translate(-60px, -10px) rotate(5deg);
        opacity: 0.95;
    }
    50% {
        transform: translate(-120px, 0) rotate(0deg);
        opacity: 1;
    }
    75% {
        transform: translate(-180px, -10px) rotate(-5deg);
        opacity: 0.95;
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .dolphin {
        width: 70px;
        animation-duration: 5.5s;
    }
}