html, body, .loader-container {
    margin: 0;
    height: 100%;
    width: 100%;
}

.loader-container {
    position: relative;
    background-color: #2d2d2d;
    transition: all 1.8s ease-in-out;
}

.structure, .smoke {
    position: absolute;
    z-index: 1000;
    top: calc(50% - 65px);
    left: calc(50% - 100px);
    width: 200px;
    height: 130px;
    animation: planeAndSmokeMovement 3s ease-out forwards;
    display: none;
    transition: margin-top 1.8s ease-in-out;
}

.structure svg {
    transition: margin-top 1.8s ease-in-out;
}

.smoke {
    z-index: 999;
    animation-delay: 0.5s; /* Start smoke animation slightly after the plane begins to move */
}


.turnoverCenter{
    margin-top: 0px;
    animation: turnoversCenter 0.5s ease-out forwards;
}

.turnoverCenterSmoke{
    margin-top: 0px;
    animation: turnoverCenterSmoke 0.5s ease-out forwards;
}


.turnovers {
    margin-top: 100px;
    animation: turnovers 0.5s ease-out forwards;
}

.turnovers2 {
    margin-top: -157px!important;
    animation: turnovers2 0.5s ease-out forwards;
}

.turnoversSmoke {
    margin-top: 100px;
    animation: turnoversSmoke 0.5s ease-out forwards;
}

.turnoversSmoke2 {
    margin-top: -157px!important;
    animation: turnoversSmoke2 0.5s ease-out forwards;
}

.structure {
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
    animation: shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
    display:block;
}

.text-container {
    position: absolute;
    top: calc(50% + 100px);
    left: calc(50% - 100px);
    width: 200px;
}
.text-container h2 {
    width: 100%;
    text-align: center;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

#rocket-svg {
    position: absolute;
    top: -112px;
    transform: rotate(90deg);
}

#right-wing, #left-wing, #nose, #window-stroke, #middle-wing {
    fill: #08b56c;
}

#rocket-main-part {
    fill: white;
}

#window-inner {
    fill: #2d2d2d;
}

.smoke span {
    position: absolute;
    width: 50px;
    border-bottom: 2px solid #fff;
}

.meteors-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
}

.meteors-container span {
    position: absolute;
    width: 75px;
    border-bottom: 2px solid #fff;
}

.smoke span:nth-child(1) {
    top: 28px;
    left: -50px;
    box-shadow: 0px 0px 5px #fff;
    animation: smokeAnim-0 ease-out 0.35s infinite;
}

@keyframes smokeAnim-0 {
    from {
        left: -50px;
        opacity: 1;
    }
    to {
        left: -110px;
        opacity: 0;
    }
}
.smoke span:nth-child(2) {
    top: 36px;
    left: -50px;
    box-shadow: 0px 0px 5px #fff;
    animation: smokeAnim-1 ease-out 0.65s infinite;
}

@keyframes smokeAnim-1 {
    from {
        left: -50px;
        opacity: 1;
    }
    to {
        left: -53px;
        opacity: 0;
    }
}
.smoke span:nth-child(3) {
    top: 44px;
    left: -50px;
    box-shadow: 0px 0px 5px #fff;
    animation: smokeAnim-2 ease-out 0.6s infinite;
}

@keyframes smokeAnim-2 {
    from {
        left: -50px;
        opacity: 1;
    }
    to {
        left: -180px;
        opacity: 0;
    }
}
.smoke span:nth-child(4) {
    top: 52px;
    left: -50px;
    box-shadow: 0px 0px 5px #fff;
    animation: smokeAnim-3 ease-out 0.65s infinite;
}

@keyframes smokeAnim-3 {
    from {
        left: -50px;
        opacity: 1;
    }
    to {
        left: -67px;
        opacity: 0;
    }
}
.smoke span:nth-child(5) {
    top: 60px;
    left: -50px;
    box-shadow: 0px 0px 5px #fff;
    animation: smokeAnim-4 ease-out 0.3s infinite;
}

@keyframes smokeAnim-4 {
    from {
        left: -50px;
        opacity: 1;
    }
    to {
        left: -223px;
        opacity: 0;
    }
}
.smoke span:nth-child(6) {
    top: 68px;
    left: -50px;
    box-shadow: 0px 0px 5px #fff;
    animation: smokeAnim-5 ease-out 0.65s infinite;
}

@keyframes smokeAnim-5 {
    from {
        left: -50px;
        opacity: 1;
    }
    to {
        left: -166px;
        opacity: 0;
    }
}
.smoke span:nth-child(7) {
    top: 76px;
    left: -50px;
    box-shadow: 0px 0px 5px #fff;
    animation: smokeAnim-6 ease-out 0.3s infinite;
}

