@media only screen and (min-width: 1024px) {

    .animation-text {
        width: 100%;
    }

    .animation-text * {
        position: sticky;
    }

    .animation-text span {
        transition: clip-path 1.9s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.9s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-delay: 0s;
        transform: translate3d(0, 100%, 0);
        clip-path: polygon(-10% -100%, 110% -100%, 110% 0%, -10% 0%);
        position: absolute;
    }

    .animation-text span.animate-text {
        transform: translate3d(0, 0, 0);
        clip-path: polygon(-10% 0%, 110% 0%, 110% 110%, -10% 110%);
        opacity: 1;
    }


    .animation-heading {
        width: 100%;
    }

    .animation-heading span {
        transition: clip-path 1.9s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.9s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-delay: 0s;
        transform: translate3d(0, 100%, 0);
        clip-path: polygon(-10% -100%, 110% -100%, 110% 0%, -10% 0%);
        position: absolute;
    }

    .animation-heading span.animate-text {
        transform: translate3d(0, 0, 0);
        clip-path: polygon(-10% 0%, 110% 0%, 110% 110%, -10% 110%);
        opacity: 1;
    }



    /* image zoom effect */
    /* Initial state of the image */
    .image-animation {
        overflow: hidden;
        display: inline-block;
        transition: all 1.9s cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: scale(1);
        background-color: #5a5a5a;
    }

    .image-animation.in-view {
        transform: scale(1);
    }

    .zoom-image {
        width: 100%;
        /* The image will take the full width of its container */
        height: auto;
        /* Maintain aspect ratio */
        visibility: hidden;
        /* Hide image initially */
        opacity: 0;
        transform: scale(1.3);
        transition: all 1.9s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    /* When image is in view (after scroll) */
    .image-animation.in-view .zoom-image {
        visibility: visible;
        /* Make the image visible */
        transform: scale(1);
        /* Reset zoom to normal size */
        opacity: 1;
        /* Make the image fully opaque */
        transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
        /* Smooth transition for zoom and opacity */
    }

    /* Effect on hover */
    .image-animation:hover .zoom-image {
        transform: scale(1.1) !important;
        /* Zoom the image to 110% */
        opacity: 1 !important;
        /* Make the image fully opaque */
        transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
        /* Smooth transition for zoom and opacity */
    }

    .image-inn {
        width: fit-content;
        transition: transform 1.9s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 1.9s cubic-bezier(0.215, 0.61, 0.355, 1);
    }


    .amenities {
        font-size: 100px;
        margin-top: 100px;
        /* Space at the top */
        transition: all 0.3s ease;
        will-change: transform, font-size;
    }



    .animated-paragraph span {
        transition: clip-path 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-delay: 0.5s;
        transform: translate3d(0, 100%, 0);
        clip-path: polygon(-10% -100%, 110% -100%, 110% 0%, -10% 0%);
    }

    .animated-paragraph.is-inview span {
        transition: clip-path 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
        clip-path: polygon(-268% 0%, 390% 0%, 420% 390%, -440% 530%);
        transition-delay: 0.5s;
    }

    .animated-paragraph.pera.is-inview span {
        transition: clip-path 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
        clip-path: polygon(0% 0%, 680% 0%, 0 860%, -600% 170%);
        transition-delay: 0.5s;
    }





    .img-hover-upper {
        max-height: 300px;
        transition: all 1.6s ease;
    }

    .img-hover-upper:hover {
        height: 400px;
        max-height: none;
        transition: all 1.6s ease;
    }

    .img-hover-upper:hover .small-img-hover {
        height: 400px;
        transition: all 1.6s ease;
    }

    .small-img-hover {
        transition: all 1.6s ease;
        height: 400px;
    }

}

@media only screen and (max-width: 1400px) {

    .animated-paragraph.is-inview span {
        clip-path: polygon(-330% 0%, 590% 0%, 240% 290%, -360% 410%);
    }
}

@media only screen and (min-width: 1200px) {



    .footer-logo {
        transform: translateX(0px);
        transition: all 1.5s ease;
    }

    .logo-section.is-inview .footer-logo {
        transform: translateX(0);
        transition: all 1.5s ease;
    }

    .animation-ltr {
        transform: translateX(-100%);
        transition: all 1.5s ease;
    }

    .animation-ltr.is-inview {
        transform: translateX(0);
        transition: all 1.5s ease;
    }

    .animation-rtl {
        transform: translateX(100%);
        transition: all 1.5s ease;
    }

    .animation-rtl.is-inview {
        transform: translateX(0);
        transition: all 1.5s ease;
    }
}