/* CSS Document */

.hover-rotate {
  overflow: hidden;

}

.hover-rotate img {
  transition: all 0.3s;

}

.hover-rotate:hover img {
  transform: scale(1.2) rotate(-3deg);
}

        .image-container {
       position: relative;
        width: 100%; /* Adjust as needed */
            overflow: hidden; 
			aspect-ratio: 920 / 86;
        }

        .image-container img {
            width: 100%;
            object-fit: cover;
			position: absolute;
            top: 0;
            left: 0;
			
        }

        .image-container .top-image {
            z-index: 2;
			transition: transform 0.2s ease-in-out;

        }

        .image-container:hover .top-image {
            transform: scale(1.1) rotate(-5deg);
        }




        .image-container2 {
       position: relative;
        width: 100%; /* Adjust as needed */
            overflow: hidden; 
			aspect-ratio: 920 / 132;
        }

        .image-container2 img {
            width: 100%;
            object-fit: cover;
			position: absolute;
            top: 0;
            left: 0;
			
        }

        .image-container2 .top-image {
            z-index: 2;
			transition: transform 0.2s ease-in-out;

        }

        .image-container2:hover .top-image {
            transform: scale(1.2) translate(-10px, 0px);
        }





       .image-container3 {
       position: relative;
        width: 100%; /* Adjust as needed */
            overflow: hidden; 
			aspect-ratio: 368 / 240;
		   overflow: visible;
        }

        .image-container3 img {
            width: 100%;
            object-fit: cover;
			position: absolute;
            top: 0;
            left: 0;
			
        }

        .image-container3 .l4-image {
            z-index: 4;
			transition: transform 0.2s ease-in-out;
        }
        .image-container3:hover .l4-image {
            transform: scale(1.2) translate(10px, 0px);
        }


        .image-container3 .l3-image {
            z-index: 3;
			transition: transform 0.2s ease-in-out;
        }
        .image-container3:hover .l3-image {
            transform: scale(1.1) translate(0px, 0px);
        }


		.image-container3 .l2-image {
            z-index: 2;
			transition: transform 0.2s ease-in-out;
        }
        .image-container3:hover .l2-image {
            transform: scale(1.1) translate(40px, 0px);
        }


		.image-container3 .l1-image {
            z-index: 1;
			transition: transform 0.3s ease-in-out;
        }
        .image-container3:hover .l1-image {
            transform: scale(0.9) translate(0px, 0px);
        }








       /* Cloud Styles */
        .cloud-container {
            position: fixed; /* Keeps it above everything */
            top: 20%; /* Adjust vertical position */
            left: 100%; /* Start off-screen on the right */
            width: 250px; /* Adjust size as needed */
            height: auto;
            z-index: 100; /* Ensures it floats over other content */
            animation: moveCloud 20s linear infinite; /* Smooth looping */
        }

        .cloud-container img {
            width: 100%;
            height: auto;
            opacity: 0.8; /* Optional: Gives a more natural look */
        }

        @keyframes moveCloud {
            from {
                left: 100%; /* Start off-screen */
            }
            to {
                left: -300px; /* Move off-screen to the left */
            }
        }

        /* Sample Content */
        .content {
            position: relative;
            text-align: center;
            padding: 50px;
        }

        h1 {
            font-size: 48px;
            color: #333;
        }

        .image-placeholder {
            width: 80%;
            max-width: 600px;
            height: 300px;
            background-color: #ddd;
            margin: 20px auto;
            border-radius: 10px;
        }