/* styles.css */

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.background-image {
    background-image: url('../images/background.jpg'); /* Adjust the path to your background image */
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1; /* Ensure the background is behind other content */
}


.circle-image {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1; /* Ensure the circle image is behind other content */
    overflow: hidden; /* Hide the overflow */
    height: 33%; /* Set the height to half of the image height */
    width: 100%;


}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.circle-img {
    max-width: 100%; /* Adjust the max width of the image */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Make sure the image behaves as a block element */
    animation: rotate 20s linear infinite; /* Apply rotation animation */
}

.container {
    display: flex;
    justify-content: center; /* Horizontally center the logo */
    align-items: center; /* Vertically center the logo */
    height: 40%; /* Adjust the height as needed */
}

.logo {
    max-width: 50%; /* Ensure the logo doesn't exceed its container's width */
    height: auto; /* Maintain aspect ratio */
}
/* Tablet styles */
@media only screen and (min-width: 600px) {
    .logo {
        max-width: 60%; /* Adjust as needed */
    }
}

/* Mobile styles */
@media only screen and (max-width: 599px) {
    .logo {
        max-width: 70%; /* Adjust as needed */
    }
}



/* Styles for clickable images */
.clickable-images {
    text-align: center; /* Center align the images */
    margin-top: 20px; /* Adjust the top margin as needed */
}

.clickable-images img {
    width: 35%; /* Set the width of the images */
    margin: 10px; /* Add some margin between the images */
}








.bird{
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg');
    filter: invert(34%) sepia(100%) saturate(50%) hue-rotate(30deg) brightness(93%) contrast(91%);
    background-size: auto 100%;
    width: 88px;
    height: 125px;
    will-change: background-position;

    animation-name: fly-cycle;
    animation-timing-function: steps(10);
    animation-iteration-count: infinite;
}

.bird-one{
    animation-duration: 1s;
    animation-delay: -0.5s;

}
.bird-two{
    animation-duration: 0.9;
    animation-delay: -0.75.s;

}
.bird-three{
    animation-duration:1.25s;
    animation-delay: -0.25s

}
.bird-four{
    animation-duration: 1.1s;
    animation-delay: -0.5s;
}

.bird-container {
	position: absolute;
	top: 10%;
  left: -3%;
	transform: scale(0) translateX(-10vw);
	will-change: transform;

	animation-name: fly-right-one;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.bird-container-one{
	animation-duration: 15s;
	animation-delay: 0;
}

.bird-container-two{
	animation-duration: 16s;
	animation-delay: 1s;
}

.bird-container-three{
	animation-duration: 14.6s;
	animation-delay: 9.5s;
}

.bird-container-four {
		animation-duration: 16s;
		animation-delay: 10.25s;
}
/* @keyframes fly-cycle {
    100%{
        background-position: -3600px 0;
    }
} */
@keyframes fly-cycle {

	100% {
		background-position: -900px 0;
	}

}

@keyframes fly-right-one {

	0% {
		transform: scale(0.3) translateX(-10vw);
	}

	10% {
		transform: translateY(2vh) translateX(10vw) scale(0.4);
	}

	20% {
		transform: translateY(0vh) translateX(30vw) scale(0.5);
	}

	30% {
		transform: translateY(4vh) translateX(50vw) scale(0.6);
	}

	40% {
		transform: translateY(2vh) translateX(70vw) scale(0.6);
	}

	50% {
		transform: translateY(0vh) translateX(90vw) scale(0.6);
	}

	60% {
		transform: translateY(0vh) translateX(110vw) scale(0.6);
	}

	100% {
		transform: translateY(0vh) translateX(110vw) scale(0.6);
	}

}

@keyframes fly-right-two {

	0% {
		transform: translateY(-2vh) translateX(-10vw) scale(0.5);
	}

	10% {
		transform: translateY(0vh) translateX(10vw) scale(0.4);
	}

	20% {
		transform: translateY(-4vh) translateX(30vw) scale(0.6);
	}

	30% {
		transform: translateY(1vh) translateX(50vw) scale(0.45);
	}

	40% {
		transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
	}

	50% {
		transform: translateY(0vh) translateX(90vw) scale(0.45);
	}

	51% {
		transform: translateY(0vh) translateX(110vw) scale(0.45);
	}

	100% {
		transform: translateY(0vh) translateX(110vw) scale(0.45);
	}

}