@keyframes smokeAnim-6 {
    from {
        left: -50px;
        opacity: 1;
    }
    to {
        left: -227px;
        opacity: 0;
    }
}
.smoke span:nth-child(8) {
    top: 84px;
    left: -50px;
    box-shadow: 0px 0px 5px #fff;
    animation: smokeAnim-7 ease-out 0.3s infinite;
}

@keyframes smokeAnim-7 {
    from {
        left: -50px;
        opacity: 1;
    }
    to {
        left: -298px;
        opacity: 0;
    }
}

@keyframes smokeAnim-8 {
    from {
        left: -50px;
        opacity: 1;
    }
    to {
        left: -189px;
        opacity: 0;
    }
}

@keyframes smokeAnim-9 {
    from {
        left: -50px;
        opacity: 1;
    }
    to {
        left: -201px;
        opacity: 0;
    }
}

@keyframes meterosAnim-0 {
    0% {
        left: 100%;
    }
    75% {
        left: calc(0% - 75px);
    }
    100% {
        left: calc(0% - 75px);
    }
}

@keyframes meterosAnim-1 {
    0% {
        left: 100%;
    }
    75% {
        left: calc(0% - 75px);
    }
    100% {
        left: calc(0% - 75px);
    }
}

@keyframes meterosAnim-2 {
    0% {
        left: 100%;
    }
    75% {
        left: calc(0% - 75px);
    }
    100% {
        left: calc(0% - 75px);
    }
}

@keyframes meterosAnim-3 {
    0% {
        left: 100%;
    }
    75% {
        left: calc(0% - 75px);
    }
    100% {
        left: calc(0% - 75px);
    }
}

@keyframes meterosAnim-4 {
    0% {
        left: 100%;
    }
    75% {
        left: calc(0% - 75px);
    }
    100% {
        left: calc(0% - 75px);
    }
}

@keyframes meterosAnim-5 {
    0% {
        left: 100%;
    }
    75% {
        left: calc(0% - 75px);
    }
    100% {
        left: calc(0% - 75px);
    }
}

@keyframes shake {
    0%, 100% {transform: translateX(0); /* Move a bit past the center */}
    20% {transform: translateX(-10%); /* Move a bit past the center */}
    60% {transform: translateX(60%); /* Move a bit past the center */}
    80% {transform: translateX(-10%); /* Move a bit past the center */}
}
@keyframes shake1 {
    0%, 100% {transform: translateX(0); /* Move a bit past the center */}
    20% {transform: translateX(-10%); /* Move a bit past the center */}
    60% {transform: translateX(60%); /* Move a bit past the center */}
    80% {transform: translateX(-10%); /* Move a bit past the center */}
}
@keyframes shake2 {
    0%, 100% {transform: translateX(0); /* Move a bit past the center */}
    20% {transform: translateX(-10%); /* Move a bit past the center */}
    60% {transform: translateX(60%); /* Move a bit past the center */}
    80% {transform: translateX(-10%); /* Move a bit past the center */}
}
@keyframes shake3 {
    0%, 100% {transform: translateX(0); /* Move a bit past the center */}
    20% {transform: translateX(-10%); /* Move a bit past the center */}
    60% {transform: translateX(60%); /* Move a bit past the center */}
    80% {transform: translateX(-10%); /* Move a bit past the center */}
}
@keyframes shake4 {
    0%, 100% {transform: translateX(0); /* Move a bit past the center */}
    20% {transform: translateX(-10%); /* Move a bit past the center */}
    60% {transform: translateX(60%); /* Move a bit past the center */}
    80% {transform: translateX(-10%); /* Move a bit past the center */}
}






.structure.shake {
    animation: shake 2s 3ms;
}

.structure.shake1 {
    animation: shake1 2s 3ms;
}

.structure.shake2 {
    animation: shake2 2s 3ms;
}

.structure.shake3 {
    animation: shake3 2s 3ms;
}

.structure.shake4 {
    animation: shake4 2s 3ms;
}

@keyframes planeEnter {
    from { transform: translateX(-50vw); }
    to { transform: translateX(0); }
}

@keyframes planeEnterAndBack {
    0% {
        transform: translateX(-1000%); /* Start from the left, outside of view */
    }
    50% {
        transform: translateX(60%); /* Move a bit past the center */
    }
    100% {
        transform: translateX(0); /* Settle back to the center */
    }
}

@keyframes slightMove {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5%); /* Adjust this value for more or less movement */
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes moveBackward {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-5%); /* Adjust value for desired backward movement */
    }
}

