.body_background {
    background-image: 
        url(/assets/media/background/white_bg_city.png),
        url(/assets/media/background/sunray.jpg);
    background-size: 100%, cover;
    background-repeat: no-repeat;
    background-position: 0% 100%, center center;
    position: fixed;
    top: 0;
    height: 78vh; 
    max-height: 100% !important;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


@font-face {
    font-family: "Futura";
    src: url("/font/Futura-Bold-font.ttf") format("opentype");
    /* font-weight: 800; */
    /* font-style: normal; */
}

.countdown-timer {
    font-family: "Futura", sans-serif;
    margin-top: -10px;
    /* font-size: 1.5rem; */
    /* font-weight: 800; */
}



.airplane-container-landing {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevent overflow of the airplane */
}

.airplane-landing {
    width: 9vw;
    height: 9vw;
    /* background-image: url(/assets/media/background/compressed_bannerairplane2.png); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    animation: fly 5s ease-in-out infinite; /* Adjust duration and timing function as needed */
}

@keyframes fly {
    0% {
        transform: translateY(4vh); /* Start above the viewport */
    }
    50% {
        transform: translateY(2vh); /* Land in the center */
    }
    100% {
        transform: translateY(4vh); /* Take off back to the top */
    }
}

@media (max-width: 768px) {
    .airplane-landing {
        width: 30vw; /* Larger size for better visibility on smaller screens */
        height: 30vw; /* Maintain aspect ratio */
        animation: fly 7s ease-in-out infinite; /* Slower animation for mobile */
    }

    @keyframes fly {
        0% {
            transform: translateY(10vh); /* Start a bit lower than before */
        }
        50% {
            transform: translateY(7vh); /* Move down to land lower */
        }
        100% {
            transform: translateY(10vh); /* Take off back to the top */
        }
    }
}



/* Adjust height for mobile devices */
@media screen and (max-width: 768px) {
    .body_background {
        height: 80vh;
    }
}


.card:hover {
    transform: translateY(-5px);
    /* Adjust the value based on your preference */
    transition: transform 0.3s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    /* Add a subtle box shadow on hover */
}

.invisible-section {
    height: 65vh;
    background: transparent;
}

.section-div {
    position: relative; 
}

#section-1 {
    padding: 0 30px;
    padding-top: 5rem;
}

/* Clouds */

.cloud-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.cloud {
    top: 0%;
    position: absolute;
    background-size: cover;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    opacity: 1;
}

.cloud1 {
    margin-top: 10px;
    width: 900px;
    height: 390px;
    animation-name: moveCloud1;
    animation-duration: 50s;
    /* Adjust the speed of the first cloud */
}

.cloud2 {
    width: 700px;
    height: 375px;
    animation-name: moveCloud2;
    animation-duration: 90s;
    /* Adjust the speed of the second cloud */
}

.cloud3 {
    width: 1100px;
    height: 400px;
    animation-name: moveCloud3;
    animation-duration: 100s;
    /* Adjust the speed of the second cloud */
}

@media (max-width: 991px) {
    .cloud {
        top: 5%;
    }

    .cloud1 {
        margin-top: 10px;
        width: 650px;
        height: 275px;
    }

    .cloud2 {
        width: 400px;
        height: 200px;
    }

    .cloud3 {
        width: 800px;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .cloud {
        top: 10%;
    }

    .cloud1 {
        width: 550px;
        height: 240px;
    }

    .cloud2 {
        width: 300px;
        height: 150px;
    }

    .cloud3 {
        width: 600px;
        height: 225px;
    }
}

@media (max-width: 576px) {
    .cloud1 {
        width: 550px;
        height: 240px;
    }

    .cloud2 {
        width: 300px;
        height: 150px;
    }

    .cloud3 {
        width: 600px;
        height: 225px;
    }
}

@keyframes moveCloud1 {
    from {
        left: 0px;
        /* Adjust the starting position of the first cloud */
    }

    to {
        left: 100%;
        /* Adjust the end position of the first cloud */
    }
}

@keyframes moveCloud2 {
    from {
        left: 0px;
        /* Adjust the starting position of the second cloud */
    }

    to {
        left: 100%;
        /* Adjust the end position of the second cloud */
    }
}

@keyframes moveCloud3 {
    from {
        right: 0px;
        /* Adjust the starting position of the second cloud */
    }

    to {
        right: 100%;
        /* Adjust the end position of the second cloud */
    }
}