*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
/* header{
    height: 80px;
} */
.container{ 
    width: 100%;
max-width: 1360px;
margin: 0 auto;
position: relative;
padding-inline: 15px;
}
#intro-animation {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 99;
    overflow: hidden;


}
body.intro-active {
    overflow: hidden;  
    pointer-events: none;  
}

body.intro-active #intro-animation {
    pointer-events: auto;  /* allow clicks inside intro if needed */
}
body.intro-active .general-image,
body.intro-active .general-image-mobile {
    z-index: 9999999;
    /* transform: translateY(-80px); */
}
body.intro-active .bottom-sticky{
    display: none;
}


.bannerpart .banner_images{
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.bannerpart .banner_images .image_animation{
    object-fit: cover;
border: 2.76065px solid #FFFFFF;
box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
border-radius: 16.5639px;
top: 50%;
left: 50%;
position: absolute;
width: 100%;
height: 100%;
}
.bannerpart .banner_images .image1{
z-index: 1;
transform: translate(-50%, -50%) rotate(2.44deg) scale(0);
animation: bannerimageanimation 0.8s ease-in-out 1 forwards;
animation-delay: 0s;
}
@keyframes bannerimageanimation{
    0%{
        transform: translate(-50%, 100%) rotate(2.44deg) scale(0);
    }
    100%{
        transform: translate(-50%, -50%) rotate(2.44deg) scale(0.4);
    }
}
.bannerpart .banner_images .image2{
    z-index: 2;
     transform: translate(-50%, 100%) rotate(-4.03deg) scale(0);
    animation: bannerimageanimation2 0.8s ease-in-out 1 forwards;
animation-delay: 0.8s;
}
@keyframes bannerimageanimation2{
    0%{
        transform: translate(-50%, 100%) rotate(-4.03deg) scale(0);
    }
    100%{
        transform: translate(-50%, -50%) rotate(-4.03deg) scale(0.4);
    }
}
.bannerpart .banner_images .image3{
    z-index: 3;
     transform: translate(-50%, 100%) rotate(2.44deg) scale(0);
    animation: bannerimageanimation3 1.6s ease-in-out 1 forwards;
    animation-delay: 1.6s;
}
@keyframes bannerimageanimation3{
    0%{
        transform: translate(-50%, 100%) rotate(2.44deg) scale(0);
        border-radius: 16.5639px;
    border: 2.76065px solid #FFFFFF;
    }
    50%{
        transform: translate(-50%, -50%) rotate(2.44deg) scale(0.4);
        border-radius: 16.5639px;
        border: 2.76065px solid #FFFFFF;
    }
    100%{
        transform: translate(-50%, -50%) rotate(0) scale(1);
        border-radius: 0;
        border: 0 solid #FFFFFF;
    }
}

.bannerpart .container{
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: flex-start;
        height: 100%;
    padding: 60px 15px;
}
.banner_content{
z-index: 4;
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 48px;
gap: 24px;
width: 80%;
max-width: 793px;
background: rgba(0, 0, 0, 0.1);
border-radius: 32px;
transform: scale(0);
opacity: 0;
animation: banner_content 0.8s ease-in-out 1 forwards;
animation-delay: 4s;
}

@keyframes banner_content{
    0%{
        transform: scale(0);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
    
}

.header {
    transform: translateY(-100%);
    transition: 0.5s ease all;
    opacity: 0;
animation: header_appear 0.4s ease-in-out 1 forwards;
animation-delay: 3.6s;
    z-index: 9999999;
}
.modal-backdrop{
    min-height: 100vh;
}
/* .header .modal-backdrop .modal.active {
    transform: translateY(50%);
} */

@keyframes header_appear{
    0%{
        transform: translateY(-50%);
        opacity: 0;
    }
    100%{
        transform: translateY(0%);
        opacity: 1;
    }
    
}

@keyframes intro_hide{
    0%{
        opacity: 1;
        pointer-events: none;
    }

    100%{
        opacity: 0;
        pointer-events: none;
    }
}

@keyframes header_appear2{
    0%{
        transform: translateY(-80px);
    }
    50%{
        transform: translateY(-80px);
    }
    100%{
        transform: translateY(0);
    }
    
}
.general-image {
    box-sizing: border-box;
    padding: 90px 0;
    background: none;
    /* background-size: cover; */
    position: relative;
    transform: translateY(-80px);
    /* transition: 0.1s ease all; */
    animation: header_appear2 0.8s ease-in-out 1 forwards;
    animation-delay: 2.4s; 
}
.general-image .inner {
    z-index: 9999999;
    position: relative;
}

.general-image .check-availability-block {
    box-sizing: border-box;
    width: 793px;
    height: 615px;
    border-radius: 32px;
    background: #0000001a;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 48px;
    border: 1px solid rgba(255, 255, 255, .3);
    transform: translateX(-50%);
    opacity: 0;
    animation: banner_content_new_desktop 0.8s ease-in-out 1 forwards;
    animation-delay: 4s;
    max-height: 100%;
}


@keyframes banner_content_new_desktop {
    0% {
        transform: translatex(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }

}

.general-image .check-availability-block div {
    margin-bottom: 31px;
}
@media screen and (min-width: 992px) {
    .banner_fullwrapper>#intro-animation{
        display: none;
    }
    .mobile_banner{
        display: none;
    }
}
@media screen and (max-width: 991px) {
        .desktop_banner{
    display: none;
}

.header{
    animation-duration: 0.8s;
    animation-delay: 2.4s;
}
/* .general-image, .general-image-mobile{
    transform: translateY(0);
    animation: none !important;
} */

.bannerpart .banner_images .image1-mob{
z-index: 1;
transform: translate(-50%, -50%) rotate(2.44deg) scale(0);
animation: bannerimageanimation-mob 0.8s ease-in-out 1 forwards;
animation-delay: 0s;
}
@keyframes bannerimageanimation-mob{
    0%{
        transform: translate(-50%, 100%) rotate(2.44deg) scale(0);
    }
    100%{
        transform: translate(-50%, -50%) rotate(2.44deg) scale(0.8);
    }
}

.bannerpart .banner_images .image2-mob{
    z-index: 2;
     transform: translate(-50%, 100%) rotate(-3.98deg) scale(0);
    animation: bannerimageanimation2-mob 0.8s ease-in-out 1 forwards;
animation-delay: 0.8s;
}
@keyframes bannerimageanimation2-mob{
    0%{
        transform: translate(-50%, 100%) rotate(-3.98deg) scale(0);
    }
    100%{
        transform: translate(-50%, -50%) rotate(-3.98deg) scale(0.8);
    }
}
.bannerpart .banner_images .image3-mob{
    z-index: 3;
    transform: translate(-50%, 100%) rotate(5.4deg) scale(0);
    animation: bannerimageanimation3-mob 1.6s ease-in-out 1 forwards;
    animation-delay: 1.6s;
    height: auto;
            max-height: calc(70vh - 80px);
}
@keyframes bannerimageanimation3-mob{
    0%{
        transform: translate(-50%, 100%) rotate(5.4deg) scale(0);
        border-radius: 16.5639px;
        border: 2.76065px solid #FFFFFF;
        top: 50%;
        position: absolute;
    }
    50%{
        transform: translate(-50%, -50%) rotate(5.4deg) scale(1.5);
        border-radius: 0;
        border: 0;
        top: 50%;
        position: absolute;
    }
    100%{
        transform: translate(-50%, 0%) rotate(0) scale(1);
        border-radius: 0;
        border: 0 solid #FFFFFF;
        top: 0px;
        position: relative;
    }
}
    .banner_fullwrapper {
        position: relative;
    }

.op_0_animatediv{
    opacity: 1;
    animation: op0 0.4s ease-in-out 1 forwards;
    animation-delay: 2.4s;
}
@keyframes op0 {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}


    .banner_fullwrapper .general-image section#intro-animation {
        display: none;
    }
    .general-image {
            /* background: url(../images/general-image-BjQRl7Sj.webp) no-repeat center; */

        animation: none;
        transform: none;
        padding: 50px 0;
        height: calc(100vh - 80px);
        display: flex;
        align-items: center;
    }
.banner_fullwrapper .general-image {
    /* min-height: calc(100vh - (80px + 50vw)); */
    z-index: 999;
    padding: 0;
    height: auto;
    background: url(https://villaitaly.oblabz.dev/wp-content/uploads/2025/12/animation_image_mobile1-1-154x300.png) no-repeat center center / cover;
    animation: banner_content_new 0.8s 
ease-in-out 1 forwards;
        animation-delay: 2.4s;
        /*transform: translateY(100%);
        opacity: 0;*/
        transform: translateY(0%);
        opacity: 1;
}
.general-image .inner {
        width: 100%;
    }
    .banner_fullwrapper .general-image .inner .check-availability-block {
        border-radius: 0;
        min-height: calc(100vh - (80px + 50vw));
        height: 100%;
       /* display: flex;*/
        flex-direction: column;
        justify-content: center;
        overflow: auto;
        padding-block: 30px;
        animation: none;
        transform: translateX(0%);
        opacity: 1;
        /* animation: banner_content_new 0.8s 
ease-in-out 1 forwards;
        animation-delay: 2.4s; */
        
    }

@keyframes banner_content_new {
    0% {
        /*transform: translateY(100%);
        opacity: 0;*/
        transform: translateY(0%);
        opacity: 1;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }

}

    .banner_fullwrapper .general-image-mobile {
        z-index: 999;
        display: block;
        opacity: 1;
        position: relative;
        pointer-events: none;
        max-height: calc(70vh - 80px);
    }

}