@keyframes moveForwardLeave {
    from { transform: translateX(-50); }
    to { transform: translateX(150vw); }
}


.smoke span:nth-child(9) {
    top: 92px;
    left: -50px;
    box-shadow: 0px 0px 5px #fff;
    animation: smokeAnim-8 ease-out 0.2s infinite;
}

.smoke span:nth-child(10) {
    top: 100px;
    left: -50px;
    box-shadow: 0px 0px 5px #fff;
    animation: smokeAnim-9 ease-out 0.45s infinite;
}

.meteors-container span:nth-child(1) {
    top: 16.6666666667%;
    left: 100%;
    box-shadow: 0px 0px 5px #fff;
    animation: meterosAnim-0 linear 0.45s infinite;
}

.meteors-container span:nth-child(2) {
    top: 33.3333333333%;
    left: 100%;
    box-shadow: 0px 0px 5px #fff;
    animation: meterosAnim-1 linear 0.65s infinite;
}

.meteors-container span:nth-child(3) {
    top: 50%;
    left: 100%;
    box-shadow: 0px 0px 5px #fff;
    animation: meterosAnim-2 linear 0.55s infinite;
}

.meteors-container span:nth-child(4) {
    top: 66.6666666667%;
    left: 100%;
    box-shadow: 0px 0px 5px #fff;
    animation: meterosAnim-3 linear 0.65s infinite;
}

.meteors-container span:nth-child(5) {
    top: 83.3333333333%;
    left: 100%;
    box-shadow: 0px 0px 5px #fff;
    animation: meterosAnim-4 linear 0.45s infinite;
}

.meteors-container span:nth-child(6) {
    top: 100%;
    left: 100%;
    box-shadow: 0px 0px 5px #fff;
    animation: meterosAnim-5 linear 0.3s infinite;
}

.structure {
    /* Include your shake animation and add the new plane animation */
    animation: planeEnterAndBack 3s ease-in forwards;
    /* animation: shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite, planeEnterAndBack 3s ease-out forwards*/;
}

.text-container {
    opacity: 0;
    animation: fadeIn 1s ease-out 0.3s forwards;
}

.moveBackward {
    animation: moveBackward 1s forwards; /* Adjust time as needed */
}

.moveForwardLeave {
    animation: moveForwardLeave 1s 1s forwards!important; /* Delay it to start after moveBackward finishes */
}


@keyframes planeAndSmokeMovement {
    0% {
        transform: translateX(-100%); /* Plane and smoke start off-screen */
    }
    50% {
        transform: translateX(10%); /* Move a bit past the center if desired */
    }
    100% {
        transform: translateX(0%); /* Move back to the center or leave screen */
    }
}


@keyframes turnovers {
    0% {
        transform: rotate(90deg); /* Starting at 90 degrees */
    }
    10% {
        transform: rotate(91deg); /* Increase by 1 degree */
    }
    20% {
        transform: rotate(92deg); /* Increase by 1 degree */
    }
    30% {
        transform: rotate(93deg); /* Increase by 1 degree */
    }
    40% {
        transform: rotate(94deg); /* Increase by 1 degree */
    }
    50% {
        transform: rotate(95deg); /* Increase by 1 degree */
    }
    60% {
        transform: rotate(96deg); /* Increase by 1 degree */
    }
    70% {
        transform: rotate(97deg); /* Increase by 1 degree */
    }
    80% {
        transform: rotate(98deg); /* Increase by 1 degree */
    }
    90% {
        transform: rotate(99deg); /* Increase by 1 degree */
    }
    100% {
        transform: rotate(100deg); /* Ending at 100 degrees */
    }
}


@keyframes turnovers2 {
    0% {
        transform: rotate(100deg); /* Starting at 100 degrees */
    }
    10% {
        transform: rotate(98deg); /* Decrease by 2 degrees */
    }
    20% {
        transform: rotate(96deg); /* Decrease by 2 degrees */
    }
    30% {
        transform: rotate(94deg); /* Decrease by 2 degrees */
    }
    40% {
        transform: rotate(92deg); /* Decrease by 2 degrees */
    }
    50% {
        transform: rotate(90deg); /* Decrease by 2 degrees */
    }
    60% {
        transform: rotate(88deg); /* Decrease by 2 degrees */
    }
    70% {
        transform: rotate(86deg); /* Decrease by 2 degrees */
    }
    80% {
        transform: rotate(84deg); /* Decrease by 2 degrees */
    }
    90% {
        transform: rotate(82deg); /* Decrease by 2 degrees */
    }
    100% {
        transform: rotate(80deg); /* Ending at 80 degrees */
    }
}


