.elementor-727 .elementor-element.elementor-element-638079d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-727 .elementor-element.elementor-element-1ec5315{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-727 .elementor-element.elementor-element-e1fa622{width:100%;max-width:100%;}.elementor-727 .elementor-element.elementor-element-e1fa622 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-727 .elementor-element.elementor-element-e1fa622.elementor-element{--align-self:center;}/* Start custom CSS for html, class: .elementor-element-e1fa622 *//* Responsive Animation Home Page */
        /* Basic styling for the responsive image container */
        .image-container {
            width: 100%;
            max-width: 1200px; /* Limits the max width for larger screens */
            aspect-ratio: 1; /* Maintains a square aspect ratio */
            position: relative;
            cursor: pointer;
			margin: 0 auto;
        }

        /* Responsive images */
        .image-container img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover; /* Ensures the image covers the container proportionally */
            transition: opacity 0.3s ease;
        }

        /* Default visibility */
        .regular-image {
            opacity: 1; /* Show initially */
            z-index: 1;
        }

        /* Hover image initially hidden */
        .hover-image {
            opacity: 0;
            z-index: 2;
        }

        /* Click image initially hidden */
        .click-image {
            opacity: 0;
            z-index: 3;
        }

        /* Hover state */
        .image-container:hover .hover-image {
            opacity: 1; /* Show hover image */
        }

        .image-container:hover .regular-image {
            opacity: 1; /* Hide default image */
        }

        /* Click state */
        .image-container.clicked .regular-image, .image-container.clicked .click-image {
            opacity: 1; /* Show click image */
        }

        .image-container.clicked .hover-image {
            opacity: 0; /* Hide others when clicked */
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 768px) {
            .image-container {
                max-width: 600px; /* Smaller max width for mobile */
            }
        }

        @media (max-width: 480px) {
            .image-container {
                max-width: 400px; /* Even smaller for very small screens */
            }
        }/* End custom CSS */