@keyframes turnoversCenter {
    0% {
        transform: rotate(100deg); /* Starting at 100 degrees */
    }
    10% {
        transform: rotate(99deg); /* Decrease by 2 degrees */
    }
    20% {
        transform: rotate(98deg); /* Decrease by 2 degrees */
    }
    30% {
        transform: rotate(97deg); /* Decrease by 2 degrees */
    }
    40% {
        transform: rotate(96deg); /* Decrease by 2 degrees */
    }
    50% {
        transform: rotate(95deg); /* Decrease by 2 degrees */
    }
    60% {
        transform: rotate(94deg); /* Decrease by 2 degrees */
    }
    70% {
        transform: rotate(93deg); /* Decrease by 2 degrees */
    }
    80% {
        transform: rotate(92deg); /* Decrease by 2 degrees */
    }
    90% {
        transform: rotate(91deg); /* Decrease by 2 degrees */
    }
    100% {
        transform: rotate(90deg); /* Ending at 80 degrees */
    }
}


.loader-container{
    display: none;
}

.text-container{
    display: none;
    width: 300px;
    top: 0px;
    left: calc(50% - 150px);

}

.text-container2{
    position: absolute;
    left: calc(50% - 120px);
    width: 200px;
    bottom: 20px;
    display: none;
}

div#processStatus {
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
    width: 360px;
    margin-left: -70px;
    color:white!important;
}

#rocket-svg{
    width: 220px!important;
    height: 300px!important;
}

@media screen and (max-width: 1300px) {
    .stracture {
        left: calc(50% - 180px) !important;
    }

    #rocket-svg{
        width: 200px !important;
        height: 250px !important;
        top: -60px;
    }
}

.loader-container.introScreen{
    height: 0px;
}
/*
.incomming svg {
    width: 100px!important;
}*/




@keyframes turnoversSmoke {
    0% {
        transform: rotate(2deg); /* Starting point */
    }
    10% {
        transform: rotate(3deg); /* Increase by 1 degree */
    }
    20% {
        transform: rotate(4deg); /* Increase by 1 degree */
    }
    30% {
        transform: rotate(5deg); /* Increase by 1 degree */
    }
    40% {
        transform: rotate(6deg); /* Increase by 1 degree */
    }
    50% {
        transform: rotate(7deg); /* Increase by 1 degree */
    }
    60% {
        transform: rotate(8deg); /* Increase by 1 degree */
    }
    70% {
        transform: rotate(9deg); /* Increase by 1 degree */
    }
    80% {
        transform: rotate(10deg); /* Increase by 1 degree */
    }
    90% {
        transform: rotate(11deg); /* Increase by 1 degree */
    }
    100% {
        transform: rotate(12deg); /* Final rotation */
    }
}

@keyframes turnoversSmoke2 {
    0% {
        transform: rotate(12deg); /* Starting point */
    }
    10% {
        transform: rotate(10deg); /* Increase by 1 degree */
    }
    20% {
        transform: rotate(8deg); /* Increase by 1 degree */
    }
    30% {
        transform: rotate(6deg); /* Increase by 1 degree */
    }
    40% {
        transform: rotate(4deg); /* Increase by 1 degree */
    }
    50% {
        transform: rotate(2deg); /* Increase by 1 degree */
    }
    60% {
        transform: rotate(0deg); /* Increase by 1 degree */
    }
    70% {
        transform: rotate(-3deg); /* Increase by 1 degree */
    }
    80% {
        transform: rotate(-6deg); /* Increase by 1 degree */
    }
    90% {
        transform: rotate(-9deg); /* Increase by 1 degree */
    }
    100% {
        transform: rotate(-12deg); /* Final rotation */
    }
}



@keyframes turnoverCenterSmoke {
    0% {
        transform: rotate(12deg); /* Starting point */
    }
    10% {
        transform: rotate(11deg); /* Increase by 1 degree */
    }
    20% {
        transform: rotate(10deg); /* Increase by 1 degree */
    }
    30% {
        transform: rotate(8deg); /* Increase by 1 degree */
    }
    40% {
        transform: rotate(7deg); /* Increase by 1 degree */
    }
    50% {
        transform: rotate(5deg); /* Increase by 1 degree */
    }
    60% {
        transform: rotate(4deg); /* Increase by 1 degree */
    }
    70% {
        transform: rotate(3deg); /* Increase by 1 degree */
    }
    80% {
        transform: rotate(2deg); /* Increase by 1 degree */
    }
    90% {
        transform: rotate(1deg); /* Increase by 1 degree */
    }
    100% {
        transform: rotate(0deg); /* Final rotation */
    }
}